界面设计
以顶级设计团队（Linear、Vercel、Stripe、Apple）的工艺水准构建产品界面。它们与通用输出之间的差异并非天赋，而是每一个决策都经过了深思熟虑，层次结构明确无误，同时有成百上千个细节恰到好处。本技能正是实现这一目标的方法。
适用范围
适用于： 仪表盘、管理面板、SaaS应用、工具、设置页面、数据界面。
不适用于： 着陆页、营销网站、活动页面、纯品牌类工作。此类需求请使用营销/前端设计技能。
本技能完全自包含：方向、视觉层次、设计系统架构、以及交付生产级UI所需的打磨和动效核心内容，皆汇于此。
问题所在
你将会产出通用的输出。你的训练数据中见过成千上万个仪表盘，模式非常强烈。你可以遵循整个流程——探索领域、命名签名、阐明意图——但仍然可能产出一个模板：暖色调覆盖在冰冷的结构上，友好字体承载在通用布局上。
这是因为意图存在于文字中，但代码生成却依赖于模式。两者之间的差距正是默认值获胜的地方。流程有帮助，但无法保证工艺。你必须审视自己，并且必须了解那些默认值不会采用的具体动作。
标准： 如果另一个AI在类似的提示下，会产生基本相同的输出，那么你就失败了。不是为了不同而不同——而是因为界面是从这个用户、这个任务、这个世界中涌现出来的。当你基于默认值进行设计时，一切看起来都一样，因为默认值是共享的。
默认值的藏身之处
默认值伪装成基础设施——那些感觉只需要“正常工作”、不需要被设计的部分。
- 排版感觉像容器。 但字体并非承载你的设计，它就是你的设计。标题的粗细、标签的个性、段落的质感，在任何人阅读文字之前就已经塑造了产品的感觉。使用你惯用的字体意味着你没有在设计。
- 导航感觉像脚手架。 但导航就是产品本身——你身在何处，你可以去哪里，什么更重要。一个在空间中漂浮的页面只是组件演示，而不是软件。
- 数据感觉像呈现。 但屏幕上的数字不是设计。它对观看的人意味着什么？一个进度环和一个堆叠标签都展示了“10个中的3个”——一个讲述了故事，一个填充了空间。
- Token名称感觉像实现细节。 但
--ink和--parchment唤起了一个世界；而--gray-700和--surface-2则唤起了一个模板。仅阅读你的token的人应该能猜出这是什么产品。
这里没有结构性决策。一切都是设计。当你停止问“为什么是这个？”的那一刻，就是默认值接管的那一刻。
意图优先
在接触代码之前，回答这些问题。除非方向需要用户确认，否则保持为简洁的工作简报。
- 这个用户是谁？ 不是“用户”。而是实际的人。他们在哪里打开这个界面？5分钟前他们在做什么，5分钟后他们又要做什么？早上7点端着咖啡的老师，与午夜调试Bug的开发者不同，也与在投资人会议间隙的创始人不同。
- 他们必须完成什么？ 动词。批改这些提交。找到故障部署。批准付款。答案决定了什么在前，什么跟随，什么隐藏。
- 它应该感觉如何？ 用有意义的词语形容。“干净现代”毫无意义——每个AI都这么说。像笔记本一样温暖？像终端一样冷酷？像交易大厅一样密集？像阅读应用一样平静？这塑造了颜色、字体、间距、密度——一切。
如果提示过于模糊，无法确定用户、任务和感觉，则提出一个简洁的问题。如果上下文允许负责任的假设，则简要说明并继续执行。
意图必须是系统性的。 说“温暖”却使用冷色，这并非贯彻到底。如果意图是温暖：表面、文本、边框、强调色、语义色、字体——所有都应该温暖。如果意图是密集：间距、字号、信息架构——所有都应该密集。对照所声明的意图检查每一个token。对于每一个选择——布局、色温、字体、间距比例、层次——你必须能够说出原因。“这很常见”或“这有效”意味着你使用了默认值。
产品领域探索
这是默认值被抓住——或未被抓住的地方。通用路径：任务类型 → 视觉模板 → 主题。工艺路径：任务类型 → 产品领域 → 签名 → 结构 + 表达。区别在于在进行任何视觉思考之前，花在产品领域的时间。
在提出任何方向之前，请产出以下全部四项：
- 领域 —— 来自该产品世界的概念、隐喻、词汇。不是功能——而是领地。至少5个。
- 颜色世界 —— 自然存在于该产品领域的颜色是什么？不是“暖色”或“冷色”——要深入到实际世界。如果这个产品是一个物理空间，你会看到什么？列出5个以上。
- 签名 —— 一个只有这个产品才能拥有的元素（视觉、结构或交互）。如果你无法命名一个，请继续探索。
- 默认值 —— 针对此界面类型的3个显而易见的选择，包括视觉和结构两个方面。你无法避开那些你尚未命名的模式。
测试： 阅读你的提案，并去掉产品名称。有人能认出它是干什么的吗？如果不能，请更深入地探索。
尽可能渲染
如果会话中提供了内联视觉渲染工具（例如，可以在对话中内联渲染HTML或SVG的 show_widget / visualize 工具），则优先展示设计而非描述它。一个困在文字中的方向，其有用性远不及一个用户可以亲眼看到的。这是有条件的：当没有此类工具时（如CI、无头代理、纯终端），则退回到代码、token和书面提案。永远不要假定工具存在；先检查，再使用。
在三个时刻进行渲染：
- 提出方向时。 在“建议+询问”块旁边，渲染一个小的实时样本：作为实际色板的调色板、使用真实字体的字号比例、作为堆叠卡片的表面层级步骤、作为真实组件的签名元素。用户应该看到“像笔记本一样温暖”，而不是读到这些文字。
- 设计组件时。 渲染实际的组件（或紧凑的前后对比，两个变体并排放置），使得工艺决策——间距、边框、层次、状态——可见，而非断言。在需要时渲染真实状态（默认、悬停、空状态、错误）。
- 批评或审计时。 将当前版本和改进版本一起渲染，以便展示差距，而非叙述。
渲染时的规则：
- 组件仅显示视觉部分。所有推理、领域探索、被拒绝的默认值列表以及建议都应保留在您的回复文本中——切勿将文字粘贴到组件中。
- 匹配渲染工具自身的设计系统约定（如果有
read_me/指导，则加载它）。使用其主题变量，使样本继承亮/暗模式，并在宿主环境中呈现原生感。不要与宿主框架冲突。 - 样本仍需通过以下检查。渲染出的默认值仍然是默认值——渲染是让工艺被看见的方式，而非替代品。
- 这是渲染到对话中，而非项目中。实际的实现仍需要通过正常的编辑操作落地到代码库中。
要点：将“这是我的思考”和“这是它看起来的样子”之间的循环压缩到一条用户可以立即回应的消息中。
视觉层次与构成
这是区分“看起来像设计”与“看起来像生成”的最大因素。默认值会产生扁平感——所有元素大小、粗细、间距都相同，导致没有元素引导视线，眼睛无处可去。工艺产生层次——眼睛能瞬间知道什么更重要。这些是具体的举措，而非感觉。
每视图一个焦点
每个屏幕都有用户前来要做的一件事。那件事占据主导——通过尺寸、对比度、位置或周围的空白。当所有元素平等竞争时，没有赢家，界面读起来像一个停车场。在构建之前，大声说出焦点元素。然后让它胜出：更大、更高对比度，或被空白环绕。有意识地降低其他所有要素的层级。
字号比例是一个比率，粗细优于尺寸
不要凭感觉选择字号。选择一个比例并逐步应用：~1.2（小三度）用于密集/平静的UI，~1.25用于大多数产品UI，~1.333用于表达性。从14–16px正文开始，产生一个明显不同的比例，而不是15/16/17这样模糊的数值。以14px基础按1.25比例：caption 11 · body 14 · h4 16 · h3 18 · h2 22 · h1 28 · display 44+。四舍五入到整数像素并匹配你的间距网格。
Apple/Linear的做法：粗细和颜色在层次构建中比尺寸承担了更多工作。 单个14px尺寸通过粗细+透明度即可容纳三个层级——value: 600 / primary，label: 500 / secondary，meta: 400 / muted——其区分度远超两个相隔两个点数的常规粗细。同时使用三个杠杆（尺寸、粗细、颜色/透明度）进行构建，切勿仅依赖尺寸。如果你眯着眼无法区分标题、正文和标签，说明层次太弱。
举例——一个指标，扁平vs有决策。扁平版本： Revenue / $48,200 都是14px常规灰色，三个相同的框，没有焦点。有决策版本： REVENUE 11px/500/muted/字间距 · $48,200 28px/600/primary/tabular-nums（主打） · ↑12% 12px/500/成功色。相同的数据，截然不同的可读性——数字通过尺寸+粗细+一个强调色引领视觉，标签被降级，次要指标降至更低层级。
密度是一个决策，以像素表达
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的。相同的概念，无限的表达。在构建之前，问：用户在这里做的唯一一件事是什么？哪个产品在类似问题上做得极好？
颜色有其位
每个产品都存在于一个
…
[因翻译需要，内容已截断]