Skip to main content Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Copy promptShow prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill prototypeThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
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 phonedark.app-mock 375×812深色系合法主题,涨绿 #0ECB81 / 跌红 #F6465D / 金 #FCD535 对客 Web web-frontdark.web-front 全宽 + .p-nav + .wf-footer深色底 #0B0E11 + 品牌蓝 accent #007FFF 内部后台 Web 忽略 light.layout + sidebarMGT 浅色 #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.mdHTML pipeline 通用规则(生成模式 / 内容质量 / Fill 视觉铁律 E1-E6 / 美学硬底线) references/crypto-app-vocabulary.md真品组件 + 路由表 + Figma anchors(凭印象红线源头) references/baseline-pattern-card.md3 标杆 × 5 场景对照(Step 0 范式确认) references/prototype-source-discipline.md有 / 无 IMAP 双流程纪律(Step 0.3 / Step 2)
按需读 文件 触发条件 assets/prototype-templates.htmlStep 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)