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 descriptivealt - 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