设计七真理：设计哲学纲领

这是"设计参考卡库"的入口。不用懂代码，也不用会画画。记住下面 7 条真理，再加上"先结构、后好看"这条工作顺序，就能指挥 Agent 把页面做对、做好看，也能看出它哪里还不对。其他每张卡，是把这 7 条里的某一条讲深。

1. 设计七真理（The 7 Truths）

这 7 条是每个设计决定的地基，不是知道就好的小贴士。动手前先把它们装进脑子。下面每条都配了能直接看到的真实示例，照着对比就行。

真理 1 · 层级就是一切（Hierarchy Is Everything）

如果用户 2 秒内看不出"这页最重要的是什么"，设计就失败了。新手第一大错，是把所有东西都做得一样重要。

制造层级的工具，按优先级从高到低是：先用大小，再用字重，然后是颜色深浅，最后是间距。让次要内容退下去（更小、更细、更灰），而不是把主要内容拼命做大做亮。

同样的三行内容，只改了字号 / 字重 / 颜色，右边一眼就知道"先看哪"。

真理 2 · 从功能开始，不从布局开始（Start With the Feature, Not the Layout）

别一上来就摆顶栏、侧栏。先问："这个功能到底需要什么才能用起来？" 先把那件核心元素做出来，再往外搭。没有内容的布局只是装饰。

Google 首页就是这种做法：只有一个搜索框。下面左右对比，左边是"先搭壳"，右边是"先做核心功能"：

真理 3 · 从"过多的留白"开始（Start With Too Much White Space）

新手作品最大的视觉毛病是挤。正确做法：先留多得多的空白，再有理由地一点点收紧。留白不是浪费，它给重要的东西"喘气"的空间。

真理 4 · 用"系统"限制你的选择（Limit Your Choices With Systems）

开工前就把字号刻度、间距刻度、配色、阴影定死，用一套有限的选项，不要随手挑数值。从此不再纠结"该 13px 还是 14px"，从刻度里挑最近的那个就行。

字号刻度（12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48 / 60 / 72px，按真实大小看）：

间距刻度（4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128px，方块就是真实大小）：

配色：每个色相建 8 到 10 级深浅（用 HSL 思考），灰色永远带一点点暖调或冷调。下面是一条带暖调的灰阶：

真理 5 · 颜色是增强，不是信息（Color Is Enhancement, Not Information）

不要只靠颜色传达信息（红绿色弱的人会看漏），颜色之外，要再加文字、图标或形状。用 HSL 而不是十六进制来想颜色，因为 HSL 更接近人脑对颜色的理解；每个颜色都建一整套深浅。

真理 6 · 每个元素都要"挣得"它的位置（Every Element Earns Its Place）

一条边框、一个阴影、一个标签、一个图标，如果说不出它为什么在这，就删掉。默认动作是删，不是加。

真理 7 · 为真实而设计，不为占位符（Design for Reality, Not Placeholders）

别用"假数据 / 完美照片"来设计。用真实数据，并且照顾到空状态、错误状态、加载状态和各种边角情况，否则上线后一遇到真实情况就露馅。

2. 五种工作方式（让 Agent 怎么帮你改）

当你要"做设计"时，先想清楚你要的是哪一种，再这样告诉你的 Agent。说清楚模式，它就不会"只刷个阴影就交差"。

3. 设计参考卡库 · 索引

这 7 条真理，每一条都有专门的卡讲深。想深挖哪条，从这里跳过去。（带"规划中"的卡正在陆续产出，链接先占位，请注意时效。）

把"真理 1 / 3 / 4"讲透：层级 · 布局 · 留白

• 层级、布局与留白：视觉层级怎么拉开、留白怎么给、间距与尺寸系统怎么定。新手第一张必看卡。

把"真理 4 / 5"讲透：排版 · 配色 · 系统

• 排版与字体（type scale / 字重 / 行高），规划中
• 配色与 HSL（配色盘 / 语义色 / 深浅级），规划中
• 设计系统与设计令牌（Apple HIG / Material），规划中

把"真理 6 / 7"讲透：深度 · 打磨 · 真实状态

• 深度与打磨（阴影层次 / 图片 / 收尾细节），规划中
• 设计模式（表单 / 导航 / 弹窗 / 表格 / 仪表盘），规划中

把"UX 真理"讲透：心理学法则与流程

• UX 十大法则（Jakob / Fitts / Miller / Hick / Doherty 等），规划中
• UX 流程与策略（用户目标 / 任务流 / 信息架构），规划中
• 评审清单（8 维度质量检查），规划中

卡住或拿不准，就把页面截图发给你的 AI 老师（Agent），告诉它"用 Review 模式帮我看看：先按 UX 再按 UI 找问题，这页该怎么改？"