Back to Details

web-prototype

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Prototype Skill

Web Prototype 技能

Produce a single, self-contained HTML prototype using the bundled seed and layout library — not by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.
使用内置的种子文件和布局库生成独立的HTML原型——不要从零开始编写CSS。种子文件已包含良好的默认配置（排版、间距、强调色规范）。你的工作是对其进行组合。

Resource map

资源地图

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
web-prototype/
├── SKILL.md                ← 你正在阅读的文件
├── assets/
│   └── template.html       ← 种子文件：标记+类系统+框架（请先阅读）
└── references/
    ├── layouts.md          ← 8个可直接粘贴的区块骨架
    └── checklist.md        ← P0/P1/P2 自我检查清单

Workflow

工作流程

Step 0 — Pre-flight (do this once before writing anything)

步骤0 — 前期准备（在开始编写任何内容前完成一次）

  1. Read 
    assets/template.html
    end-to-end     — at minimum through the 
    <style>
    block. The class inventory at the top of 
    references/layouts.md
    lists every class that must be defined there; if one is missing, add it to 
    <style>
    rather than re-defining it inline on every section.
  2. Read 
    references/layouts.md
     so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.
  3. Read the active DESIGN.md (already injected into your system prompt). Map its colors to the six 
    :root
    variables in the seed; don't introduce new tokens.
  1. 完整阅读
    assets/template.html
     — 至少读完
    <style>
    区块。
    references/layouts.md
    顶部的类清单列出了所有必须在该文件中定义的类；如果有缺失，将其添加到
    <style>
    中，而非在每个区块内重复定义。
  2. 阅读
    references/layouts.md
     了解现有区块骨架。不要编写未覆盖的区块类型——选择最接近的布局并调整。
  3. 阅读当前的DESIGN.md（已注入到你的系统提示中）。将其颜色映射到种子文件中的六个
    :root
    变量；不要引入新的标记。

Step 1 — Copy the seed

步骤1 — 复制种子文件

Copy 
assets/template.html
to the project root as 
index.html
. Replace the six 
:root
variables with the active design system's tokens. Replace the page 
<title>
and the topnav brand.
将
assets/template.html
复制到项目根目录并命名为
index.html
。将六个
:root
变量替换为当前设计系统的标记。替换页面
<title>
和顶部导航的品牌名称。

Step 2 — Plan the section list

步骤2 — 规划区块列表

Pick layouts before writing copy. Default rhythms (from 
layouts.md
):
Page kindDefault rhythm
Landing1 hero → 3 features → 4 stats or 5 quote → custom split → 6 cta
Marketing / editorial1 hero-center → 7 log list → 6 cta
Pricing1 hero-center → 8 comparison table → 6 cta
Docs index1 hero-center → 7 log list (sections of docs) → 6 cta
State the chosen list in one sentence to the user before writing — they can redirect cheaply now and not after 200 lines of HTML.
先选择布局再编写文案。 来自
layouts.md
的默认节奏：
页面类型默认节奏
着陆页1个英雄区 → 3个功能区 → 4个数据统计区 或 5个引用区 → 自定义拆分区 → 6个CTA区
营销/编辑页1个居中英雄区 → 7个Logo列表区 → 6个CTA区
定价页1个居中英雄区 → 8个对比表格区 → 6个CTA区
文档索引页1个居中英雄区 → 7个文档区块列表区 → 6个CTA区
在编写前用一句话向用户说明所选的区块列表——这样他们可以提前调整，而不是在编写200行HTML后再修改。

Step 3 — Paste and fill

步骤3 — 粘贴并填充内容

For each chosen layout, copy the 
<section>
block from 
layouts.md
into 
<main id="content">
of your 
index.html
. Replace bracketed 
[REPLACE]
strings with real, specific copy from the user's brief. No filler — if a slot is empty, the section is the wrong choice; pick a different layout.
对于每个选定的布局，将
layouts.md
中的
<section>
区块复制到
index.html
的
<main id="content">
中。将带括号的
[REPLACE]
字符串替换为用户需求中的真实、具体文案。不要使用占位符内容——如果某个插槽为空，说明该区块选择错误；请更换其他布局。

Step 4 — Self-check

步骤4 — 自我检查

Run through 
references/checklist.md
top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.
从头到尾对照
references/checklist.md
进行检查。所有P0项必须通过才能继续。P1项应尽量通过；P2项为加分项。

Step 5 — Emit the artifact

步骤5 — 输出成果

Wrap 
index.html
in 
<artifact>
tags. One sentence before describing what's there. Stop after 
</artifact>
.
将
index.html
包裹在
<artifact>
标签中。在标签前用一句话描述内容。
</artifact>
之后停止输出。

Hard rules (the seed protects most of these — don't fight it)

硬性规则（种子文件已确保大部分规则——请勿违反）

  • Single accent, used at most twice per screen. Eyebrow + primary CTA is the default budget.
  • Display font is serif (Iowan Old Style / Charter / Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.
  • Image placeholders, not external URLs. Use the 
    .ph-img
    class — never link to a stock photo CDN.
  • Mobile reflow already works via the seed's media query at 920px. Don't break it by adding fixed widths.
  • data-od-id
    on every 
    <section>
     so comment mode can target it.
  • 单一强调色，每屏最多使用两次。 默认方案是小标题+主CTA。
  • 标题字体为衬线体（种子文件中为Iowan Old Style / Charter / Georgia）。正文字体为无衬线体。数字、说明文字、小标题使用等宽字体。
  • 使用图片占位符，而非外部URL。 使用
    .ph-img
    类——切勿链接到图库CDN。
  • 移动端自适应已通过种子文件中920px的媒体查询实现。 请勿添加固定宽度破坏自适应效果。
  • 每个
    <section>
    都要添加
    data-od-id
     以便评论模式可以定位到该区块。

Output contract

输出规范

<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact. Nothing after.
<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
<!doctype html>
<html>...</html>
</artifact>
在成果前添加一句话说明。之后无需输出其他内容。