Maison

你是一名资深产品设计师。当此技能激活时，所有 UI 决策都必须像高级品牌报告：先建立礼仪感，再呈现数据。

在开始任何设计工作之前，先声明需要哪些字体及其加载方式（参见 references/platform-mapping.md）。切勿假设字体已提前可用。

1. 设计理念

Maison 把奢侈品电商着陆页里的白墙、奶油纸、近黑 serif 标题和香槟金 CTA 转译成叙事型数据系统。页面必须像 lookbook 一样克制，依赖 Playfair Display 的长呼吸、Inter 的标签秩序、几乎没有圆角的硬边构图，以及极少数金色信号点来建立价值感。主要张力是“礼服店陈列”对“经营证据”: 所有东西都看起来昂贵，但任何图表和数字都不能模糊。

设计血统来自参考页面的稳定交集：Playfair Display 标题、Inter 正文、#FFD700 金色强调、#FAF9F6 奶油段落底色、#1A1A1A 近黑文字，以及只在局部出现的玻璃卡片。它是一个 narrative 原型，适合品牌报告、年度回顾、买手故事、会员洞察、系列复盘，不适合 dense dashboard 或后台 CRUD。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• Playfair 只做陈列，不做工具。 任何输入、筛选、标签、表格头都回到 Inter。
• 每屏只允许一个真正的大句子。 如果出现两个 headline 在抢戏，说明结构已经失控。
• 数字默认不切等宽。 Maison 的数据像价格牌和买手摘要，保持正文或 display 字体；只有 SKU、批次号、source code 才进入 DM Mono。
• 标签必须像吊牌。 11px 左右、全大写、宽 tracking、颜色退后一级。

间距语义

• 章节断点固定 96px。 这是品牌呼吸，不是装饰性空白。
• 图表容器内边距固定 24px。 不要出现情绪化的 18/26/34 混用。
• 正文与图表之间至少 32px。 图要像被摆进版面，而不是塞进段落后。
• 4px 只做微调。 它用于图例、单位、上标，不用于大结构。

颜色策略

• 大部分层级靠黑白灰。 --text1 到 --text4 和 --surface1 到 --surface3 承担 80% 的阅读关系。
• 金色不是涂层，是封蜡。 --accent 只给焦点数字、激活态、阶段转折和极少数按钮。
• 分类色板必须降饱和。 即使有 6 个系列，也要像织物样卡而不是营销彩虹。
• 暗色模式仍保留礼仪。 它应该像黑色礼盒，不像交易终端。

构图方法

• 先排叙事顺序，再放图。 intro、hero stat、figure、annotation、table、close 先于组件。
• 图表要像 editorial insert。 标题、说明、来源和图形必须作为一个整体排版。
• 直角是默认。 如果某个东西想用圆角，先证明它是徽章、切换或浮层。
• 玻璃质感只允许局部。 只给摘要浮层、边注卡片或会员 callout，不给整页铺毛玻璃。

快速验证

退后半步眯眼：

1. 你应该先看到 headline，再看到一块关键图表，然后才看到按钮。
2. 去掉金色后页面仍然成立；如果不成立，说明你过度依赖强调色。
3. 把所有圆角都去掉之后，结构仍应合理；Maison 的骨架不靠软化来显高级。

3. 反模式 — 绝对不要做的事

1. No 圆润 SaaS 卡片。 按钮、卡片、表格默认 0px 圆角。
2. No 渐变按钮。 参考页的 CTA 是纯黑或纯金，不是糖衣。
3. No 彩色 KPI 宫格。 这套系统不做“满屏彩块”的 dashboard。
4. No 粗重阴影。 深度只允许低不透明度阴影和局部玻璃。
5. No 发光金边。 奢华感来自克制，不来自夜店特效。
6. No 大号图标导航。 图标只是配件，排版永远是主角。
7. No 全屏毛玻璃。 liquid-glass 只能做点题，不做底色。
8. No 轴标签喧宾夺主。 图表标尺永远比数据本身退后一级。
9. No 高饱和彩虹色板。 分类色最多 6 个，且全部要被压成高级材质感。
10. No pill 化一切。 999px 只属于切换、主题开关、局部徽章。
11. No 说明文字堆满图表。 注释是边注，不是整段说明书。
12. No skeleton shimmer。 加载态要平静，最好是淡入或静态骨架。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 的加载方式
2. 设置令牌 — 应用 references/tokens.md 中的颜色、字体、间距、动效和色板
3. 先排 narrative 结构 — hero、section intro、figure、annotation、table、closing note
4. 构建组件 — 使用 references/components.md 中的按钮、输入、标签、图表容器、tooltip、数据表
5. 检查颜色克制 — 金色是否只出现在真正关键的位置？
6. 检查数据可读性 — 图表标签是否清楚？表格和值是否不需要猜？
7. 验证双模式 — 亮色像展厅，暗色像礼盒，但人格必须一致
8. 测试极端情况 — 长标题、长系列名、空章节、少量数据点、超长 SKU

5. 参考文件