界面设计
以顶级设计团队的工艺构建产品界面——Linear、Vercel、Stripe、Apple。这些团队与普通输出之间的差距并非天赋，而是每一个决策都经过了深思熟虑，层次清晰无误，同时上百个细节都恰到好处。本技能就是帮助你达到这一境界的指南。
适用范围
适用于： 仪表盘、管理后台、SaaS应用、工具、设置页面、数据界面。
不适用于： 落地页、营销网站、活动、纯品牌工作。此类场景请使用营销/前端设计技能。
本技能自成一体：设计方向、视觉层级、设计系统架构，以及交付生产级UI所需的关键打磨和动效，均包含其中。
问题所在
你可能会输出通用模板。你的训练数据包含了成千上万个仪表盘，模式根深蒂固。即使你遵循整个流程——探索领域、命名签名、陈述意图——仍可能产生模板化的结果：用暖色装饰冰冷的结构，用友好的字体搭配通用的布局。
这是因为意图停留在文字中，但代码生成依赖于模式。两者之间的鸿沟正是默认值取胜的地方。流程虽有帮助，但不能保证工艺。你必须自我觉察，并掌握默认值无法提供的具体手法。
标准： 如果另一个AI在类似提示下会产生大致相同的输出，那么你就失败了。不是为不同而不同——而是因为界面是从这位用户、这个任务、这个世界中涌现出来的。当你从默认值出发设计时，一切看起来都差不多，因为默认值是共享的。
默认值隐藏之处
默认值伪装成基础设施——那些感觉只需要“让它们工作”而不需要设计的部分。
- 排版感觉像容器。 但文字不是支撑你的设计，它就是你的设计。标题的字重、标签的个性、段落的质感，在任何人读到一个词之前，就已经塑造了产品的感受。总用你常选的字体意味着你没有在设计。
- 导航感觉像脚手架。 但导航就是产品本身——你在哪里，能去哪里，什么重要。漂浮在空间中的页面只是组件演示，而非软件。
- 数据感觉像呈现。 但屏幕上的数字不是设计。它对观看者意味着什么？一个进度环和一个堆叠标签都显示“3/10”——一个在讲故事，一个在填充空间。
- 令牌名称感觉像实现细节。 但
--ink和--parchment唤起的是一个世界；--gray-700和--surface-2唤起的则是一个模板。仅凭你的令牌，也应该能猜出这是什么产品。
没有结构性的决策。一切都是设计。当你停止问“为什么是这个？”的那一刻，就是默认值接管你设计的时候。
意图优先
在动代码之前，回答这些问题。除非方向需要用户确认，否则保持为紧凑的工作简报。
- 这是怎样的人？ 不是“用户”。而是真实的人。他们打开这个界面时身处何地？5分钟前他们在做什么，5分钟后又要做什么？清晨端着咖啡的老师，与午夜调试的开发人员、在投资人会议间隙的创始人，是完全不同的。
- 他们必须完成什么？ 动词。批改这些作业。找到故障部署。批准付款。答案决定了什么主导、什么跟随、什么隐藏。
- 这应该是什么感觉？ 用有意义的词语描述。“干净现代”毫无意义——每个AI都这么说。像笔记本一样温暖？像终端一样冷峻？像交易大厅一样密集？像阅读应用一样平静？这决定了色彩、字体、间距、密度——一切。
如果提示过于模糊，无法确定人类、任务和感觉，请提出一个简洁的问题。如果上下文允许做出负责任的假设，则简要陈述并继续。
意图必须是系统性的。 说“温暖”却使用冷色调，就是没有贯彻意图。如果意图是温暖：表面、文本、边框、强调色、语义色、字体——都应是温暖的。如果意图是密集：间距、字号、信息架构——都应是密集的。对照已陈述的意图检查每一个令牌。对于每一个选择——布局、色温、字体、间距比例、层级——你必须能说出“为什么”。“这很常见”或“这样有效”意味着你默认了。
产品领域探索
这是抓住默认值——还是抓不住——的关键。通用路径：任务类型 → 视觉模板 → 主题。有工艺的路径：任务类型 → 产品领域 → 签名 → 结构+表达。区别在于在思考任何视觉之前，花在产品世界中的时间。
在提出任何方向之前，请完成以下四项：
- 领域 —— 此产品世界中的概念、隐喻和词汇。不是功能，而是景象。至少5个。
- 色彩世界 —— 此世界中自然存在哪些颜色？不是“暖”或“冷”——去真实世界看看。如果这个产品是一个物理空间，你会看到什么？列出5种以上。
- 签名 —— 一个（视觉、结构或交互）元素，只能存在于这个产品中。如果你说不出一个，继续探索。
- 默认值 —— 此界面类型中3个明显的选择，视觉和结构上的。你不能避开你没命名的模式。
测试： 去掉产品名称后阅读你的提案。有人能知道它是干什么的吗？如果不能，请深入探索。
能渲染时就渲染
如果会话中存在内联可视化渲染工具（例如可以在对话中内联渲染HTML或SVG的show_widget/visualize工具），请优先展示设计而非描述。被困在文字中的方向，其有用性远不如人们可以直观看到的版本。这是有条件的：当没有此类工具时（CI、headless代理、纯终端），则退回到代码、令牌和书面提案。切勿假设工具存在；请检查，然后使用。
在三个时刻进行渲染：
- 提出方向时。 在建议+提问区块旁边，渲染一个小型实时样本：调色板作为实际色板，使用真实字体的字号比例，表面高度阶梯作为堆叠卡片，签名元素作为真实组件。用户应该看到“像笔记本一样温暖”，而不是读到这些词。
- 设计组件时。 渲染实际组件（或紧致的改进前后对比，两种变体并排），使得工艺决策——间距、边框、层级、状态——可见，而非断言。在重要时渲染真实状态（默认、悬停、空状态、错误）。
- 批评或审核时。 同时渲染当前版本和改进版本，以便差距展示出来，而非叙述出来。
渲染时的规则：
- 小工具只展示视觉。所有推理、领域探索、被拒绝的默认值列表和建议都保留在你的回复文本中——切勿将文字粘贴到小工具中。
- 匹配渲染工具自身的设计系统契约（如果有，请加载其
read_me/指南）。使用其主题变量，以便样本继承亮色/暗色模式，并在宿主中原生呈现。不要与宿主浏览器样式冲突。 - 样本仍需通过下面的检查。渲染出的默认值仍然是默认值——渲染是让工艺被看见的方式，而非替代品。
- 这是渲染到对话中，而非项目中。实际实现仍然通过正常编辑落到代码库中。
关键在于：将“这是我的思考”和“这是它的样子”缩短为一条用户可以直接反应的消息。
视觉层次与构图
“看起来像设计过”与“看起来像生成的”之间最大的区别。默认值产生扁平——一切大小、字重和间距都一样，导致没有主导元素，眼睛无处可去。工艺产生层次——眼睛立刻知道什么重要。这些是具体的手法，不是感觉。
每个视图一个焦点
每个屏幕都有一件用户过来要做的主要事情。这件事通过大小、对比度、位置或周围的空间占据主导。当一切平等竞争时，没有胜者，界面看起来像停车场。在构建之前，大声说出焦点元素。然后让它胜出：更大、更高对比度，或周围环绕空白。有意地降级其他一切。
比例是尺度的，字重胜过字号
不要凭感觉选择字号。选择一个比例并逐步应用：~1.2（小三度）用于密集/平静的UI，~1.25用于大多数产品UI，~1.333用于表现力强的。从14-16px正文开始，产生一个明显可区分的比例，而不是15/16/17的模糊。14px基准1.25：说明 11 · 正文 14 · h4 16 · h3 18 · h2 22 · h1 28 · 展示 44+。四舍五入为整数像素并符合你的间距网格。
Apple/Linear的策略：字重和颜色在建立层级方面比字号做得更多。 一个单一的14px大小通过字重和透明度组合就能容纳三个层级——值: 600 / 主要，标签: 500 / 次要，元数据: 400 / 静默——这比两个相距两点的一般字重区分得更干净。同时使用三个杠杆（大小、字重、颜色/透明度），绝不能单独依赖大小。如果你眯起眼睛无法区分标题、正文和标签，那么层次太弱了。
实例——一个指标，扁平 vs 有决定。扁平： Revenue / $48,200 都是14px常规灰色，三个相同的盒子，没有焦点。有决定： REVENUE 11px/500/静默/字间距 · $48,200 28px/600/主要/连体数字（主角） · ↑12% 12px/500/成功。同样的数据，截然不同的可读性——数字通过大小+字重+一个强调色占据主导，标签被降级，次要指标降到更低层级。
密度是一个决策，用px表达
Linear紧凑；Stripe空旷。两者都不是默认值——两者都是选择，并且该选择在所有地方都是同一个数字。提前决定密度并命名数值：一个12-16px填充的工具面板感觉像工作台般紧凑；同样的卡片24px感觉像宣传册。同一个数字在一个上下文中可能合适，在另一个中可能显得懒散。有目的地选择，然后坚持。
空间节奏——不均匀地呼吸
优秀的界面不会均匀地间隔所有东西。密集的控制区域让位于开阔的内容；重元素平衡轻元素；眼睛有目的地移动。单调的布局——到处是相同的卡片大小、相同的间距、相同的密度——是没有人做决策的声音。有目的地变化节奏：紧密相关的东西放在一起，然后在组之间放置真正的空气。
比例传达信息
一个280px的侧边栏配合全宽内容，传达“导航服务于内容”。一个360px的侧边栏则传达“它们是平等的”。具体的数字声明了什么重要。如果你无法阐明一个比例在说什么，那它就什么都没说。选择表达关系的宽度和比例。
分布与克制（“昂贵”的外观）
- ~60/30/10：占主导的中性表面，次要色调，以及~10%的强调色。色彩是稀缺资源——屏幕的大部分是结构。
- 一种强调色，有意使用，胜过五种无意义用法的颜色。灰色构建结构；色彩传达（状态、操作、身份）。无动机的色彩是噪音。
- 通过空间和字重，而非线条，构建层级。 在边框和分隔线之前使用空白和色调偏移。最优质的界面大多是看不见的结构。
- 大号字体的光学调整：随着字号增大收紧字间距（标题略微负字距）；在正文上放宽行高以提高可读性（~1.5）。紧凑的文字读起来有工艺感；32px标题的默认字距读起来像文档。
工艺基础
微妙的层次叠加（脊柱）
无论方向如何，这适用于一切。你应该几乎注意不到系统的运作——当你看到Vercel的仪表盘时，你不会想“漂亮的边框”，你只是理解结构。看不见的工艺是有效的工艺。
表面高度。 表面叠加：下拉菜单位于卡片之上，卡片位于页面之上。构建一个编号系统——基础层，然后逐渐增加层次。每次跳跃只是几个百分点的亮度变化——例如深色模式的基础层 → +7% → +9% → +12%；浅色模式保持明亮并添加阴影。单独看一步，你几乎看不到，但叠加起来，层次涌现。你感受到而非看见的耳语般的微妙变化。
- 侧边栏： 与画布背景相同，而不是不同颜色。不同颜色会将空间分割为“侧边栏世界”和“内容世界”。一个微妙的边框就足够了。
- 下拉菜单/浮窗： 比其父表面高一层，否则它们会融合在一起，失去层次感。
- 输入框： 比周围环境稍暗，而不是更亮。输入框是内嵌的——它们接收内容。较暗的填充信号“在此输入”，无需厚重的边框。
边框。 当你不需要它们时应该消失，但在你需要结构时又能找到。低不透明度的rgba与背景融合并定义边缘，但不抢眼；纯十六进制边框相比之下显得生硬。深色模式在rgba(255,255,255,0.06–0.12)左右，浅色模式稍高。构建一个递进——标准、较柔和的分隔、强调、焦点环——并将强度与边界的重要性匹配。
眯眼测试： 眯起眼睛看界面。你应该仍能感知层次——什么在什么之上，哪里分隔——但没有任何东西跳出。没有生硬的线条，没有刺眼的转变。只有安静的结构。如果这一点错了，其他都无关紧要。
无限表达
每种模式都有无限表达——没有两个界面应该看起来一样。 一个指标展示可以是主角数字、内联统计、迷你图、仪表盘、进度条、比较增量或趋势徽章。每次都是相同的侧边栏宽度、相同的卡片网格、相同的图标左-数字大-标签小的指标框，立即暴露AI生成的痕迹，且令人遗忘。Linear的卡片看起来不像Notion的；Vercel的指标不像Stripe的。相同的概念，无限表达。在构建之前，问：用户在这里做的唯一一件事是什么，哪个产品类似的问题解决得非常出色？
色彩存在于某处
每个产品都存在