用 Hermes 做好看的
前端页面
不是 AI 不会写代码，是它不知道什么是"好看"。用 Design Extractor 提取设计规范，让 Hermes 在约束下生成视觉一致的页面。
STEP 01
提取设计规范
打开喜欢的网站，用 Design Extractor 一键采集配色、字体、间距、动效，生成 DESIGN.md
STEP 02
生成 DESIGN.md
30 秒内获得覆盖氛围定义、设计规范、组件规范、复刻指南的结构化设计文档
STEP 03
让 Hermes 按规范输出
将 DESIGN.md 注入 Hermes 的系统提示，AI 在明确的设计约束下生成高质感前端代码
问题诊断
没有设计规范，AI 只能"猜"
AI 需要设计系统，就像厨师需要食谱。没有量化约束，Hermes 只能输出"安全但平庸"的默认样式。
配色混乱
没有规范时，Hermes 倾向于使用默认配色（蓝底白字），无法还原参考站的独特色彩氛围。
字体不统一
AI 不知道标题该用什么字体、正文该用什么字号层级，导致页面缺乏视觉节奏感。
间距随意
没有间距系统约束时，AI 会生成 13px、27px 等杂散数值，页面看起来杂乱无章。
组件风格不一致
按钮、卡片、输入框各自为政，没有统一的设计语言，整体像拼凑出来的 Demo。
实战演示
从目标网站到生成代码的完整链路
选择一种风格，看看 Design Extractor 如何提取规范，以及 Hermes 如何按规范还原组件。
SaaS 深色极简风
提取 Linear 的深色背景、indigo 光晕、精确字号层级和玻璃拟态卡片，Hermes 成功还原了参考站的高级质感。
提取的设计 Token
#0B0B0B → #141414#6366F1 (indigo-500)Cal Sans / Inter14px / line-height 1.5卡片 12px / 按钮 9999px核心能力
一份完整的设计规范，包含这些
Design Extractor 从 6 个维度采集视觉数据，生成可直接指导 AI 编码的结构化文档。
配色方案
主色 / 辅色 / 功能色（成功/警告/错误）/ 文字色 / 背景渐变 —— 完整的色彩 token 系统。
字体栈
标题字体 / 正文字体 / 等宽字体 / 字重层级（Light/Regular/Medium/Bold）—— 精确到 px 的字号比例。
间距系统
Padding / Margin / Gap / 栅格基准 —— 基于 4px 或 8px 网格的规范间距值，杜绝杂散数值。
质感定义
阴影层级 / 模糊效果 / 边框样式 / 圆角体系 / 透明度规则 —— 定义界面的"触感"。
动效参数
Transition 时长 / Animation 关键帧 / 缓动曲线（ease-out/cubic-bezier）/ 交互反馈模式。
组件规范
Button / Card / Input / Navigation / Typography —— 每个组件的完整样式定义和状态变体。
最佳实践
让 Hermes 按设计规范写代码的 3 个技巧
把 DESIGN.md 有效地喂给 Hermes，是决定生成质量的关键一步。
在系统提示中注入设计规范
将 DESIGN.md 的核心 token（配色、字体、间距）放在 Hermes 的系统提示（system prompt）中，确保每次输出都遵循约束。
用组件命名约定保持输出一致性
在 prompt 中明确组件命名（如 GlassCard、PrimaryButton、EyebrowText），让 Hermes 在不同会话中保持相同的组件体系。
迭代时对比 DESIGN.md 检查偏差
每轮修改后，用 DESIGN.md 作为验收清单，逐项检查配色、字号、间距是否偏离规范，确保最终输出的一致性。
你是一个专业前端开发者。请严格遵循以下设计规范生成 React + Tailwind CSS 代码：
【配色】
- 背景: #0B0B0B
- 卡片: rgba(255,255,255,0.035)
- 主色: #6366F1
- 文字: white/90%（主文）/ white/60%（副文）
【字体】
- 标题: font-serif, text-4xl to text-7xl
- 正文: text-sm to text-base, leading-relaxed
- 标签: text-[11px], uppercase, tracking-[0.18em]
【间距】
- 使用 4px 基网格: 4, 8, 12, 16, 24, 32, 48, 64
- 卡片内边距: p-6 (24px)
- Section 间距: py-24 (96px)
请生成一个 Hero Section，包含标题、副标题和两个 CTA 按钮。常见误区
避开这些坑，页面颜值提升 80%
AI 前端设计的 5 个常见陷阱，以及如何用 Design Extractor 从根本上避免它们。
让 AI 自己选配色
用 Design Extractor 从参考站提取精确色值，在 prompt 中强制指定，不让 AI "自由发挥"。
不定义字体层级
提取参考站的字体栈和字号比例，作为约束条件写入系统提示，确保标题/正文/标签有清晰区分。
忽略间距系统
在 prompt 中明确要求"使用 4px 基网格"，并提供参考站的 padding/margin token 值。
动效过度或缺失
提取参考站的 transition 时长和 easing 曲线，要求 AI 统一使用 150ms + ease-out，避免花哨动画。
组件风格不统一
要求 AI 先输出组件规范（Button/Card/Input 的完整定义），再开始生成页面，确保全局一致性。
FAQ
常见问题
Hermes 本身是一个 AI Agent 框架，主要能力是任务执行和代码生成。它不会直接输出 Figma 或 Sketch 设计稿，但可以在 DESIGN.md 设计规范的约束下生成高质感的前端代码。
Design Extractor 支持绝大多数公开可访问的网页。只要网页没有强反爬机制，都可以提取其颜色、字体、间距等视觉规范。部分动态渲染的内容可能需要等待页面完全加载后再分析。
完全可以。这就是本方法的核心价值——你不需要懂设计，只需要会"提取好设计"和"告诉 AI 执行"。Design Extractor 负责把优秀设计量化成参数，Hermes 负责把参数还原成代码。
是的。DESIGN.md 是 Markdown 格式的文本文件，你可以直接将其内容作为系统提示（system prompt）或对话上下文输入 Hermes。建议先提取核心 token（配色、字体、间距），避免 prompt 过长。
Hermes 是一个开源 AI Agent 框架，强调自主任务执行和多平台集成。OpenClaw 也是开源 Agent 框架，侧重 Skills 生态。Cursor 是 AI 集成 IDE。三者都可以配合 Design Extractor 使用。
当然可以。DESIGN.md 是纯文本文件，你可以手动调整任何 token（如将主色从 indigo 改为 emerald）来创造变体设计，而不改变整体系统的一致性。
非常适合。DESIGN.md 可以作为团队的共享设计规范文档，确保不同成员、不同 AI 会话输出的视觉风格保持一致。相当于给团队配了一位永不疲倦的设计总监。
Design Extractor 提供免费版，允许使用自己的 API Key 进行无限次分析。Pro 版（$5/月）提供平台额度，无需配置 API Key。所有版本生成的 DESIGN.md 格式完全一致。