Skip to main content Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill prototypeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか?SkillsMP が現在取得できるファイルをダウンロードできます。
| name | prototype |
| description | 当用户提到「原型」「可交互原型」「prototype」时触发。PRD / IMAP 完成后可转为可交互版本。
|
| type | pipeline |
| output_format | .html |
| output_prefix | proto- |
| pipeline_position | 4 |
| depends_on | ["scene-list"] |
| optional_inputs | ["interaction-map"] |
| consumed_by | ["prd"] |
| owns | ["状态全集","交互细节","CRUD流转","Tab切换"] |
| forbids | ["字段表权威定义","池策略权威定义","埋点权威定义"] |
| scripts | {"check_paradigm.py":"Step 0 范式门 — python3 .claude/skills/prototype/scripts/check_paradigm.py {项目名}","build_proto_skeleton.py":"Step 2 单步生成 — from build_proto_skeleton import generate","audit_against_baseline.py":"Step 3 标杆对照 — python3 .claude/skills/prototype/scripts/audit_against_baseline.py <html> [--baseline <baseline.html>]","pre_proto_phone_shots.py":"Step 2 前 IMAP 硬看 — python3 .claude/skills/prototype/scripts/pre_proto_phone_shots.py <imap.html> -o <out_dir>","check_proto.sh":"Step 3 综合自检(结构 + 文案 + 页面可达性)— bash .claude/skills/prototype/scripts/check_proto.sh <html> [<scene-list.md>]","check_page_fns_shell.py":"page_fns 设备壳越界检测(prototype-shell-gate 调用)— python3 .claude/skills/prototype/scripts/check_page_fns_shell.py <file.py>...","check_proto_split.py":"src/scenes 分场景拆分门(prototype-split-gate 调用)— python3 .claude/skills/prototype/scripts/check_proto_split.py <html>...","brand_assets.py":"品牌 Logo 注入 — from brand_assets import brand_logo_html; project['logo_html'] = brand_logo_html()"} |
可交互原型 Skill(Interactive Prototype)
触发与定位
做什么:根据 scene-list / IMAP 生成可交互 HTML 原型(前台 App 深色 + Web 前台 + 后台 CMS 浅色三档),数据驱动 CRUD + 抽屉 / 弹窗 / Tab 切换齐备。
一端一文件:涉及多端(App / Web 前台 / 后台 任意 ≥ 2)时,每端产一个独立 HTML(-app / -web / -mgt 后缀),由同一个 orchestrator 循环调 generate_single 出多个文件。禁止把多端合并进一个 HTML 用顶栏 view 切换——单端单文件后导航天然全局 scope,page id 不跨端、不撞车。
何时触发:用户说「原型 / 可交互原型 / prototype」;scene-list 或 IMAP 完成后转可交互版本。
不做:PRD 行为规格(归 prd)/ 架构方案(归 architecture-diagrams)/ 静态展示页(用 IMAP 即可)。
承载状态全集:IMAP ann-card 出现 → 原型「{view}-{page}」状态全集 锚点时,该页面必须出 ≥ 锚点列举的所有 state-chip。check_proto.sh 比对 IMAP 锚点 ↔ state-chip 文案,缺失 FAIL。
改脚本前 30 秒
hook 守的是「Read 过本文件」不看读了多少行。改 scripts/*.py / *.sh 用 Read 此文件 limit=80(§1+§2 即够)。改产出物建议全文。
Public API(不可改签名):
from build_proto_skeleton import generate_single — generate_single(project, view, page_fns, crud_js, output_path):单端单文件(新项目多端默认走这个,每端一文件,无顶栏)。web-front 端注意:骨架 .p-nav sticky top:52px(多端 gnav 高度)会压正文,需项目 CSS 覆盖 .web-front > .p-nav{top:0}
from build_proto_skeleton import generate — generate(project, views, page_fns, crud_js, output_path):多 view gnav 合并单文件(仅存量 archive rebuild,新项目勿用)
python3 check_paradigm.py {项目名} — Step 0 范式门
python3 pre_proto_phone_shots.py <imap.html> -o <out_dir> — Step 2 前 IMAP 硬看截图
python3 audit_against_baseline.py <html> --baseline <baseline.html> — Step 3 标杆对照
bash check_proto.sh <html> [<scene-list.md>] — Step 3 综合自检
python3 check_page_fns_shell.py <file.py>... — page_fns 设备壳越界检测(hook 调用)
build_proto_v{N}.py --end X(项目 orchestrator):--end 只决定迭代端,但全量重建所有端 HTML;改单端后需同步重拍全端截图,否则其他端 freshness stale
screenshot_proto.py(项目侧,读 registry.shot_setup + extra_shots)— web 端原型截图走它,禁用通用 screenshot_for_prd.py --proto(含多场景切换的页面会停在默认态)
post-script-syntax-check / post-cjk-punct-check
post-plain-language-check — proto-*.html 文案讲人话(禁裸编号 / 决策号)
ui-annotation-gate — 渲染壳内禁开发注解((此处占位)/注:/TODO 会被开发误读为真实文案);build 后 Bash 路径拦截
post-prototype-source-check — page_fns 不生成设备壳
post-prototype-split-check — proto-*.html 产出时校验 src/scenes 已拆分(找不到即 FAIL)
post-prototype-audit — 产出后自动跑 audit_against_baseline 摘要
pre-skill-load-gate — 改 proto-*.html 必先 Read 本 SKILL.md
pre-deliverable-source-gate — 禁直接 Edit/Write proto HTML,必须走 build
python3 .claude/skills/prototype/scripts/build_proto_skeleton.py
bash .claude/skills/prototype/scripts/check_proto.sh deliverables/proto-*.html
深入读什么:完整 views/page_fns 结构 grep -A 40 "^## API 速查" SKILL.md;自检规则 grep -A 30 "^## 自检清单" SKILL.md;组件 HTML Read references/crypto-app-vocabulary.md + Read assets/prototype-templates.html。
硬规则(FAIL 即拦)
反凭印象三红线
- 凭印象画 = 红线:任何 Crypto APP 元素(feed 卡片 / trader 卡 / 战绩组件 / 订阅 CTA / 抽屉 / 状态栏 / 底部导航)必须先查
references/crypto-app-vocabulary.md 对应词条 + Figma 真品 PNG(assets/figma-anchors/)+ imap references(biz-trading.md / biz-social.md / biz-livestream.md / components-core.md)。三源任一缺失 → 必须先补再画。Figma frame 名不可信,下图肉眼核对再映射场景编号
- IMAP 硬看强制:上游有 IMAP 时,Step 2 前必须用
pre_proto_phone_shots.py 单独截每张 phone(每张独立文件),Read 多模态确认元素细节后再骨架。详见 references/prototype-source-discipline.md § B
- 标杆对照强制:Step 3 必须跑
audit_against_baseline.py 对照范式标杆 HTML,关键组件计数 + Fill 视觉铁律 + 反 AI slop 六禁全过才允许声明完成
数据驱动 CRUD
- 数据驱动:JS 数组存数据 → render 函数渲染列表 → 弹窗按索引读 → 保存 = 写回 + 重渲染 + 关弹窗
- 禁止列表写死 HTML 而弹窗用另一套数据
- 新增弹出空表单 + 默认值;编辑弹出对应数据;两者共用同一弹窗组件
- 增删改全联动,统计实时更新,删除二次确认
设备壳边界
- page_fns 不生成设备壳:禁在 page_fns 函数里生成
.app-mock / .layout / .p-nav / sidebar 等设备壳元素——这些由 build 骨架统一管理。post-prototype-source-check hook 拦截
- build 模式唯一:改 HTML = 改 page_fns 函数体 + 重跑 build,禁 Edit/Write 直改 HTML(hook 阻断)
- 单端单文件 = 导航天然全局:
generate_single 每端只产一个 view,无 gnav 顶栏,goPage / openDrawer 在整份文档全局查找(JS || document fallback),page id 不跨端、不撞 getElementById。无需任何 scope 技巧
- app 端 .p-nav 隐藏:
.p-nav 硬编码在 build_proto_skeleton.py(skill 文件不可改),app 端在 crud.py 补 .app-mock > .p-nav{display:none},由各 scene 自行接管顶导
每页都得点得到
- 每个 page 必须有入口:
view.pages 里声明的页面,必须能从入口页顺着 goPage 点到(顶栏 logo / Tab 栏 / 列表卡片 / 按钮任一)。声明了页面却没入口 = 评审只能改代码才能看到 = 等于没做。多端拆分尤其易漏:某页只在另一端有入口,本端就成孤儿。goPage 目标也必须是本端真实存在的 data-page,指向别端的 page id 点了直接黑屏。build 时 _warn_unreachable 提示,check_proto.sh §页面可达性 FAIL 拦截
src/scenes 分场景拆分(强制)
- 必须拆 src/scenes:每个原型一律拆
projects/{项目}/scripts/src/scenes/{end}_{page}.py 一文件一页面(≤ 300 行),由 build_proto_v{N}.py orchestrator import 收口成 page_fns。禁止把 page_fns 内联在 orchestrator 单文件里(不分简单 / 大产物,无条件)。post-prototype-split-check hook 在 proto-*.html 产出时校验,找不到任何 src/scenes/*.py 即 FAIL。结构见 .claude/runbooks/html-build-split.md §二
文案讲人话
- 正文禁 PM 内部代号:原型 HTML 文案给用户看,禁正文出现决策 N / 场景编号 A-1 / context 内部条目。规则源头
.claude/runbooks/human-voice-rules.md,post-plain-language-check hook 拦截
渲染 UI 内禁注解
- 屏内只放真实文案:原型整份就是 UI,禁在渲染壳(
.app-mock / .web-front / .layout)内写开发注解——(此处占位) / (灰条占位) / (动态加载) / 注: / TODO 这类括注会被开发误读为真实产品文案,造成误会。注解一律删掉。ui-annotation-gate hook 在 build 后拦截
视觉底线(新建 crud.py 必吃)
- 卡片无边框:深色主题卡片靠背景亮度差分层(
#161A1E on #0B0E11),禁写 border:1px solid #23282F——边框是"怕看不出层次"时的补偿,底色分层做好不需要
- 圆角 16px:深色卡片 / 列表行 / 面板统一
border-radius:16px,不用 10px / 11px(网页感);仅内嵌小标签 / badge 用 10px 胶囊
- 封面渐变用饱和蓝调:
linear-gradient(135deg,#1a3a5c,#0d2035),不用灰蓝 #1E2A38→#141A20
- Badge / Chip 全胶囊:LIVE 角标 / 人数 / 分类标签统一
border-radius:10px(不用 3–4px 矩形)
- hover 用 shadow + translateY:
transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.36),不用 border-color 变蓝——border 变色是 2019 年风格
- 浮层 / 策略卡用暗玻璃:
background:#1C2636; border:1px solid rgba(255,255,255,.08)(可加 backdrop-filter:blur(12px)),不用纯白 #fff 盖在深色 UI 上造成突兀感
标注面板(Anno)
- page_fns 支持 anno dict:需要给页面附标注时,page_fns value 返回 dict 替代纯 str:
def page_app_feed():
return {
'page': '<div>...</div>',
'anno': [
{'n': 1, 'p': 'p0', 'title': '直播卡片布局', 'text': '...', 'tx': 187, 'ty': 148},
]
}
骨架自动渲染上/下边缘 Pin + 折线 + Popover,纯 str 返回值向后兼容(骨架静默忽略 anno)。tx/ty 为元素在渲染壳内坐标,上半区出顶边缘、下半区出底边缘;anno 内容禁写场景编号 / 决策号(hook 拦)
- anno 坐标系:
tx/ty 为元素在渲染壳内的像素坐标(phone:375×812;web-front:相对 .web-front 顶左角)。上半区(ty < FH/2)Pin 出顶边缘,下半区出底边缘;同边多 Pin 自动间距排开(≥ 34px),折线只走纵向不横穿内容区
- anno 内容禁止:
ann-text / title 内禁裸场景编号(A-1)/ 决策号(见决策 3)/ 开发注解((此处占位))。规则同正文讲人话(post-plain-language-check);字段表 / 池策略参数 / 埋点事件名同样禁写进 anno(归 PRD)
- anno 坐标标注辅助:不确定
tx/ty 时,在 orchestrator 里临时给 project 加 'anno_debug': True,骨架渲染时在渲染壳上叠加网格 + 坐标提示层(非产品 UI,交付前必须删除 anno_debug 字段)
业务组件复用
- 业务组件:交易卡片 / Feed 列表 / 直播间 / CMS 后台表格 / 表单 必须从
references/prototype-components.md 或对应 imap biz-*.md 复制 HTML 结构,禁自行设计样式
核心输出规范
- 位置:原型是 delta-scoped 产物,不做 living base 版(上线后线上 app 即 UI 真相,活原型是与现实重复的维护黑洞),scoped 到本轮变更场景,随 delta 包落
projects/{产品线}/deliverables/{季度}/{版本}/(版本 = delta 版本),随 delta 整包归 archive/{季度}/。
- 命名:单端项目
proto-{产品线}-{版本}.html;多端项目每端一文件,加端后缀 proto-{产品线}-{版本}-app.html / -web.html / -mgt.html。
- 生成脚本:与产物同目录 delta 包内
scripts/build_proto_{版本}.py;产品线若已建共享场景库(projects/{产品线}/scripts/src/registry.py 存在),脚本落项目根 projects/{产品线}/scripts/,本轮只写选单,产出物仍 delta-scoped。check_proto_split.py 两种落点都认
- 结构:单文件 HTML / CSS / JS 全内联(字体 CDN 除外);CSS / JS 由
build_proto_skeleton.py 通过 open().read() 自动拼接
device + theme 三档设备壳
prototype 覆盖三档(views 字段 device + theme 决定壳):
| 范式 | device | theme | 壳 | 用途 |
|---|
| 对客 App | phone | dark | .app-mock 375×812 | 深色系合法主题,涨绿 #0ECB81 / 跌红 #F6465D / 金 #FCD535 |
| 对客 Web | web-front | dark | .web-front 全宽 + .p-nav + .wf-footer | 深色底 #0B0E11 + 品牌蓝 accent #007FFF |
| 内部后台 Web | 忽略 | light | .layout + sidebar | MGT 浅色 #F5F6FA + 品牌蓝 + 深蓝 sidebar #001529;可叠 .theme-cd 切换到 Claude Design 暖近黑 #1F1F1E + #D97757 |
多端 = 多文件:项目涉及 ≥ 2 端时,每端按上表选壳,各产一个独立文件(generate_single 一端一调用)。同一 orchestrator 循环出 -app / -web / -mgt,不合并。generate(gnav 顶栏合并单文件)仅供 activity-center 等存量 archive rebuild。
字体栈:prototype.css 已补 -apple-system,'SF Pro Text' 作英文 fallback(CJK 仍以 Noto Sans SC 优先),不需要在 crud.py 重覆写。
page_fns vs build 骨架边界
| 提供方 | 内容 |
|---|
| build 骨架 | 完整设备壳(.app-mock / .layout / .p-nav / sidebar)+ 抽屉 / 弹窗容器壳(.p-drawer / .modal-bg)+ ✕ 按钮 + 基础 JS 交互(View 切换 / 页面跳转 / 抽屉 / 弹窗开关)+ <script> 末尾拼入 crud_js 字符串 |
| page_fns | 页面内 UI 元素(卡片 / 列表 / 表单 / 抽屉 / 弹窗内容) |
| key | 内容 | 注意 |
|---|
(view_id, page_id) | 页面内部 UI 元素 | 不包含设备壳 |
(view_id, 'drawer') | 抽屉面板内容 | 不包含抽屉容器壳 |
(view_id, 'modal') | 弹窗内容区 | 不包含弹窗容器壳 |
(view_id, 'footer') | web-front view 自定义 footer | 可选,省略用默认 |
骨架原型的通用截图红利:build 骨架约定的 .gnav-view-section[id](view)× .p-page#page-{id}(page)结构,让 screenshot_for_prd.py --proto <proto.html> 能自动遍历批量截图喂 PRD。generate_single 单端文件保留单个 .gnav-view-section.gnav-active 节点(无顶栏),截图脚本零改动遍历该端所有 page;多端逐文件各跑一次。手写原型无此结构,需 per-project 截图脚本。
品牌 Logo 注入:generate_single phone / web 壳顶导默认渲染 🔥 emoji。需替换为真实品牌 Logo 时,在 orchestrator 里用 brand_assets.py 给 project dict 加 logo_html 字段,骨架自动替换所有顶导位:
from brand_assets import brand_logo_html
project = {'name': 'Demo 直播', 'version': '2.3',
'logo_html': brand_logo_html(size=22)}
brand_assets.py 同时提供 brand_logo_html_mono(size, color) 单色版。Logo SVG path data 从 Figma 官方文件用 fetch_figma.py --format svg 导出(不截图,直接拿 <path d>)。
App 端接管整条顶导(如需头像 + 搜索框 + 操作图标替代默认 p-nav):在 crud CSS 补 .app-mock > .p-nav{display:none},page_fns 自行渲染 .app-nav 替代。
改某页文案 / 场景结构后必须重拍该页全部自定义态截图(如弹窗 TRTC/OBS 两态、直播间直播 / 回放两态):.freshness.json manifest 按整页 .p-page DOM 子树 hash 判定,漏拍同页任一状态都会连带报 stale。同页多态截图在 registry.py 的 Scene.extra_shots 声明(每条 {'suffix': 'replay', 'setup': 'switchXxx(true);'},输出 proto-{end}-{end}-{page}-{suffix}.png),screenshot 脚本通用循环遍历,不在脚本里硬编码 if 块。
美学通用底线(所有范式必吃)
引 .claude/skills/_shared/claude-design/anti-ai-slop.md:
- 反 AI slop 六禁:全屏渐变 / emoji 装饰标题 / accent border / SVG 画人 / 烂大街字体作 CJK / 每卡都带 icon
- 字号比:标题 ≥ 正文 2.5 倍;line-height CJK display 1.25-1.35 / 正文 1.6-1.8
- 颜色克制:≤ 1 主 + 1 辅 + 1 强调 + 灰阶
- 留白 ≥ 40%,间距 8pt 网格
- 字重三级:900 display / 700 标题 / CTA、400 正文(禁全文只 700)
- CSS 变量源头唯一:tokens.css 拼入,禁手抄 :root 整块
Step 3 audit_against_baseline.py grep 验证以上,违规即 fail。
执行步骤
通用规则(强制规则 / 快速模式 / Fill 质量)见 .claude/runbooks/html-pipeline.md。本节为 prototype 补充。
Step 0:范式选择门 + 竞品截图收集(强制)
prototype 触发后禁止直接跑 generate,必须先完成本步。
python3 .claude/skills/prototype/scripts/check_paradigm.py {项目名}
脚本读真相源(lib.truth_source.resolve:baseline)涉及端 + scene-list.md,推断端构成,给出推荐 + 标杆 HTML 路径 + 必读 references 清单。模型必须向用户口头确认范式正确,确认后才进 Step 2。
| 端构成 | 范式 | 产出 | 标杆 |
|---|
| 纯 App + 多场景(≥ 5) | 单 phone + scene chips | 1 文件 | V8 / community v3 |
| 纯 App + 简单流(≤ 3) | 单 phone 无 nav | 1 文件 | 小型项目 |
| 纯 Web 后台 / CMS | 单 view + sidebar | 1 文件 | activity-center mgt-view |
| 多端(App / Web 前台 / 后台 任意 ≥ 2) | 多端拆分 (generate_single) | 每端 1 文件(-app/-web/-mgt) | 各端按 device 壳分别对标 |
脚本推断不出(端类型混合 / 场景数模糊)→ 模型向用户问,禁自行假设。多端时禁合并进单文件用顶栏切换——这是过去返修的根因。
0.2 竞品截图 / Figma 真品收集(Crypto 认知 ground truth):
这个项目对标哪些真品?请给 1-3 个来源:① Figma 真品链接(行业头部 项目优先 — 直接 fetch_figma 入档最高权威) ② 竞品截图(Binance / OKX / Bitget / Gate / 行业头部 实际页面) ③ 已有 IMAP(上游存在则直接用)
- Figma 链接 →
python3 scripts/fetch_figma.py <url> --batch ... --out-dir .claude/skills/prototype/assets/figma-anchors/(持久 anchor,下次复用)
- 竞品截图 → 存
projects/{项目}/inputs/competitors/
- 模型 Read 多模态读每张,写「视觉提炼」存
projects/{项目}/inputs/anchors/visual-extracts.md(配色 / 字号层级 / 关键组件 / 交互模式)。禁污染真相源静态章——artifact-conventions §四「静态章四不」禁 UI 视觉
只有用户明确说「不需要 / 直接做 / 已有 IMAP 看就够」才允许跳过。
0.3 上游分支判定:详见 references/prototype-source-discipline.md § A0。有 IMAP 走硬看流程,无 IMAP 走双 anchor 替代流程。
Step 1:回读 + View 结构确定
并行 Read scene-list.md + 真相源(baseline)+ IMAP(如有)+ references/crypto-app-vocabulary.md + references/baseline-pattern-card.md + references/prototype-source-discipline.md。
向用户确认:涉及几端(App / Web 前台 / 后台)/ 每端设备类型 / 每端包含哪些页面。多端 = 多文件,每端独立确认。
- App 端(iOS / Android)→
device: "phone"
- Web 端(浏览器全宽)→
device: "web-front"(新项目)或省略(legacy)
- CMS 管理台 →
theme: "light"(自带侧边栏布局)
- 不确定就问用户
Step 2:写 orchestrator + src/scenes(强制拆分)
禁止把 page_fns 内联在 orchestrator 单文件里(硬规则 11,不分简单 / 大产物)。固定结构:
projects/{项目}/scripts/
build_proto_v{N}.py # orchestrator(≤ 150 行,只 import scenes/ + 收 page_fns + 循环调 generate_single)
src/
config.py # project / ends(每端一个 view dict + 输出路径)
helpers.py # 跨场景复用 HTML 片段(可选)
scenes/
__init__.py
{end}_{page}.py # 一文件一页面 ≤ 300 行;def page_{end}_{page}(): return '''...'''
orchestrator 范式(多端循环 generate_single,每端一文件):
import sys, os
_ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), '../../../..'))
sys.path.insert(0, os.path.join(_ROOT, '.claude/skills/prototype/scripts'))
sys.path.insert(0, os.path.dirname(__file__))
from build_proto_skeleton import generate_single
from src.config import project, ends
from src.scenes.app_center import page_app_center
from src.scenes.web_create import page_web_create
page_fns = {
('app', 'center'): page_app_center,
('web', 'create'): page_web_create,
}
crud_js = """const items = [...]; function render() {...} ..."""
for end in ends:
view = end["view"]
sub = {k: v for k, v in page_fns.items() if k[0] == view["id"]}
generate_single(project, view, sub, crud_js, end["out"])
单端项目则 ends 只一条。CSS / JS 不进源码树,由 build_proto_skeleton.py 通过 open().read() 自动内联。
节奏(非快速模式):前台复杂页面 1 个一批,后台简单页面 2 个一批,每填完一批往 src/scenes 加文件 + 在 orchestrator 注册 + 跑一次 build 验证;Step 3 自检前每填 1-2 页报告进度。
Step 2 不读模板 — 骨架脚本只需下方 API 速查表,CSS / JS 由 open().read() 自动拼接。Step 2 填充开始前 Read assets/prototype-templates.html,按需读 references/prototype-components.md:
- 前台 App 页面 → 只读
## A. 前台深色组件
- 后台管理页面 → 只读
## B. 管理台浅色组件 + ## D. 数据驱动 CRUD 模式
- 弹窗 / Toast / 底部弹出 → 只读
## C. 通用交互组件
grep -n "^## " .claude/skills/prototype/references/prototype-components.md
sed -n '{起始},{结束}p' .claude/skills/prototype/references/prototype-components.md
Step 3:自检与交付
自检三件套 + Playwright click 全 pass 才视为通过。详见 § 自检清单。
Step 4:版本与归档
- 原型随 delta 包命名 / 归档,版本 = delta 版本,无独立
v{N} 快照阶梯:本轮 delta 上线后整季度 / 版本文件夹(含原型)归 archive/{季度}/。
- 改 page_fns / src/scenes 后重跑 build 覆盖本版原型;历史版本随旧 delta 包已在 archive,git blame + git log 提供变更溯源。
- 无 patch 脚本。
API 速查
generate 签名
generate_single(project: dict, view: dict, page_fns: dict, crud_js: str, output_path: str)
generate(project: dict, views: list, page_fns: dict, crud_js: str, output_path: str)
views 结构
{
"id": "user-view",
"name": "用户端",
"icon": "📱",
"theme": "dark",
"device": "phone",
"nav_name": "产品名",
"pages": [
{"id": "main", "name": "首页"},
{"id": "detail", "name": "详情"},
],
"nav_items": ["买币", "行情", "交易", "合约", "赚币"],
"sidebar_group": "功能管理",
"sidebar": [{"icon": "📋", "name": "列表管理"}],
}
交互函数(build 骨架内置)
| 函数 | 用途 |
|---|
switchGlobalView(idx) | 切换全局 View(仅 gnav 合并存量用;单端文件无顶栏不调用) |
switchTab(el, prefix, tab) | Tab 切换 |
goPage(name) | 页面跳转 |
toggleDropdown(e) | 下拉开关 |
openDrawer() / closeDrawer() | 抽屉开关 |
switchChip(el, prefix, tab) | Chip 筛选 |
switchDevice(webId, appId, btns, idx) | Web/App 切换 |
swPage(el, idx) | 后台侧栏切换 |
crud_js 模板
后台 CRUD 数据驱动 JS:数据数组 + render + openEdit + saveItem + deleteItem + 初始 renderList 调用,整段作为 crud_js 字符串传入 generate,build 时拼到 <script> 末尾。
自检清单(Step 3 执行)
通用条目(编号一致、脚本保存、FILL 残留、术语一致)见 .claude/runbooks/artifact-conventions.md §三 上下文防丢。
强制验证三件套(不可跳过)
bash .claude/skills/prototype/scripts/check_proto.sh projects/{项目}/deliverables/XXX.html
python3 .claude/skills/prototype/scripts/audit_against_baseline.py \
projects/{项目}/deliverables/XXX.html \
--baseline {check_paradigm 输出的标杆 HTML 路径}
Playwright click 强制验证(替换原「浏览器验证」软建议)
单纯 screenshot self-check 不算通过,必须 playwright assertion 验证 DOM 状态:
python3 scripts/with_server.py --server "python3 -m http.server 5173" --port 5173 -- \
python3 -c "
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
page = p.chromium.launch(headless=True).new_page()
page.goto('http://localhost:5173/projects/{项目}/deliverables/XXX.html')
page.wait_for_load_state('networkidle')
# ... 写下方最小 click 集 assertions
"
最小 click 集(含相关组件的场景全跑过,无 console error / 视觉无错位才算通过):
- 每个 scene chip 点击 →
.scr.on 切换正确(page.locator('.scr.on').count() == 1)
- 含订阅 CTA 的场景:click 后文案变「已订阅」+ 宽度不变(保留 flex:1)+ 铃铛出现
- 含铃铛的场景:click → 🔔 ↔ 🔕 toggle + toast 文案对应
- 含 toggle 的场景:click → on/off 状态切换 + 跨场景同 toggle 联动
- 含抽屉 / sheet 的场景:scrim click + ✕ click 都能关
- 含 TAB 的场景:每个 TAB 切换 .on 类正确
screenshot 仅用于:① 视觉 bug 复现 ② 标杆对照 zoom 局部 ③ 最终交付截图。
三件套全过 + Playwright click 全 pass 才视为自检通过 → 才允许声明完成。任一 fail → 必须修,禁止跳过。
References 索引
必读
| 文件 | 触发条件 |
|---|
.claude/runbooks/html-pipeline.md | HTML pipeline 通用规则(生成模式 / 内容质量 / Fill 视觉铁律 E1-E6 / 美学硬底线) |
references/crypto-app-vocabulary.md | 真品组件 + 路由表 + Figma anchors(凭印象红线源头) |
references/baseline-pattern-card.md | 3 标杆 × 5 场景对照(Step 0 范式确认) |
references/prototype-source-discipline.md | 有 / 无 IMAP 双流程纪律(Step 0.3 / Step 2) |
按需读
| 文件 | 触发条件 |
|---|
assets/prototype-templates.html | Step 2 填充开始前 Read |
references/prototype-components.md | 按页面类型读对应 section(## A / B / C / D) |
interaction-map/references/components-core.md | 空态 / Tab 栏 / 列表页 / 表单等通用组件(共享单一信息源,去重后 prototype-components.md A11 / C3 已改路由指引) |
assets/figma-anchors/*.png | 凭印象红线触发时 Read 多模态 |
美学与主题
- 产出前 grep 决策速查:
grep -A 20 "决策速查" .claude/skills/_shared/claude-design/anti-ai-slop.md
- Claude Design opt-in 主题:CSS 中
.theme-cd 作用域已定义(覆盖 Arco 浅色变量为 CD 深色),需切换时手动在 HTML body 加 class="theme-cd"。App 移动端不应用此 theme
注意事项
- 组件不绑定业务——ref 是通用骨架,按具体产品填充内容
- 遇到 ref 没有的场景组件(直播间 / K 线 / 聊天区 / Feed 流等),按 CSS Token 自行构建
- 数据用接近真实的示例,不用 Lorem ipsum
.app-mock 设备框已升级至 iPhone 15 Pro 精细数值(圆角 48px / 状态栏 54px / Dynamic Island 124×36 / Home Indicator 140×5)