前端设计方法论
如何用 Claude Code 做出好看的前端页面
Claude Code 默认产出"AI 味"页面。真正的解决方案不是调 Prompt——而是给它注入精确的设计规范数据。
localhost:3000
❌ 蓝紫渐变 · AI 味
蓝紫渐变、千篇一律的 AI 味设计
localhost:3000
PRIMARY
#6366f1
SURFACE
#0f0f1a
# Typography
✓ DESIGN.md · 精准复刻
精准复刻目标网站的设计风格
问题根因
为什么 Claude Code 总生成 AI 味页面
Claude Code 是强大的代码生成工具，但它缺少一个关键输入：精确的视觉设计数据。
截图 ≠ 设计规范
给 Claude 一张截图，它只能"大概猜测"颜色和排版。没有精确的 hex 值、字体栈和间距系统，复刻永远是 60 分。
手写 CLAUDE.md 太难
手动记录颜色、字重、圆角、阴影、动效参数……一个完整的设计系统有数百个 token，手写既费时又容易遗漏关键细节。
没有规范，Claude 靠"默认值"
缺少设计约束时，Claude 会退回到最"安全"的选择：蓝紫渐变、Inter 字体、方形卡片——也就是你见过无数次的 AI 味 UI。
根本原因
Claude Code 缺少的不是能力，而是。给它结构化的设计规范，它就能生成精准、高级的 UI。精确的设计系统输入
三步工作流
从任意网站到精准复刻，只需三步
用 Design Extractor 提取设计规范，注入 Claude Code，告别猜测。
STEP 01
提取任意网站的设计规范
打开你喜欢的网站，点击 Design Extractor 扩展图标，30 秒内获得完整的 DESIGN.md 设计文档。
Detail
自动提取：CSS 变量 / 配色方案（hex 精确值）/ 字体栈 / 间距系统 / 动效参数 / 组件样式
支持任意 HTTPS 网页，包括 Linear、Stripe、Vercel 等设计标杆产品
Prompt 模板库
可复制的 Claude Code 设计 Prompt
这些模板已针对设计质量优化，配合 DESIGN.md 使用效果最佳。
基础模板
注入 DESIGN.md 并生成首页 Hero
请严格遵循 DESIGN.md 中的设计规范，为我生成一个首页 Hero Section：
设计要求：
- 配色：使用 DESIGN.md 中定义的主色调和背景色，不要使用蓝紫渐变
- 字体：使用规范中指定的字体栈
- 间距：遵循 DESIGN.md 中的间距系统
- 组件风格：参照规范中的按钮、卡片等组件样式
内容：
- H1：[你的标题]
- 副标题：[你的描述]
- CTA 按钮：[主要按钮文字]
技术栈：React + Tailwind CSS，请输出完整可运行的组件代码。精准复刻模板
精确指定设计维度，减少 AI 猜测
基于以下设计规范，生成 [组件名称] 组件：
配色系统（来自 DESIGN.md）：
- 背景色：[从 DESIGN.md 粘贴具体 hex 值]
- 主文字色：[hex 值]
- 强调色：[hex 值]
- 边框色：[hex 值]
字体规范：
- 显示标题：[字体名] [字重]
- 正文：[字体名] [字重]
- 代码/标签：[字体名]
组件要求：
- 不使用任何蓝紫渐变背景
- 卡片样式：玻璃态 / 边框 / 纯色（三选一，与 DESIGN.md 一致）
- 圆角：[从 DESIGN.md 提取 border-radius 值]
请生成 TypeScript + Tailwind CSS 代码。去 AI 味模板
专门解决已有页面的 AI 审美问题
这个前端页面有明显的 "AI 味"，请按照 DESIGN.md 规范重新设计：
当前问题（禁止在新版本中出现）：
❌ 蓝紫渐变背景（#6366f1 到 #8b5cf6 那种）
❌ 过于方正的白色卡片
❌ Inter / system-ui 字体（太通用）
❌ 大量堆砌的特性列表
❌ 对称的左图右文布局
DESIGN.md 规范要求：
- 背景：[具体颜色或方案]
- 主字体：[字体名]
- 卡片风格：[描述]
- 重点组件：[描述]
请以 DESIGN.md 的设计语言重新实现这个页面。
保留功能内容，完全重写视觉样式。迭代优化模板
基于已有代码进行设计迭代
基于当前代码，进行以下设计调整（严格遵守 DESIGN.md）：
1. 颜色修正：
- 将 [当前错误颜色] 替换为 DESIGN.md 中的 [正确颜色]
2. 字体修正：
- 标题改用 [DESIGN.md 指定字体]，字重 [数值]
3. 间距调整：
- [具体组件] 的内边距改为 [DESIGN.md 间距值]
4. 组件风格对齐：
- 按钮样式改为 DESIGN.md 中的 [按钮规范描述]
每次只改一项，改完后告诉我修改的具体内容，方便我审查。常见问题