企业官网建设流程全解析

awesome-claude-design 是 Anthropic 旗下 AI 设计工具 Claude Design 的 DESIGN.md 资源合集，其中收录了 8 个「双品牌 Remix」配方，教你把 Linear、Claude、Warp、Sentry 等顶级品牌的设计 tokens 成对混搭，仲裁冲突后生成一套能独立站住脚的全新设计系统。

为什么选「双品牌 Remix」：治「AI 模板脸」的配方

单品牌克隆有个通病：做得越快，越容易落入 AI 默认审美（千篇一律的蓝绿色按钮、三栏功能网格、到处是发光小圆点）。awesome-claude-design 的解法是token 仲裁（token arbitration）——不是把两个品牌的颜色字体简单复制粘贴，而是逐项「二选一」并写明理由：

输出读起来不能像混合体，必须像一个能独立存在的第三品牌。

每份 Remix 配方都遵循同一套结构，共 9 个规范章节：视觉主题、色彩调色板、排版规则、组件样式、布局原则、深度与层级、Do's and Don'ts、响应式行为、Agent 提示指南，最后还会附上两段「彩蛋」：

• Creative Tensions（创意张力）：记录双方品牌无法调和的矛盾，交给团队按场景裁决
• Parent-brand DNA（父品牌 DNA 占比）：按 token 数量统计来源比例，例如Linear 55% · Claude 45%

8 个双品牌 Remix 配方一览

全部配方位于 design-md/remix/ 目录，一张表先看完：

1. Linear × Claude：给冷峻 SaaS 仪表盘加一点体温

这是仓库里最典型的范例，完整文件见 linear-x-claude.md，父品牌参考可看 linear.md 和 claude.md。

仲裁过程很有启发：Claude 的奶油底色#f4f3ee输给 Linear 的纯白#ffffff（仪表盘需要扫描效率），但 Claude 的陶土色#c96442赢下 Linear 标志性的紫#5e6ad2——因为陶土色读起来是「情感温度」，而紫色是「科技创业公司默认色」。排版上，衬线字体 Tiempos 只在 28px 以上的大标题启用，界面控件仍用 Inter 保住信息密度。

2. Warp × Sentry：深色开发者仪表盘，但不再「冷冰冰」

见 warp-x-sentry.md。Warp 的深海军蓝表面栈（#0b0d14）保留，Sentry 的丁香紫#7553f6替换掉 Warp 的冷青色——理由是丁香紫能与 Warp 的珊瑚色警告和谐共存，而青色与粉色告警色在错误/操作相邻时会互相打架。等宽数字字体全局开启 tabular，保证指标对齐。

3. Stripe × A24：电影感海报 × 金融科技信任感

见 stripe-x-a24.md。这是唯一精确 50% 对 50% 的配方。A24 的全幅黑色「海报画板」只许出现在 hero 区，Stripe 的紫色 CTA 在明暗两种模式下都不可替换——配方原话：「替换它会杀死金融科技信任信号」。A24 的电影红每个视口最多用一次，只当标注用。

4. Vercel × Pitchfork：冷静的灰阶，热烈的观点

见 vercel-x-pitchfork.md。Pitchfork 的橙#ff5d1f只允许出现在链接、章节标记（如 "REVIEW" 小标）和引言左边线，禁止用作按钮填充。衬线字体只在 48px 以上出场，页面开头用杂志式通栏标题块，之后立刻切回 Vercel 的文档网格。

5. Granola × Criterion：像影碟收藏库一样的笔记应用

见 granola-x-criterion.md。Granola 贡献暖奶油纸面与 hover 毛玻璃，Criterion 贡献「书脊式」排版：每张卡片顶部加一条等宽字体的元数据条（版次号、日期、时长），像档案馆的目录卡。档案红#b32418是全场唯一强调色，用法像图书馆管理员的钢印。

6. Ollama × ElevenLabs：先放 4 秒电影，再进终端

见 ollama-x-elevenlabs.md。首屏是 ElevenLabs 式的全幅径向渐变 hero，电光蓝#2c6cff加微弱的波形动效（透明度上限 8%）；首屏之后立刻切回 Ollama 的纯黑终端纪律——等宽字体覆盖 h1 到正文，1px 边框，无任何装饰。两套气质靠「共享强调色 + 零过渡渐变」避免割裂。

7. Notion × Duolingo：能击掌鼓励你的学习工作台

见 notion-x-duolingo.md。Notion 承包文档表面（暖白、720px 阅读栏），Duolingo 承包交互（叶绿#58cc02CTA、底部立体阴影按钮、连击/XP 徽章）。关键红线：立体按钮阴影只给「可按压的东西」，卡片永远保持扁平——「卡片是用来读的」。

8. Mercury × Linear：金融级密度，编辑部温度

见 mercury-x-linear.md。Mercury 的奶油画布 + 靛蓝#5266eb取代 Linear 紫（金融信任信号不能破），Linear 贡献 4px 基础网格、36px 行高表格和 ⌘K 命令栏。最严苛的一条纪律：所有金额必须用等宽表格数字（tabular），「破坏它，信任感就掉了」。

如何自制双品牌 Remix：7 条 token 仲裁规则

仓库提供了现成的提示词包 remix-two-brands.md（完整提示词 + 示例运行 + 质检清单，索引见 prompts/README.md），把两份 DESIGN.md 喂给 Claude Design，按以下规则仲裁：

1. 排版：字体从 A 或 B 中选一套，不许混用，并写明理由
2. 色彩：主中性色取一家，强调色取另一家；绝不混用两个强调色
3. 间距：用两套中更严格的那条刻度
4. 圆角：跟随所选排版决定
5. 深度：继承更克制的一套（多数配方默认「扁平 + 1px 边框」）
6. 组件：逐个组件注明 token 来自哪个父品牌、为什么
7. Do's and Don'ts：合并两份清单、删掉矛盾项，剩余张力标记为 creative tension 归档

产出物直接提交到design-md/remix/<brand-a>-x-<brand-b>.md，文件结尾必须附上按 token 数量计算的 DNA 占比。

把 Remix DESIGN.md 用在 Claude Design 上的 3 个技巧

• 系统先行：先把 Remix 后的 DESIGN.md 立为项目设计系统，再生成任何页面，token 会在后续所有产出中复用
• 改画布少聊天：对具体元素用画布内联评论而非新开一轮对话，更省 token、定位更快
• 管住预算：Opus 4.7 的视觉 token 成本约为文本的 3 倍，Pro 用户两三个 prompt 就可能烧掉周额度的 95%；配套工作流见 token-budget-claude-design.md

不知道选哪个风格？用 3 个问题定位

仓库的 family-picker.md 提示词包只问三个问题：产品偏阅读还是偏扫描？用户是开发者、创作者还是消费者？品牌需要「有勇气」的个性吗？

如果第三题答「是」，就直奔 The Verge 这类霓虹粗野风家族（参考 the-verge.md）；否则留在前七个主流家族里，再挑一对做 Remix 即可。

小结

awesome-claude-design 把「品牌混搭」从玄学变成了可执行的工程：9 个规范章节保证结构完整，7 条仲裁规则保证冲突可裁决，DNA 占比保证结果可追溯。8 份现成配方覆盖了 SaaS 仪表盘、金融科技、CLI 落地页、教育平台等最常见的落地场景，直接取用，或按同样的规则配出你自己的第 9 个。