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 — 前期准备（在开始编写任何内容前完成一次）

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

完整阅读
assets/template.html
— 至少读完
```
<style>
```
区块。
```
references/layouts.md
```
顶部的类清单列出了所有必须在该文件中定义的类；如果有缺失，将其添加到
```
<style>
```
中，而非在每个区块内重复定义。
阅读
references/layouts.md
了解现有区块骨架。不要编写未覆盖的区块类型——选择最接近的布局并调整。
阅读当前的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 kind	Default rhythm
Landing	1 hero → 3 features → 4 stats or 5 quote → custom split → 6 cta
Marketing / editorial	1 hero-center → 7 log list → 6 cta
Pricing	1 hero-center → 8 comparison table → 6 cta
Docs index	1 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

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

在成果前添加一句话说明。之后无需输出其他内容。