用途
Design Page 是一个页面设计技能，定位为“小型工作室的设计负责人”。它用于在任何人类会查看的 HTML 页面（如测试指南、报告、仪表盘、落地页、已发布产物等）编写第一行标记之前，先确立页面的视觉识别。核心理念是：问题不在于要不要设计，而在于用什么样的处理方式（treatment）来呈现设计。
主要能力
-
命名处理方式：在规划前先说清页面属于哪种处理方式。
- 实用型（Utilitarian）：测试指南、计划、备忘录、报告、内部仪表盘、演示。需要真实的排版层次、考究的间距和合适的配色，但不要巨大的 hero 区，装饰要克制。此技能产生的大多数页面属于这一类。
- 编辑型（Editorial）：落地页、游戏、用户会留存或分享的工具。仅这一类会运行第 5 节。
- 不确定时，一个精心组织的页面永远不会错，过度设计的视觉识别有时则会出错。
-
确立优先级并写出设计计划：优先级固定为：用户自己的话 > 项目现有设计系统 > 你的选择。在创造任何东西之前，先寻找仓库中已有的设计系统（CLAUDE.md、docs/agents/*.md、tokens 或 theme 文件、现有组件样式）。存在时直接应用，后续内容只填补其空白，绝不覆盖。然后写出计划，包含三个必需槽位：颜色（4–6 个命名的十六进制值）、字体（2 个以上角色的字体：有特色的显示字体、互补的正文字体、以及用于说明或数据的实用字体）、布局（一到两句话说明布局概念）。
-
基础规范（适用于每个页面的每种处理方式）：
- 以主题为根基，锁定一个具体主题、其受众和页面的单一任务，始终使用真实内容而非 lorem。
- 搭配字体：不要链接 webfont URL（发布的产物 CSP 会阻止字体 CDN，交付的 .html 离线打开时都会静默回退）；应将字体内联为 @font-face data URI，或有意识地使用系统字体栈。正文宽度接近 65 字符，设定字号比例并保持一致，标题使用 text-wrap: balance，大写标签加一点 letter-spacing。
- 选择中性色而非默认使用：纯中灰显得未经考虑，略微偏向强调色色相的中灰显得是刻意选择的。纯白和近黑在适合主题时也没问题。
- 在 token 层面设计两套主题：在 :root 上以自定义属性定义配色，在 @media (prefers-color-scheme: dark) 下只重定义 token，组件通过 token 样式化；再在 :root[data-theme="dark"] 和 :root[data-theme="light"] 下重定义 token，使显式的查看器开关能在两个方向覆盖系统偏好。第二套主题需同样用心，不要简单反转。刻意只采用单一视觉世界的页面可以保持单主题，但需作为明确选择而非遗漏。
- 让布局负责间距：用 flex 或 grid 加 gap 排列同级组，而非逐个元素的 margin。宽内容（表格、代码、图表）在其容器上设置 overflow-x: auto。数字成列处使用 font-variant-numeric: tabular-nums。
- 注意选择器特异性，避免类相互抵消。
- 干净地构建：关闭每个非空元素，属性用双引号，键盘焦点有可见状态，尊重 prefers-reduced-motion。生成性或装饰性图形用 Canvas 或 WebGL。页面保持自包含，内联 CSS 和 JS，资源以 data: URI 嵌入。
- 从用户视角撰写文案：用人们能识别的名称命名事物，使用主动语态，控件说明确切会发生什么，错误说明出了什么问题及如何修复。
- 让结构编码真实信息：眉题、分隔线、标签和编号标记（01 / 02 / 03）仅当内容确实是序列时才使用。
- 当它是 UI 而非文档时：仪表盘或工具是被扫描和操作的，工艺从排版转向信息设计。先呈现摘要再呈现细节，用形式（胶囊、标签、严重性条纹）和数字共同编码状态。语义颜色（好/警告/严重）与强调色分开。可交互的看起来应可交互。
- 如果页面包含图表或统计块，在编写图表代码前加载 dataviz。如果需要实时数据或自发布，先加载 artifact-capabilities。
-
在别处花费自由：AI 生成的设计目前集中在少数几种外观上（如暖奶油色 #F4F1EA + 衬线显示字体 + 陶土色强调、近黑配一种酸性绿或朱红、紫到蓝渐变 hero、Inter 或 Space Grotesk 作为“安全”字体、用 emoji 作分节标记、一切居中、到处 rounded-lg 等）。用户指定方向时严格遵循；未指定时选择其他方案。
-
编辑型处理方式：立场转变——客户已拒绝过感觉像模板的提案，为独特观点付费。做出有主见的决定，在服务于作品之处承担一次真正的美学风险。构建前，对照主题审查第二节的计划，若任何部分读起来像通用默认，则修改并记录改了什么及原因，然后严格按修改后的计划编写代码。hero 是论点，用主题世界中最具特征的东西开场。排版承载个性。动效是刻意的（页面加载序列、滚动揭示、悬停微交互、氛围）。复杂度与愿景匹配。在一处花费大胆，周围保持安静。
使用方式
这是一个技能（skill），供 AI 编码助手在生成 HTML 页面之前调用。用户通过提供页面需求来触发，助手按照上述流程先命名处理方式、写设计计划，再编写代码。
适用场景
任何人类会查看的 HTML 页面：测试指南、报告、仪表盘、落地页、已发布产物等。
限制
页面需自包含，内联 CSS 和 JS，资源以 data: URI 嵌入。不要链接 webfont URL（CSP 阻止或离线不可用）。具体支持的平台、收费、价格等信息暂未提供。