首页手记如何用 Claude Code 打造媲美顶级产品的...

如何用 Claude Code 打造媲美顶级产品的 UI？一套可复用的高保真工作流

标签：

APPUI设计设计工具设计基础

你是否也曾遇到这样的困境：
想做一个“看起来很贵”的界面，却苦于没有设计功底；
用 AI 工具生成的 UI 总是带着一股“AI 味”——配色奇怪、间距混乱、细节粗糙；
明明参考了优秀案例，最终效果却连原作的 60% 都达不到？

别急。今天我要分享的，是一套经过实战验证的 高保真 UI 生成工作流，借助 Claude Code（CC） 和少量手动干预，就能近乎像素级还原像 MotherDuck 这类顶级产品的视觉风格。

✅ 所有代码已开源：GitHub 仓库
✅ 在线预览：4-quadrant-to-do.vercel.app

为什么传统 AI UI 生成总“翻车”？

过去我常用两种方式生成 UI：

在 v0.dev 中对话生成初版；
或用 Stitch 快速搭建原型。

虽然效率高，但结果往往“能用但不惊艳”——缺乏品牌感、细节粗糙、风格模糊。

问题出在哪？信息丢失。

当你只给 AI 一张截图时，它无法获取：

精确的 HEX 色值
字体族、字重、行高
阴影参数（blur、spread、opacity）
内外边距（padding/margin）的具体数值
自定义 CSS 变量或 Tailwind 配置

这些“看不见的细节”，恰恰决定了 UI 的质感。

核心思路：用「样式上下文」替代「模糊描述」

我们的目标不是让 AI “猜”风格，而是直接喂给它完整的样式上下文。

为此，我总结了一套 5 步高保真还原法，全程无需 Figma，仅靠浏览器 + Claude Code 即可完成。

第一步：提取真实页面的样式上下文

打开你想模仿的网站（如 MotherDuck 首页），执行以下操作：

截取完整页面截图（建议全屏长图）；
在 DevTools 中右键 <html> 和 <body> 元素 → “Copy → Copy styles”；
将复制的 CSS 样式 + 截图一起提供给 Claude Code。

Prompt 示例：

Help me rebuild the exact same UI in a single HTML file as motherduck.html.
Below is the extracted CSS from the original page’s <html> and <body> elements:
/* Paste copied styles here */

Claude 会基于这些真实的全局样式生成一个结构合理、基础风格一致的 HTML 页面。

💡 提示：全局变量（如 --header-height、--primary-color）会被保留，极大减少风格偏差。

第二步：精细化迭代关键组件

初版 HTML 通常“形似神不似”。这时需要针对性优化：

按钮悬停效果不够细腻？
字体粗细与原作不符？
阴影层级感缺失？

使用高约束 Prompt 引导迭代：

Only output HTML/Tailwind in a single code block.
- Use Lucide icons (1.5 stroke width)
- For headings >20px, apply tracking-tight
- Use one weight lighter than specified (e.g., Bold → Semibold)
- Favor light mode for professional/business UIs
- Add subtle dividers and hover outlines
- Never use JavaScript for animations — use Tailwind classes
- Respect the original design’s colors, fonts, and spacing exactly

通过 2–3 轮微调，UI 的精致度会显著提升。

第三步：固化设计系统 —— 生成 `STYLE_GUIDE.md`

这是最关键的一步。我们将当前 UI 的所有视觉规则沉淀为一份结构化文档，作为后续开发的“唯一真相源”。

Prompt：

Generate a comprehensive style guide based on the current UI. Include:

Color palette (with semantic usage)

Typography scale (font family, size, weight, line height)

Spacing system (padding, margin, gap)

Component specs (buttons, cards, inputs)

Shadow & border-radius tokens

Animation principles

Common Tailwind patterns

Example code snippets for key components

输出的 STYLE_GUIDE.md 不仅包含色值表、字体规范，还会定义设计哲学（如“Bold & Playful”）、语义化颜色用途（Success/Warn/Error）、甚至响应式断点策略。

📌 这份指南将成为你后续所有页面的“视觉宪法”。

第四步：基于 Style Guide 构建新功能原型

现在，我们可以用这份指南去“指挥” Claude 生成风格统一的新页面。

例如：我想做一个“四象限待办清单”应用。

Prompt：

Build a quadrant-based to-do list UI following the STYLE_GUIDE.md exactly.
Include: header with yellow background (#FFD500), four draggable sections, stats chart using Chart.js.

初稿可能平平无奇，但只要不断引用 Style Guide 中的具体规则（如“按钮必须用 #6FC2FF + 黑边框”），几轮迭代后就能逼近原作风格。

第五步：迁移到 Next.js，实现工程化落地

纯 HTML 不利于维护。最后一步是将其转化为真正的应用。

Prompt：

Convert todo-quadrant.html into a clean, readable Next.js app.

Pixel-perfect UI replication

Clear component structure

Use early returns instead of nested if-else

Preserve all interactions and responsiveness

Claude 会输出完整的 app/ 目录结构，包含：