frontend-design-principles

前端设计原则

以精湛工艺和明确意图构建前端界面。

范围与路由

阅读此文件后，加载符合具体场景的指南：

• app.md — 仪表板、管理和设置面板、内部工具、SaaS 产品、数据密集型界面（表格、表单、列表），以及用户会反复使用的任何界面。
• marketing.md — 落地页、营销网站、公告、创意作品，以及最重视第一印象的任何内容。

如果不确定，请提问。混合型项目需要同时参考两者：SaaS 营销网站使用 marketing.md；其产品仪表板使用 app.md。

此流程的意义

你默认会生成千篇一律的内容——仪表板和落地页的训练模式很强。下面的流程会有所帮助，但光有流程并不等于精湛工艺：你必须及时察觉自己的惯性。

默认选择藏身之处

默认选择会伪装成基础设施——那些看起来只要能用就行、不必设计的部分。没有什么结构性决策是不存在的。一切都是设计。

• 排版不是容器——它就是设计本身。 面包店工具和交易终端都想要“清晰易读的字体”，但温暖而手工的感觉并不等于冷峻而精确。若直接选用你惯用的字体，就说明你没有在做设计。
• 导航不是围绕产品的东西——它就是产品本身。 你身在何处、可以去哪里、什么最重要。漂浮在虚空中的页面只是组件演示，不是软件。
• 数据不是呈现——而是意义。 进度环和堆叠标签都显示“10 项中的 3 项”；一个在讲述故事，一个只是在填充空间。想想这个数字对查看它的人意味着什么。
• 令牌名称是设计决策，不是实现细节。 即使只阅读你的 CSS 变量，也应该能猜出这是什么产品：

/* ❌ generic — could be any project */
--gray-700: …;  --surface-2: …;
/* ✅ domain — evokes this product's world */
--ink: …;  --parchment: …;

必须完成：开始生成前

完成以下事项前，不要编写代码。

1. 回答意图问题

具体作答，或者询问用户——不要猜测，也不要沿用默认选择：

• 这个人是谁？ 不是泛泛的“用户”，而是真实的人——他们身处何地、心里在想什么、5 分钟前做了什么、5 分钟后又会做什么？
• 他们必须完成什么？ 用动词描述：给这些提交评分、找出故障部署、批准付款。
• 这种体验应该给人什么感觉？ 用有实际含义的词语描述。不要说“简洁现代”（每个 AI 都会这么说）——是像笔记本一样温暖？像终端一样冷峻？还是像交易大厅一样密集？

2. 提交四项必需内容

• 领域： 来自该产品世界的概念、隐喻和词汇——关注领域，而非功能。至少 5 项。
• 色彩世界： 该领域中自然存在的颜色。回到真实世界去寻找，不要只说“暖色／冷色”。列出至少 5 种。
• 标志性元素： 一个只有这个产品才会有的视觉、结构或交互元素。
• 要摒弃的默认选择： 列出这种界面类型中 3 个显而易见的选择，涵盖视觉和结构。没有点明的模式，就无法避免。

3. 提出设计方向并确认

结合领域概念、颜色、标志性元素，以及用什么替代每个被摒弃的默认选择。

Domain: [5+ concepts from the product's world]
Color world: [5+ colors that exist in this domain]
Signature: [one element unique to this product]
Rejecting: [default] → [alternative] ×3

Direction: [approach connecting the above]

Does that direction feel right?

测试： 从方案中移除产品名称——别人还能认出它是做什么的吗？如果不能，就继续深入探索。获得确认后再生成代码。

必须完成：展示前

你的第一个输出很可能千篇一律；关键在于你要在用户察觉之前发现并修正。检查你做出的内容，并问自己：“如果他们说这缺乏精湛工艺，他们指的会是什么？”——先修正这一点。运行以下测试；如有未通过项，就继续迭代：

• 替换测试： 将你的字体／布局替换为惯用的那种——有人会注意到吗？替换后毫无差别的地方，就是你沿用了默认选择的地方。
• 眯眼测试： 眯起眼睛看。层级仍然清晰可辨吗？有没有什么元素突兀地跳出来？精湛工艺应含蓄克制。
• 标志性元素测试： 指出具体组件中标志性元素出现的位置。“整体感觉”不算。
• 令牌测试： 把 CSS 变量读出来。它们属于这个产品的世界，还是放在任何项目里都行？

原则

• 每个选择都必须是有意识的选择。 对于每项决策——布局、色温、字体、间距比例、层级——你都能说明原因。“常见／简洁／能用”只是默认选项，不是选择。
• 千篇一律就是失败。 如果另一个 AI 收到类似提示词，也会产出大同小异的结果，那你就失败了。从意图出发进行设计，就不可能千篇一律——没有两个意图是完全相同的。Linear 的卡片不像 Notion 的；Vercel 的指标也不像 Stripe 的。
• 意图必须贯穿整个系统。 说要“温暖”，结果却用了冷色，这就没有贯彻到底。如果要营造温暖感，那么表面、文本、边框、强调色、语义色和字体都应如此。逐一检查每个设计令牌是否符合既定意图。
• 表达方式没有穷尽。 指标可以用醒目的大数字、迷你折线图、仪表盘、变化量、趋势徽标，或其他新方式呈现。别总是交付相同的侧边栏宽度 + 卡片网格 + 左侧图标和大号数字——这种设计一眼就像 AI 生成的。

工艺基础

无论采用何种设计方向，质量都必须达到以下标准：

• 细腻的层次。 表面之间只有细微但可辨的差异——层次变化轻柔克制，而非剧烈跳跃（可参考 Vercel、Supabase 和 Linear）。边框应淡到几乎看不见，只有在需要辨别结构时才注意到；如果边框最先映入眼帘，那就太重了。
• 色彩要有来处。 在选取调色板之前，先花时间了解产品所处的真实世界——材质、光线、物件。设计应让人觉得色彩源自某处，而不是后加上去的。灰色构建结构；色彩承载含义。一个用心选择的强调色，胜过五个随意使用的颜色。

通用反模式

无论何种情境，以下做法都不妥：

• 夸张的投影——box-shadow: 0 25px 50px … 看起来很廉价
• 随意设置不对称内边距——每个数值都应经过有意设计
• 粗重的装饰性边框——用于突出视觉重量的边框达到 2px 或以上
• 使用多种强调色——只用一种强调色，并保持一致
• 混用深度表现手法——用边框或阴影，不要随意两者并用
• 间距不一致——这是缺乏系统设计最明显的信号

沟通

保持隐身。不要宣布模式，也不要描述过程（“让我先了解一下这个领域……”“正在运行检查……”）。直接开始工作；提出建议时说明理由。

深入阅读

• references/principles.md — 间距、深度、字体、颜色实现、深色模式（具体数值和 CSS）
• app.md — 仪表板、管理面板、SaaS 产品
• marketing.md — 着陆页、营销网站、创意作品