web-prototype

Web 原型技能

使用捆绑的种子文件和布局库制作一个独立的 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 — 根据种子文件准备 index.html

使用 assets/template.html 作为规范项目文件的种子，通常为 index.html。

替换六个 :root 变量，并替换页面 <title> 和顶部导航栏品牌。

步骤 2 — 规划区块列表

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

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

在开始编写前，先用一句话向用户说明所选列表——现在调整成本低，等写完 200 行 HTML 后再调整就没那么容易了。

步骤 3 — 粘贴并填充

将所选布局的 <section> 区块从 layouts.md 复制到项目 HTML 的 <main id="content"> 中。将方括号中的 [REPLACE] 文本替换为根据用户需求撰写的具体文案。不要填充占位内容——如果某个位置没有内容，说明选错了区块，应改用其他布局。将每个 .ph-img 区块都视为布局脚手架；当区块需要图像时，按照下方的真实素材优先规则替换，并在自检前完成。

步骤 4 — 自检

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

步骤 5 — 编写项目文件

将完成的 HTML 写入规范项目文件，通常为 index.html。然后向用户发送一条简短的普通助手总结，说明文件名并描述其中内容。不要在聊天中输出完整 HTML 源码。

硬性规则（种子文件已保护其中大部分规则——不要破坏它们）

• 只使用一种强调色，每个屏幕最多出现两次。 默认配额为眉题和主要 CTA。
• 展示字体使用衬线字体（种子文件中为 Iowan Old Style / Charter / Georgia）。正文使用无衬线字体。数字、说明文字和眉题使用等宽字体。
• 使用真实图像，绝不使用远程热链。 .ph-img 是临时布局脚手架，不是默认的最终处理方式。对于有名称的现实事物，请搜索并获取正确的真实图像，将其复制到项目中，并使用相对路径引用；绝不要生成、绘制或虚构替代图像。对于说明性或氛围类主题，优先使用合适的真实摄影图像，仅在无法获取时才使用图像生成。如果无法获取符合要求的素材，请保留有明确标签的 .ph-img，并在交付摘要中说明这一限制。
• 保留真实图像的几何尺寸。 检查每张获取的图像的固有宽度和高度，用 <img class="content-img"> 替换整个 .ph-img 脚手架，并设置相匹配的 width 和 height 属性。绝不要将 .ph-img、.wide、.portrait 或 .square 复制到真实图像上。内容图像必须显示完整画面；只有有意裁剪的装饰性填充才使用 object-fit: cover。种子文件中的 .content-img 规则会限制特别高或特别宽的图像，使其适应视口，同时让另一轴保持自动。
• 移动端重排已通过种子文件中 920px 处的媒体查询实现。 不要添加固定宽度，以免破坏重排。
• 每个 <section> 都必须包含 data-od-id，以便评论模式定位。

输出约定

文件系统运行以项目文件作为事实来源：

index.html

OpenDesign 会从已写入的项目文件生成预览。同一生成轮次中，不要再为同一内容输出源代码 <artifact> 块。

写入文件后附上一段简短摘要。之后不要再输出任何内容。