web-prototype

Web Prototype 技能

使用捆绑的种子模板和布局库生成一个独立的 HTML 原型——不要从头编写 CSS。种子模板已经包含良好的默认设置（字体、间距、强调色预算）。你的工作是将它们组合起来。

资源索引

web-prototype/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready section skeletons
    └── checklist.md        ← P0/P1/P2 self-review

工作流

步骤 0 — 前期准备（开始编写前只需执行一次）

1. 从头到尾阅读 assets/template.html——至少读到 <style> 块。references/layouts.md 顶部的类清单列出了必须在此处定义的所有类；如果有类缺失，请将其添加到 <style>，而不要在每个区块中反复内联定义。
2. 阅读 references/layouts.md，了解现有的区块骨架。不要编写未涵盖的区块类型——选择最接近的布局并进行调整。
3. 阅读当前的 DESIGN.md（已注入你的系统提示）。将其颜色映射到种子模板中的六个 :root 变量；不要引入新令牌。

步骤 1 — 复制种子模板

将 assets/template.html 复制到项目根目录，命名为 index.html。将六个 :root 变量替换为当前设计系统的令牌。替换页面 <title> 和顶部导航栏品牌名。

步骤 2 — 规划区块列表

先选择布局，再撰写文案。 默认节奏（来自 layouts.md）：

页面类型	默认节奏
落地页	1 个主视觉区 → 3 个功能区 → 4 个数据统计区 或 5 个引用区 → 自定义分栏区 → 6 个 CTA 区
营销 / 编辑内容	1 个居中主视觉区 → 7 个日志列表区 → 6 个 CTA 区
定价页	1 个居中主视觉区 → 8 个对比表格区 → 6 个 CTA 区
文档索引页	1 个居中主视觉区 → 7 个日志列表区（文档分节）→ 6 个 CTA 区

在开始编写前，用一句话向用户说明选定的区块列表——这样他们可以趁早调整，而不必等到写完 200 行 HTML 后再改。

步骤 3 — 粘贴并填充

对于选定的每种布局，将 layouts.md 中的 <section> 区块复制到 index.html 的 <main id="content"> 中。将方括号中的 [REPLACE] 文本替换为符合用户需求的具体文案。不要填充无意义的内容——如果某个位置没有内容，该区块就不合适；请选择其他布局。

步骤 4 — 自检

从头到尾检查 references/checklist.md。所有 P0 项都必须通过后才能继续。P1 项应通过；P2 项为加分项。

步骤 5 — 输出成品

将 index.html 放在 <artifact> 标签中。先用一句话描述其中的内容。到 </artifact> 为止，不要再输出其他内容。

硬性规则（种子模板已保护其中大多数规则——不要违背）

• 每个屏幕最多使用两次单一强调色。 默认预算为眉题 + 主要 CTA。
• 展示字体使用衬线字体（种子模板中的 Iowan Old Style / Charter / Georgia）。正文使用无衬线字体。数字、说明文字和眉题使用等宽字体。
• 使用图像占位符，不要使用外部 URL。 使用 .ph-img 类——绝不要链接到图库 CDN。
• 移动端重排已通过种子模板中 920px 的媒体查询实现。 不要添加固定宽度破坏这一功能。
• 每个 <section> 都要有 data-od-id，以便评论模式定位。

输出规范

<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
<!doctype html>
<html>...</html>
</artifact>

成品前写一句话。之后不要输出任何内容。