用 HTML/CSS/JS/React…

当需要构建或重设计浏览器渲染的视觉前端产物（页面、仪表盘、原型、幻灯片、动画、UI 稿、数据可视化）时，按此流程从事实核查、设计系统声明到 v0 草稿、完整构建与验收逐步推进。

适用场景

解决思路

1. Step 0 事实核查：当请求提到你不确定的具体产品、品牌、技术、SDK 或事件时，先用权威来源核实当前事实，绝不凭记忆断言不稳定事实；触发条件包括：提到你不确定的具体产品/SDK/库、任何时效性发布时间线/版本/规格、你心里出现“我记得是…/应该还是…/可能还没发布”等念头、用户要求为某公司或产品设计物料；搜索无结果或含糊时直接问用户，禁止在未搜索前说“X 应该还没发布/当前版本是 N/X 可能不存在/据我所知 X 的规格是…”。
2. Step 1 理解需求：根据已有信息量决定是否提问，不要机械地每次都抛一长串问题；信息严重不足（如“做个 deck”无 PRD 无受众）时大量提问（受众、时长、调性、变体）；信息充足（如“用这份 PRD 做 10 分钟 Eng All Hands 的 deck”）时直接开工；截图转交互原型仅在交互意图不明时提问；从代码库复刻 UI 时直接读代码不问；需求真正含糊（“做点好看的”“我不知道要什么风格”）时切换到 Design Direction Advisor 模式。
3. Step 2 收集设计上下文，按优先级：1) 用户主动提供的资源（截图/Figma/代码库/UI Kit/设计系统）通读并提取 token；2) 用户产品的现有页面，主动询问能否查看；3) 行业最佳实践，询问以哪些品牌或产品为参考；4) 用户指定锚点（如“Linear 风格”“Aesop 感觉”“MUJI 的安静感”）时只读 references/style-recipes/<anchor>.md 单个配方文件，目录总览与三个索引先读 references/style-recipes/INDEX.md；5) 从零开始时明确告知用户“没有参考会影响最终质量”，并基于行业最佳实践建立临时系统、切换到 Design Direction Advisor 模式，或从 references/style-recipes/ 选一个配方与用户确认。
4. 分析参考材料时重点关注：色彩系统、字体方案、间距系统、圆角策略、阴影层级、动效风格、组件密度、文案调性。
5. 代码优先于截图：用户同时提供代码库和截图时，把精力放在读源码提取设计 token 上，而不是从截图猜测——从代码重建/编辑界面的质量远高于从截图。
6. 涉及具体品牌时执行资产协议：资产 > 规格，品牌识别度由资产驱动而非十六进制色值；Logo（SVG/PNG，尽量含明暗两版）识别度最高，任何品牌任务都必须有，不可妥协；实体产品必须有产品图（主视觉、细节、场景图）；数字产品必须有 UI 截图（最新版本、真实数据已脱敏）；色值 token 为辅助；字体为辅助。
7. 品牌资产硬性规则：不要用 CSS 剪影或手绘 SVG 替代真实产品图（会得到任何品牌都能套用的通用“科技感”，是品牌化工作失败的头号原因）；Logo 不可妥协，实在找不到就停下来问用户，不要用彩色矩形代替；仅有十六进制色值不构成品牌；把所有资产记录到项目中的 brand-spec.md（logo 路径、产品图、UI 截图、色值 token、字体），所有 HTML 必须通过 <img src="…"> 引用而非重绘。
8. 资产获取顺序（保真度从高到低）：官方 press kit / 品牌官网 → 官方发布会视频帧（yt-dlp + ffmpeg）→ App Store / Google Play 截图 → Wikimedia Commons / Apple Press → 基于官方参考的 AI 生成 → 诚实的“资产待补”占位。
9. 在已有 UI 上追加时，先分类为 Extension、Redesign · Preserve 或 Redesign · Overhaul，读 references/redesign-protocol.md，审计现有视觉语汇与受保护契约，再选择满足需求的最小改动模式；Extension 模式下的新元素应与原有一致到无法区分。
10. Step 2b 产出 Design Read 并校准五个刻度：在选 token 前用一段简洁的 YAML 总结 brief，包含 artifact、audience、visual-language（具体风格家族，不要写“现代/简洁”）、mode、visual-variance、motion-intensity、information-density、asset-dependence、brand-fidelity；刻度是决策变量而非装饰性评分，必须实际影响布局变化、动效、每屏信息量、真实资产投入与保留严格度；读 references/design-calibration.md 了解推断区间、预设、冲突与可选的图像优先分支。
11. Step 3a 选系统前先回答四个定位问题：对每个产物（或每张幻灯片/屏幕/场景）明确叙事角色（Hero/过渡/数据/引言/收尾，各自需要不同的视觉语域）、观看距离（10cm 手机/1m 笔记本/10m 投影，决定字号与信息密度）、视觉温度（安静/活力/权威/温暖/肃穆/俏皮）、容量检查（在脑中画缩略图，内容是否放得下还是会溢出/太空）。
12. Step 3 写代码前先声明设计系统：用 Markdown 写出 Design Decisions 块（Design Read 一行总结 + 五刻度、锚点/配方、色板、字体、间距系统、圆角策略、阴影层级、动效风格），让用户确认后再继续；若选了 references/style-recipes/ 中的配方，把其具体色板/字体/间距/圆角/阴影/动效值直接粘进该块；只加载正在使用的那一个配方文件，不要加载整个目录。
13. Checkpoint 1：完成 Step 3a + Step 3 后停下，告诉用户“我计划用这套系统，确认后我开始做 v0”，然后真正等待，不要说完就立刻开始写代码。
14. Step 4 尽早展示 v0 草稿：不要憋大招，在写完整组件前用占位符 + 关键布局 + 已声明的设计系统拼出可查看的 v0；目标是让用户尽早纠偏（调性对不对、布局方向对不对、变体方向对不对）；包含核心结构 + 色彩/字体 token + 关键模块占位（用 [image]、[icon] 等明确标记）+ 你的设计假设列表；不包含内容细节、完整组件库、所有状态、动效。
15. Checkpoint 2：把 v0 推给用户后再继续；v0 的意义就是纠偏，用户没看之前继续构建就失去了意义。
16. Step 5 完整构建：v0 通过后写完整组件、补状态、实现动效，遵循技术规范与设计原则。
17. Checkpoint 3：构建中遇到非平凡决策点（交互方式选择、内容变体、根本性布局调整）时暂停再次确认，不要默默推进。
18. Step 6 验证：始终运行轻量的 Pre-delivery Checklist 做代码/设计自检；仅当用户明确要求验收/QA/浏览器测试/视觉回归/响应式检查/跨视口验证等实操验证时，才运行可执行的浏览器验收流程，读并遵循 references/browser-acceptance.md，交付前报告证据并修复失败项；不要仅凭“构建”“完成”“打磨”“验证你的工作”等词推断用户要验收。
19. Step 7 按需评审或交付前自检：用户问“review 一下”“好不好看”“打个分”或你想在宣布完成前自检时，运行五维评审——理念一致性（每个细节是否都能追溯到所选设计方向，还是漂移成了通用大杂烩）、视觉层级（视线是否按预期流动，眯眼测试是否通过，标题/正文比例 ≥ 2.5×）、工艺质量（像素级对齐、间距系统一致如 8pt 网格、颜色数 ≤ 4、字体家族 ≤ 2）、功能性（每个元素是否配得上它的位置，“删掉它设计会变差吗”，不会就删）、原创性（是否避开陈词滥调又保持连贯，有没有“意外但正确”的决策，还是纯模板）；每项 0–10 分，报告总分、各维度分、Keep、按严重度排序的 Fixes 和三个 Quick Wins；评审设计而非设计师；读 references/critique-guide.md 了解确切格式、权重、问题目录与详细评分标准。
20. Design Direction Advisor 回退模式：当需求真正含糊、无设计上下文且用户无法或不愿提供参考、或用户明确要求推荐风格时触发；当用户已提供 Figma/截图/品牌参考、已说明具体方向、或只是小改动/明确工具调用时跳过。
21. 机制：不要问 10 个通用品味问题，而是提出 3 个来自明显不同流派的设计方向，让对比可见、选择有意义；每个方向必须包含：具名设计师或工作室参考（如“Pentagram 风格的信息架构”，而非只写“极简”）、2–3 行说明为何适合用户语境、标志性视觉线索（3–4 个具体细节：色彩、字体、布局、动效），可选一个著名标杆作品。
22. 流派库（从不同行中选 3 个）：信息架构（Pentagram、Edward Tufte、Massimo Vignelli、Bloomberg Terminal；理性、数据驱动、克制；适合安全/专业/B2B/数据产品）、编辑/极简（原研哉 MUJI、Apple HIG、Dieter Rams、Aesop；留白、精致排版、安静奢华；适合高端/精品/安静）、现代工具/Builder SaaS（Linear、Vercel、Raycast、Notion；发丝级细节、暖色暗色、单一强调色、等宽字体标签；适合开发者工具/B2B SaaS/AI 工具/基础设施）、动效/实验（Field.io、Active Theory、Resn；大胆、生成式、感官化；适合差异化/发布会影片/品牌时刻）、粗野主义/原生（Balenciaga、Are.na、Bloomberg Businessweek 封面；反设计、诚实、未打磨；适合差异化/自信/反主流文化）、温暖人文（Mailchimp 早期、Stripe Press、Headspace；亲和、有机、手作感；适合生活方式/教育/亲和 B2C/健康）。
23. 硬性规则：绝不推荐同一行的 3 个选项——用户分辨不出，让选择有意义的对比就崩塌了。
24. 用户选定后：所选方向成为 Step 2 起的设计上下文，记录到 brand-spec.md（或等价项目笔记）中，供后续决策引用；用户选定流派后，从该流派中挑 2–3 个具名配方（读 references/style-recipes/ 中对应文件，如选了信息架构就读 pentagram.md、bloomberg-terminal.md 等），每个配方文件带来可直接粘进 Step 3 设计系统声明的具体色板、字体、间距与标志性手法。
25. React + Babel（内联 JSX）：使用带 integrity 哈希的固定版本 CDN script 标签（确切标签见 references/advanced-patterns.md）；不要改版本，不要加 type="module"（会破坏 Babel 转译管线）；导入顺序为 React → ReactDOM → Babel → 你的组件文件。
26. 三条不可妥协的硬性规则：1) 绝不用 const styles = { ... }——多个组件文件共享全局 styles 对象会静默互相覆盖，始终加命名空间如 const terminalStyles = { ... }、const headerStyles = { ... }，或直接用内联 style={{...}}，绝不把 styles 用作变量名；2) 分开的 <script type="text/babel"> 块不共享作用域，每个 Babel 脚本独立编译，跨文件共享组件需在每个文件末尾显式挂到 window：Object.assign(window, { Terminal, Line }); 3) 不要用 scrollIntoView——在 iframe 嵌入预览环境中会破坏外层滚动，改用 element.scrollTop = ... 或 window.scrollTo({...})。
27. CSS 最佳实践：布局优先用 CSS Grid + Flexbox；用 CSS 自定义属性管理设计 token；色板优先用品牌色，需要更多颜色时用 oklch() 派生和谐变体，绝不凭空发明新色相；用 text-wrap: pretty 改善断行；用 clamp() 做流体排版；用 @container 查询做组件级响应式；利用 @media (prefers-color-scheme) 和 @media (prefers-reduced-motion)。
28. 文件管理：使用描述性文件名（Landing Page.html、Dashboard Prototype.html）；超过 1000 行的大文件拆成多个小 JSX 文件，在主文件中用 <script> 标签组合；重大修订时复制并重命名加 v2/v3 保留旧版本（My Design.html → My Design v2.html）；多个变体优先用单文件 + Tweaks 开关而非多个文件；引用前先把资产复制到本地，不要直接热链用户提供的资产；品牌化工作的所有真实品牌资产放在 assets/<brand>-brand/ 下，并从 brand-spec.md 引用。
29. 避免 AI 风格陈词滥调（原因很重要）：反陈词滥调不是审美势利，而是保护用户品牌识别度——用户希望品牌被认出，AI 默认输出 = 训练数据平均值 = 所有品牌被平均 = 没有品牌被认出，所以 AI 默认输出把用户身份稀释成“又一个 AI 生成的页面”；因此所有反陈词滥调规则唯一正当的例外是“品牌规范本身就这么用”。
30. 具体陈词滥调与例外：激进紫→粉→蓝渐变（AI 训练数据收敛出的“科技感”公式，每个 SaaS/AI/web3 落地页都有；例外：品牌本身就用，或任务是在讽刺这种审美）；圆角卡片 + 彩色左边框强调（Material/Tailwind 时代遗留，如今是仪表盘里的视觉噪音；例外：用户明确要求或品牌规范保留）；用 emoji 替代图标（训练数据里“不专业就贴个 emoji”的毛病；例外：品牌本身用 emoji 如 Notion、Slack、早期 Linear，或受众是儿童/休闲场景）；SVG 手绘图像（人脸、场景、物体）（AI 画的 SVG 人物五官总是错位、显得廉价；几乎永远不用——改用真实图片、AI 生成图片或诚实占位）；用 CSS 剪影替代真实产品图（通用“科技感”，每个品牌长得一样；品牌化工作永远不用——去拿真实产品图）；Inter / Roboto / Arial / Fraunces / system-ui 作展示字体（太常见，读起来像“演示页”而非“设计过的产品”；例外：品牌规范指定了这些，且通常有定制调整）；#0D1117 上的赛博霓虹（GitHub 暗色 cosplay，开发者工具克隆里的基线噪音；例外：品牌本身活在这种审美里）；编造数据、假 logo 墙、假用户评价（损害可信度，用户会发现数字对不上现实；永远不用——改用写着“需要真实数据”的占位）。
31. 这些只是基线示例而非完整分类；设计多区块营销页、重设计、仪表盘或重动效产物时，只读 references/failure-patterns.md 中匹配的部分；把每个模式当作“默认 → 原因 → 例外 → 检测 → 修复”，而不是无条件的审美禁令。
32. Emoji 规则：默认不用 emoji，仅当目标设计系统/品牌本身使用 emoji 时（如 Notion、早期 Linear、某些消费品牌）才用，并精确匹配其密度与语境；不要用 emoji 替代图标（“没有图标库就拿 🚀 ⚡ ✨ 凑数”），不要用 emoji 做装饰填充（“标题前加个 emoji 让它活泼点”）；没有图标就用占位符（见占位符哲学）表明需要真实图标；品牌本身用 emoji 就跟随品牌。
33. 占位符哲学：缺少图标、图片或组件时，占位符比画得糟糕的假货更专业——缺图标用方块 + 标签（如 [icon]、▢）；缺头像用首字母圆形色块；缺图片用带宽高比信息的占位卡片（如 16:9 image）；缺数据主动向用户要，绝不编造；缺 logo 停下来问用户（见资产协议），品牌化工作中绝不用“彩色盒子里的品牌名”代替 logo；占位符表示“这里需要真实素材”，假货表示“我偷工减料了”。
34. 力求惊艳：用比例与留白创造视觉节奏；大胆的字号对比（h1 与正文 4–6× 很正常）；用色块、纹理、层次与混合模式创造深度；尝试非常规布局、新颖交互隐喻与考究的 hover 状态；用 CSS 动画 + 过渡做精致的微交互（按钮按下、卡片悬停、入场动画）；用 SVG 滤镜、backdrop-filter、mix-blend-mode、mask 等高级 CSS 创造令人难忘的瞬间；CSS、HTML、JS、SVG 的能力远超多数人想象，用它们让用户惊叹。
35. 合适的尺度：1920×1080 演示文稿文字 ≥ 24px（最好更大）；移动端稿触控目标 ≥ 44px；印刷文档 ≥ 12pt；网页正文从 16–18px 起。
36. 内容原则：不要填充内容，每个元素都要配得上它的位置；不要单方面增加区块/页面，觉得需要更多内容先问用户，他们更懂自己的受众；占位符优于编造数据，假数据比承认缺口更损害可信度；少即是多，“每个 yes 背后有一千个 no”，留白就是设计；页面看起来空是布局问题不是内容问题，用构图、留白与字号节奏解决，而不是塞内容。
37. 交互原型输出规范：不要标题页/封面页，原型应在视口中居中或铺满（留合理边距），让用户立刻看到产品；用设备框（iPhone/Android/浏览器窗口）增强真实感；实现关键交互路径让用户能点通；至少 3 个变体，通过 Tweaks 面板切换；完整状态覆盖：default / hover / active / focus / disabled / loading / empty / error。
38. HTML 幻灯片/演示输出规范：固定 1920×1080（16:9）画布，通过 JS transform: scale() 自适应任意视口；居中并加信箱黑边，上一页/下一页按钮放在缩放容器之外（保证小屏可用）；键盘导航：← → 翻页，空格下一页；用 localStorage 持久化当前位置（刷新不丢位置，迭代设计时很常用）；幻灯片编号从 1 开始，用 01 Title、02 Agenda 这类标签，与人说话方式一致（“第 5 张”对应标签 05，绝不用 0 起始标签造成差一错误）；每张幻灯片加 data-screen-label 属性便于引用；不要塞太多文字，视觉主导、文字辅助，每套 deck 最多 1–2 种背景色。
39. 数据可视化仪表盘输出规范：简单图表用 Chart.js，复杂自定义用 D3.js，均通过 CDN 加载；图表容器响应式（ResizeObserver）；提供暗/亮模式切换；关注数据墨水比，去掉不必要的网格线、3D 效果和阴影，让数据说话；颜色编码应承载语义（涨跌/类别/时间），而非装饰。
40. 动画/视频演示输出规范：按复杂度从最简到最重选择方案，不要一上来就用重库——1) CSS 过渡/动画，足以覆盖 80% 的微交互（按钮按下、卡片悬停、淡入入场、状态切换）；2) 简单 React state + setTimeout / requestAnimationFrame，用于简单逐帧或事件驱动动画；3) 自定义 useTime + Easing + interpolate（完整实现见 references），用于时间线驱动的视频/演示场景：进度条、播放/暂停、多段编排；4) 兜底 Popmotion（https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js），仅当前三层确实覆盖不了时使用；除非明确要求，避免 Framer Motion / GSAP / Lottie（包体积、版本冲突、React 18 内联 Babel 破坏）；始终提供播放/暂停 + 进度条，全项目复用同一套缓动函数库，跳过“标题页”开场直接进内容。
41. 静态视觉对比 vs 完整流程：纯视觉对比（按钮颜色、字体、卡片样式）用设计画布并排展示选项；交互、流程、多选项场景则构建完整可点击原型 + 把选项暴露为 Tweaks。
42. 变体探索哲学：提供多个变体是为了穷尽可能性让用户混搭，而不是交付完美选项；至少在这些维度探索“原子变体”，保守安全与大胆新颖混合：1) 布局（内容组织：分栏/卡片网格/列表/时间线）；2) 视觉（色板、字体、纹理、层次）；3) 交互（动效、反馈、导航模式）；4) 创意（打破常规的隐喻、新颖 UX、强视觉概念）；策略：前几个变体安全地待在设计系统内，然后逐步推边界；有意识地变化已校准的刻度，而不是做表面换色；展示从“安全可用”到“大胆野心”的谱系，让用户识别哪些维度有共鸣。
43. Tweaks 面板（实时参数调整）：让用户实时调整设计参数——主题色、字号、暗色模式、间距、组件变体、内容密度、动画开关等；设计准则：右下角浮动面板（参考实现见 references）；标题统一为“Tweaks”；关闭时完全隐藏，确保演示时设计看起来是最终态；多变体场景把变体作为下拉/开关放进 Tweaks，而不是创建多个文件；即使用户没要求，也默认加 1–2 个有创意的 tweak，让用户接触有趣的可能性。
44. 常用 CDN 资源：默认手写 CSS 或使用品牌/设计系统资源，仅在场景明确需要时才加载 CDN，绝不默认全带上——图表（折线/柱状/饼图）用 Chart.js（https://cdn.jsdelivr.net/npm/chart.js）；复杂自定义可视化用 D3 v7（https://d3js.org/d3.v7.min.js）；自定义字体用 Google Fonts（避免 Inter / Roboto / Arial / Fraunces / system-ui 作展示字体）；仅在用户明确要求或一次性原型时使用 Tailwind CDN（与“先声明设计 token”的工作流冲突）和 Lucide Icons CDN（未指定图标库时优先用占位符，而不是为了“看起来完整”硬塞图标）；React + Babel 固定版本 CDN script 标签见 references/advanced-patterns.md，不要改版本。
45. 交付前清单（轻量自检，除非用户在 Step 6 明确要求可执行验收，否则无需启动浏览器）：Step 0 在提到具体产品/品牌时已执行，事实经 WebSearch 核实而非假设；Design Read 存在，五刻度影响了真实决策而非装饰性标签；已有工作的模式分类正确，preserve/extension 契约未被静默更改；品牌任务有 brand-spec.md，logo 真实（非彩色矩形），硬件产品图真实（非 CSS 剪影），数字产品 UI 截图真实；代码检查无明显缺失导入、损坏的本地资产路径、无效标记或未处理的主要交互；目标视口有响应式规则，固定画布产物定义了不变形的缩放策略；交互组件（按钮、链接、输入、卡片等）按需包含 hover / focus / active / disabled / loading 状态，场景需要时补 empty/error 状态；无文字溢出或截断，已应用 text-wrap: pretty；所有颜色来自 Step 3 声明的设计系统，未引入野生色相；未使用 scrollIntoView；React 项目中无 const styles = {...}，跨文件组件通过 Object.assign(window, {...}) 导出；无 AI 陈词滥调（紫粉渐变、emoji 滥用、左边框强调卡片、Inter/Roboto），除非品牌规范明确使用；无填充内容、无编造数据；已检查相关失败模式，重复布局与装饰性 UI 未压过 brief；语义化命名、结构清晰、易于后续修改；视觉质量达到 Dribbble / Behance 展示级；仅在要求可执行验收时：已运行 references/browser-acceptance.md，记录证据，修复或披露发现的失败。
46. 与用户协作：尽早展示进行中的工作，带假设 + 占位符的 v0 比打磨过的 v1 更有价值，用户能更早纠偏；用设计语言解释决策（“我收紧了间距以营造工具感”），而非技术语言；用户反馈含糊时主动请求澄清，不要猜；提供充足变体与创意选项，让用户看到可能性的边界；总结时只提重要注意事项与下一步，不要复述你做了什么，代码本身会说话；遵守检查点，说了“我会等你确认”就真的等，不要说完立刻继续干活。
47. 参考文件路由（按需读取，不要预加载全部）：推断 Design Read + 五刻度、解决刻度冲突、判断图像优先探索是否合理 → references/design-calibration.md；扩展或重设计已有项目、分类 Extension/Preserve/Overhaul、保护路由/IA/分析/表单/无障碍/品牌 → references/redesign-protocol.md；按产物类型检查反复出现的 AI 设计失败模式、应用上下文检测与修复 → references/failure-patterns.md；用户明确要求浏览器验收/QA/响应式验证/视觉回归 → references/browser-acceptance.md；在发明新实现前复用已知可用的组件模式 → references/block-library.md 再定位到 references/advanced-patterns.md 的对应章节；幻灯片引擎、设备框、Tweaks 面板、动画时间线、设计画布、暗色模式、数据可视化、oklch 色彩系统、字体推荐 → references/advanced-patterns.md；需求含糊时推荐 3 个设计方向、扩展哲学库 + 各方向视觉配方 + AI 提示模板 → references/design-directions.md；用户指定锚点（“Linear 风格”“Aesop 感觉”）→ 只加载那一个文件 references/style-recipes/<anchor>.md（如 linear.md、aesop.md）；Direction Advisor 选定流派后浏览配方目录/比较选项 → references/style-recipes/INDEX.md（3 个索引 + 跨领域反模式，再读 1–3 个具体配方文件）；评审模式——详细评分标准、按产物类型的权重、常见问题目录（前 10）→ references/critique-guide.md。

适用边界 · 注意事项

• 不适用于后端 API、CLI 工具、数据处理脚本、纯逻辑开发。
• 不适用于源材料 → 长文 HTML 文章的转换，或旁白节拍 → 可录制网页视频的演示（有专门技能时应路由过去）。
• 不适用于非视觉编码任务。