xieshuai0817-hub/LanceSkill

Human Factors Steward — Blog Post Writing Skill

Converts raw, messy blog drafts (Markdown exports, old Blogger inline styles, etc.) into clean HTML that matches the V8 theme style.

---

Output Specifications

• Use V8 design language CSS variables and color scheme
• Embed JSON-LD Article Schema for AI SEO
• Use Traditional Chinese throughout — no Simplified Chinese characters allowed (e.g., "头" → "頭", "专" → "專", "发" → "發", etc.). After output, scan the entire text to ensure no Simplified characters remain.
• Insert Noah character interaction components where appropriate
• Remove all garbage attributes from external editors (cid, mdtype, white-space, etc.)
• Keep original images and ensure loading="lazy" and descriptive alt
• Images use border-radius: 8px, full width, centered

---

V8 Color Reference

--ergopt-text: #242826;
--ergopt-muted: #6b736f;
--ergopt-border: #dde5df;
--ergopt-accent: #147d75;
--ergopt-accent-soft: #e7f3ef;
--ergopt-warm: #f3eadb;

---

SEO Structure

Every article must embed a JSON-LD Article Schema:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title (including Human Factors Steward / Noah brand name)",
  "description": "Search result display description, 50-80 characters, including keywords",
  "author": { "@type": "Person", "name": "Human Factors Steward Noah" },
  "image": "Feature image URL",
  "keywords": ["human factors engineering", "keyword1", "keyword2", "NoahHumanFactorsSteward"]
}
</script>

---

Article Layout Components

All components share a common wrapper container:

<div class="article-wrap">
  <!-- Content goes here -->
</div>

Component CSS (Full Import)

.article-wrap {
  max-width: 760px; margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  color: #242826; line-height: 1.85; font-size: 1.08rem; letter-spacing: .02em;
}
.article-wrap * { box-sizing: border-box; }
.article-wrap .featured-img { width: 100%; border-radius: 8px; margin: 0 0 24px; display: block; }
.article-wrap p { margin: 0 0 1.18em; color: #242826; }
.article-wrap h2 { font-size: 1.55rem; font-weight: 700; color: #242826; margin: 1.85em 0 .7em; line-height: 1.35; padding-bottom: 6px; border-bottom: 2px solid #e7f3ef; }
.article-wrap h3 { font-size: 1.28rem; font-weight: 700; color: #242826; margin: 1.5em 0 .6em; line-height: 1.35; }
.article-wrap strong { color: #147d75; }
.article-wrap ul, .article-wrap ol { margin: 0 0 1.35em 1.4em; padding: 0; }
.article-wrap li { margin: .35em 0; }

.noah-callout {
  background: #e7f3ef; border-left: 4px solid #147d75;
  border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 1.5em 0;
}
.noah-callout .label { font-size: .82rem; font-weight: 700; color: #147d75; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.noah-callout p { margin: 0; color: #242826; }

.ng-box {
  background: #fbfaf7; border: 1px solid #dde5df; border-left: 4px solid #e8a838;
  border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 1em 0;
}
.ng-box .label { font-size: .82rem; font-weight: 700; color: #b8860b; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.ng-box p { margin: 0; color: #4a524e; }

.tip-card {
  background: #f7f8f6; border: 1px solid #dde5df;
  border-radius: 8px; padding: 18px 20px; margin: 1em 0;
}
.tip-card .num {
  display: inline-block; font-size: .78rem; font-weight: 700; color: #fff; background: #147d75;
  border-radius: 999px; padding: 0 10px; line-height: 1.7; margin-bottom: 4px;
}
.tip-card h3 { font-size: 1.1rem; font-weight: 700; color: #242826; margin: 4px 0 6px; }
.tip-card p { margin: 0; color: #4a524e; font-size: 1rem; }

.check-card {
  background: #f7f8f6; border: 1px solid #dde5df;
  border-radius: 8px; padding: 18px 20px; margin: 1em 0;
}
.check-card .num {
  display: inline-block; font-size: .78rem; font-weight: 700; color: #fff; background: #147d75;
  border-radius: 999px; padding: 0 10px; line-height: 1.7; margin-bottom: 4px;
}
.check-card h3 { font-size: 1.1rem; font-weight: 700; color: #242826; margin: 4px 0 6px; }
.check-card p { margin: 0 0 6px; color: #4a524e; font-size: 1rem; }
.check-card .note { font-size: .88rem; color: #6b736f; margin: 0; padding-left: 12px; border-left: 2px solid #dde5df; }

.article-divider {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, #dde5df, transparent);
  margin: 2.2em 0;
}

@media (max-width: 700px) {
  .article-wrap { font-size: 1.04rem; }
}

---

Component Usage Guide

Component	Purpose	When to Use
noah-callout	Noah reminder / tip	Opening introduction, closing summary
ng-box	NG posture / wrong concept / pitfalls	When listing common mistakes
tip-card	Correct steps / tutorial / technique	When listing numbered steps
check-card	Self-check items	Items readers can check themselves (e.g., sleeping posture, sitting posture)
pillow-hint	Selection criteria / concise tip	Quick reference info (e.g., fist height indicator)
article-divider	Section divider	Between each major section

---

Article Structure Template

<!-- Article Title (V8 + Noah) -->
<script type="application/ld+json">{/* Article Schema */}</script>
<style>{/* Import CSS above */}</style>

<div class="article-wrap">

  <img class="featured-img" src="..." alt="..." loading="lazy">

  <!-- Opening 1-2 paragraphs of context -->

  <p>...</p>

  <!-- Noah reminder box (optional) -->
  <div class="noah-callout">
    <div class="label">Noah's Warm Reminder</div>
    <p>...</p>
  </div>

  <hr class="article-divider">

  <h2>Topic 1: Human Factors Engineering Analysis</h2>
  <p>...</p>

  <hr class="article-divider">

  <h2>Topic 2: Incorrect Posture / Pitfalls</h2>
  <div class="ng-box">...</div>
  <div class="ng-box">...</div>

  <hr class="article-divider">

  <h2>Topic 3: Correct Practice</h2>
  <div class="tip-card"><div class="num">1</div><h3>...</h3><p>...</p></div>
  <div class="tip-card"><div class="num">2</div><h3>...</h3><p>...</p></div>
  <div class="tip-card"><div class="num">3</div><h3>...</h3><p>...</p></div>

  <hr class="article-divider">

  <h2>Noah's Caring Reminder</h2>
  <p>...</p>

  <div class="noah-callout">
    <div class="label">Noah the Steward</div>
    <p>...</p>
  </div>

</div>

---

Naming Conventions

• Article file name: ArticleExample_<Topic>.html
• Schema headline: Ends with brand identification "Human Factors Steward / Noah"
• Keywords array: Last entry is always "NoahHumanFactorsSteward"
• Image alt text: Descriptive Chinese text, no more than 15 characters