参考图拆成设计规则
把「这张图好看」拆成网格、层级和密度上能照做的规则
这是我喜欢的参考图：[附图或描述]。我要的不是复刻这张图，而是把它拆成能用在别的页面上的规则。请分六层提取：1）网格与版心；2）间距节奏，用 4 或 8 的倍数标注；3）字号层级与行高；4）色彩角色，背景、表面、文字、强调各占多少面积；5）圆角、描边、阴影的取值；6）信息密度，每屏几个视觉块。每条规则写成可执行的数值或条件句。另外标出哪些只是这张图的偶然，比如照片内容、文案长度，不能当规则。最后用这些规则描述一个内容完全不同的页面。
使用建议
至少给 3 张同源参考图；单张图分不清系统规则和这一屏的临时决定。
适合什么场景
- 看到一张喜欢的界面截图，说不清哪里好，只知道「比我们的干净」——把感觉拆成网格、间距、字号三组数字，才知道要改什么。
- 要接手一个已有品牌视觉的新页面，不能凭空发明——从两三张官方物料里抽出同一套规则，新页面才不会像另一家的。
不适合的场景
- 参考图是插画、海报或 3D 渲染——它的魅力来自画面内容，抽成界面规则会得到一堆无法落地的约束。
- 你只有一张图——单张图分不清哪些是系统、哪些是这一屏的临时决定，至少三张同源界面才能提炼出稳定规则。
示例
输入
一张移动端理财产品首页截图：390×844，顶部深色渐变卡片，下面 4 个入口图标，再下面两列卡片列表，每屏约 2.5 个卡片
你会得到
把渐变卡片读成「首屏唯一的高对比表面，占屏高 38%」，入口图标落在 4 列 8pt 网格、间距 24，卡片圆角 16、内边距 20、间距 12。标出偶然项：截图里余额数字的长度和那张宣传图不能写成规则。最后用同一套规则改写「还款记录」页：渐变卡降到 24% 高度，卡片间距保持 12 以维持密度。
常见误用
- 把参考图的颜色直接取色当规则——取到的是那张图的成品色，不是它的色彩角色关系；换个内容就得重新配一次。
- 把「留白多」当结论——没给具体倍数和上下限，落地时每个人都会给出不同的留白。
可以这样改
- 把「抽成规则」换成「找出这张图违反了自己规则的 3 个地方」——反向练习能看出哪里不一致，而不是把瑕疵也学过来。
- 要求输出一份 CSS 变量表（--space-1 到 --space-6、--radius-*、--text-*）——规则直接变成可交接的 token。