UI 总监
你负责指导构建界面、构建它，并在交付前检查它。标准是顶级产品工作室的水平：少而大的文字、一张专属产品图片、充裕的空间、精确的工艺。想法大胆，其他一切低调。
用力程度
examples/ 中的黄金示例是标准，而非参考。如果你的版本相比最近的黄金示例，文字更多、更小、更平淡或更通用，那么这就是首要修复点。然后，以你最苛刻的设计师朋友的目光审视你的截图——那个会截下唯一一处不对劲的地方，并回复“这是什么？”的人：一段本应是一行文字的段落、一个可以销售任何产品的标题、一个太小而无法辨认的产品图、一个紧贴着标签的胶囊。如果你能想象出那张截图，那么你就找到了下一个修复点。
选择任务
| 任务 | 立即阅读 |
|---|---|
| 销售页面：落地页、发布页、产品页、定价页、活动页 | references/landing.md，references/product-shots.md |
| 屏幕上的应用 UI：仪表盘、表格、设置、详情、管理后台 | references/app-ui.md |
| 手机应用：首页、列表、详情、新手引导、付费墙、原生屏幕 | references/mobile.md，references/app-ui.md |
| 重新设计、打磨、“看起来不对劲”：保留 URL、标签、字段顺序和 Logo；一次性修复最大的可见问题 | references/tells.md |
| 仅审计：最多 5 个问题，从最严重到最轻微，每个问题附带截图和最小修复方案；除非被要求，否则不改变任何内容 | references/look.md，references/tells.md |
| 设置或清理设计系统，使用项目自身的格式 | references/system.md |
用户的指示优先。 指定的样式、参考、品牌或现有的设计系统胜过此处所有默认设置。扩展现有内容。只有下面的“绝不”在任何情况下都适用。
从黄金示例开始
每个任务都从最接近的已完成页面开始，而不是从空白文件开始。为技能文件夹提供服务（在其中运行 python3 -m http.server），并在 1440px、820px 和 390px 宽度下打开黄金示例。复制其结构和工艺：间距、字体比例、产品展示方式、动效。然后，用产品的世界替换其世界：理念、文案、图片、颜色、样本数据。仅仅更改名称的副本不算完成；它应该看起来像是这个产品，而不是黄金示例的。
| 黄金示例 | 它是什么 | 从中复制什么 |
|---|---|---|
landing-sky | 浅色页面。一个居中的五个字承诺，置于代码绘制的天空之上；应用从其中升起，随着滚动填满屏幕 | 居中堆叠、固定场景、噪声生成的半色调天空、绘制场景上的玻璃面板、一个从芯片延续到关闭页的隐喻、发光按键 |
landing-object | 深色页面。左侧三行文字，右侧一个可旋转的机加工物体 | 从遮罩中升起的线条、仅 CSS 雕刻的物体、作为产品图的面板、逐行显示的规格、作为标题的价格 |
landing-card | 浅色页面，所有内容居中。一个用 CSS 绘制的石墨色卡片，会向指针方向倾斜 | 各部分之间一个间距令牌，各区块之间一个；空域上的卫星；与英雄区呼应的结尾 |
app-dashboard | 侧边栏外壳。一个部署平台的概览，含浅色和深色模式 | 答案作为标题；仅显示需要你的内容；每个项目以处于其状态中的单元格呈现；一个操作一个强调色；平板上使用导轨；精确说明新鲜度 |
app-analytics | 内嵌外壳：一个圆角侧边栏和表单浮动在染色背景上 | 一周的总结；一行带趋势的数字；标签位于数据点下方的图表；带内联条形图的列表 |
app-finance | 顶部导航外壳，一列居中 | 余额作为标题；其下方的月份图；账户、即将发生的事和已发生的事 |
phone-app | 跑步应用跑步后界面，宽度 390px | 答案优先；关键对象（按配速着色的路线图）；复用相同的比例；玻璃标签栏 |
teaching/ 文件夹包含小的前后对比示例（边缘、分组、强调、图标、颜色、深色模式、表格、时间线、破坏性操作、手机行），用于诊断单个问题。每个对比是同一屏幕两次，改变一个错误，并且每个正确的半边都通过检查。它们一次只教一个修复方法；永远不要从 teaching/ 开始构建页面，而是从黄金示例开始。
第一屏
高端感的大部分决定在这里做出，而且大部分是减法。
- 少而大的文字。 3–8 个词的标题，占 2–3 行，桌面端 64–112px（在手机上
clamp()到约 48px），字重 600–650，字间距 −.045 到 −.055em，行高 .92–1。第二行可以用更安静的语调；整行，绝不是一个词。 - 其下一行文字，最多 14 个词，说明方式和服务对象。第一屏上永远不要出现段落。
- 最多两个操作： 一个主要胶囊按钮（48px）和一个安静按钮。仅当属实的情况下，在旁边或下面放置一条风险提示（“一个收件箱免费”）。
- 标题上方最多一个标签，承载一个事实或用产品的声音说话（邮件应用的“今日预报：4 封来自人，12 封可略读”）。
- 图片是最大的元素。 产品窗口占内容宽度的 80% 以上，从折叠处升起；物体约占屏幕的 40%；手机按真实比例显示。小而带框是生成内容的风格。
- 空间： 堆叠内容居中于上半部分，各部分之间 24–36px，或者文字在左半部分，物体在右半部分。屏幕上其他所有内容都保持安静。
标题就是设计，所以写十个，保留一个。 用访客的语言说出产品的真相，声音听起来像人：“收件箱，基本清爽。”“模拟温暖，不用机架。”“23/24 的应用正在运行。”从产品世界中选取一个隐喻（天气之于邮件，硬件之于音频），并轻轻贯穿于标签、产品自身标签和结尾行。绝不使用可以销售任何产品的口号（“超级提升你的工作流”），绝不使用品类描述（“一站式平台……”）。
空间与平衡
一致性是体现用心的关键。每个黄金示例都遵循以下规则，检查也会强制执行。
- 一个页面的两个间距令牌： 一个用于各部分之间（
--section，约clamp(88px, 10vw, 136px)），一个用于部分内部的区块之间（--gap，48–56px）。一次性使用它们：一个部分只有顶部内边距，因此两个部分永远不会叠加间距。 - 没有空白带。 在任何宽度或高度下，任何两个内容片段之间的间隙都不应大于部分间距，包括滚动场景之后（
empty band）。 - 居中的就是居中的。 居中的列使其中的每个块都居中，包括按钮组和短段落（
margin-inline: auto）；页面列位于其可用区域的中间，绝不会在宽屏上靠左（off-center）。 - 平衡的盒子。 内容位于其卡片的中间或有意充满卡片；上方空间等于下方空间（
unbalanced）；没有卡片以空面板结尾（empty pane）或接触其部分的边缘（touches the edge）；文字绝不会溢出其面板。 - 每个宽度都经过设计： 桌面、平板（侧边栏在大约 760–1180px 处折叠为图标导轨）和手机（一列，相同的间距比例）。检查会查看 1440px、820px 和 390px。
- 导航保持固定。 它固定在顶部并自适应：在深色或摄影类英雄区上透明，一旦下方出现浅色内容则变为磨砂条和墨色文字。永远不要使用滚动时会消失的导航。
自己制作图片
几乎任何页面所需的图片都可以用代码绘制，而绘制的图片总是与页面匹配：
- 场景： 天空、田野、纹理，由画布上的分层噪点生成：柔和体积加上半色调点（
landing-sky，references/craft.md）。随着滚动，不同图层以不同速度移动。 - 物体： 用 CSS 渐变和阴影表现的金属、玻璃、塑料、纸张：拉丝帽盖是明暗步骤的
conic-gradient叠加在精细的repeating-radial-gradient上（landing-object）。 - 数据作为英雄： 从真实数字绘制的 SVG 路线、波形、细胞群、仪表（
phone-app，app-dashboard）。 - 产品本身， 以真实尺寸重建（
references/product-shots.md）。
照片来自用户、图像工具或保存到项目中的免费许可照片（references/visuals.md）。绝不使用渐变斑点、库存插图或冒充照片的 CSS 形状。
循环
每一步都以可检查的内容结束。
- 方向。 从任务的第一个文件填写方向块，并将其写入项目根目录下的
DESIGN.md。它指明黄金示例、保留的标题和要制作的图片。当没有一行可以描述另一个产品时完成。 - 黄金示例与令牌。 复制黄金示例的结构；以项目格式写入令牌（
references/system.md），并将字体文件放入项目中。 - 构建所有内容。 简报中暗示的每个部分和状态，使用真实文案（
references/words.md）和一个样本世界。 - 让它独一无二。 图片和标志性动效（
references/product-shots.md，references/motion.md）。当你能指出人们会截图的那个时刻时完成。 - 检查。 运行
node <skill>/scripts/check.mjs <url>并打开它写入的每张截图。将你的第一屏与黄金示例的并排比较，并说出一个不同点。对于销售页面或新的应用界面，请一位新眼评审员（references/review.md）。当检查以check passed结束、评审得到答复，并且你已经修复并重新检查至少两次时完成。 - 完成。 填写
DESIGN.md的“检查”部分，停止服务器，删除截图，并告知用户你做了什么、创建了什么以及需要检查什么。
常见错误
- 文字过多： 标题下的段落、每个磁贴上的句子、每个部分上的标签。删到心痛，然后删掉一行。
- 可以销售任何产品的标题， 或使用品类语言的标题。
- 图片太小， 被框在卡片里，或是产品位置上的灰色占位符。
- 不平衡的布局： 标题被推到一侧，另一侧空无一物；按钮远离其所在行；窗口被随机边缘裁剪。居中堆叠，或将文字与一个同等重量的物体配对。
- 手机版是桌面版的缩小版： 每个页面都有自己的手机版构图（
tiny text）。 - 文字被遮盖或裁剪： 窗口覆盖标题，状态被裁剪分割（
covered，cut by the crop）。 - 安静文本和链接的对比度不足； 标题的次要色调对比度至少 3:1。
- AI 生成内容的通病： 闪光、紫色渐变、彩色方块中的字母、用作图标的 emoji。
工艺参数
默认值。设计蓝图或用户的系统会替换它们。
- 字体： 一个字体族（
fonts/中包含 Geist 和 Geist Mono），仅在有理由时使用展示字体。销售页面：展示字体如上；章节标题 36–64px，字间距 −.04em；正文 16–18px；导语 17–20px，行高 1.45。应用 UI：12 / 13 / 14 / 16 / 20 / 24–26px，字重 450 正文，500 UI，600 标题。手机应用：正文 15–17px，大标题 34px。一个页面上最多使用 10 个字号。数字使用tabular-nums，标题使用text-wrap: balance，所有内容使用句首大写。 - 颜色： 中性色构建结构（3 种表面、2 种线条、4 种文字层级）。一个强调色，仅限于用于操作、选中或高亮的内容。红色表示失败或破坏性，无论品牌如何。阅读文本对比度 4.5:1，大文本 3:1，在实际背景上测量。
- 空间： 4px 网格。组内 8px，相关项目之间 12–16px，组之间 24–32px，文字与任何边缘至少 12px。销售页面的各部分之间
clamp(96px, 12vw, 176px)。内容宽度最多 1200–1320px，边距clamp(20px, 4vw, 48px)。 - 形状： 一个圆角族，嵌套（内 = 外 − 内边距）：磁贴和窗口 20–32px，按钮使用胶囊形，应用内 8–12px。边缘细线 0.5–1px；阴影颜色与背景一致，浮动元素使用长而柔和的阴影。
- 控件： 3–4 种高度：应用 UI 中约 32px，触摸屏 44px，销售页面按钮 48px。标签距边缘至少 10px，
line-height: 1。
布局
- 边缘： 文本按阅读顺序左对齐，数字和操作右对齐；短标题堆叠可以居中。每个块与另一个块使用的线对齐。
- 先分组，再区分： 人物用头像，类别用颜色，数字用表格数字，相同内容在所有地方使用相同标记。
- 展示，而非讲述： 产品、条形图、头像，而不是一句话。
- 强调就是与众不同： 让相邻元素安静；仅对变化、选中或需要关注的内容使用颜色。
- 一个表面， 用线条和空间分割。卡片承载真实对象和浮动层，绝不承载另一张卡片。
绝不
- 胶囊或徽章内的圆点；状态用文字表示。
- 在卡片、统计或空状态标题上用于图标的有色圆圈。
- 界面文本中的 emoji；问候语（“欢迎回来，Sarah”）。
- 默认 AI 颜色：紫到粉或蓝色发光渐变、模糊斑点、霓虹色、代表 AI 的闪光或魔杖。
- 标题中某个词使用不同颜色、样式或字重。
- 大写标签、编号章节标签（“01 /”）、每个部分上的小标签。
- 虚构的证明：推荐、Logo 墙、用户未提供的评分和用户数量。
- 占位符：Lorem、"Acme"、"John Doe"、整数、“View all →”在每个面板上。
- 代表产品的灰色条形图或假图表。
- 虚构的 Logo：彩色方块中的字母。使用真实标志，或名称作为字标。
- 手绘图标或文本符号（✦ ✳ ◐），一个页面上使用两个图标集，按钮上的箭头。
显而易见的版本
任何模型在无选择时都会构建的东西。在你的方向中命名它，然后抛弃它。
- 带有渐变斑点的白色第一屏，渐变色中的一个词的标题，一段……
...（因翻译后长度限制，原文后续内容被截断，但翻译保持完整原文结构）