Web Prototype Skill 用于生成单个、自包含的 HTML 原型，做法是使用随附的种子文件与布局库进行组合，而不是从零编写 CSS。种子文件已编码了良好的默认值（排版、间距、强调色预算），使用者的任务是把它组合起来。
资源结构
web-prototype/ ├── SKILL.md（本说明） ├── assets/ │ └── template.html（种子：设计令牌 + 类系统 + 页面外壳，需优先阅读） └── references/ ├── layouts.md（8 个可直接粘贴的区块骨架） └── checklist.md（P0/P1/P2 自检清单）
工作流程
第 0 步——预检（写任何内容之前先做一次） 完整通读 assets/template.html，至少读完 <style> 块。references/layouts.md 顶部的类清单列出了必须在其中定义的每个类；若有缺失，应把它加入 <style>，而不是在每个区块上内联重复定义。 阅读 references/layouts.md，了解存在哪些区块骨架。不要编写未被覆盖的区块类型，应选择最接近的布局并加以适配。 阅读已注入系统提示的当前 DESIGN.md，把其颜色映射到种子中的六个 :root 变量，不要引入新的令牌。
第 1 步——从种子准备 index.html 以 assets/template.html 作为规范项目文件（通常为 index.html）的种子。 用当前设计系统的令牌替换六个 :root 变量，并替换页面 <title> 与顶部导航品牌名。
第 2 步——规划区块列表 先选布局，再写文案。layouts.md 中的默认节奏： 落地页：1 hero → 3 features → 4 stats 或 5 quote → 自定义分栏 → 6 cta 营销/编辑类：1 hero-center → 7 log list → 6 cta 定价页：1 hero-center → 8 comparison table → 6 cta 文档索引：1 hero-center → 7 log list（文档各章节）→ 6 cta 在写之前用一句话向用户说明所选列表，此时用户可低成本调整，而不必等到写完 200 行 HTML 之后。
第 3 步——粘贴并填充 对每个选定的布局，从 layouts.md 复制 <section> 块到项目 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> 块。写入文件后只给一条简短总结，之后不再输出其他内容。