本文分享一个使用Claude Code生成高质量UI的五步工作流，核心思路是通过模仿优秀设计并减少信息差，解决AI生成UI风格单一、细节不足的痛点。通过该方法实现了一个风格统一的四象限待办应用，所有源码已开源并在线预览。
核心思路与工作流概览
传统使用AI生成UI时，无论是通过v0等工具出原型，还是使用Stitch等设计工具初稿，最终效果往往带有明显的“AI感”，在配色、间距、阴影等细节上还原度不足，难以达到理想的“靓丽”程度。问题的关键在于信息丢失：简单的截图或OCR无法获取精确的样式数值。
因此，本工作流核心在于解决样式信息大量丢失的问题，通过减少信息代差，让AI coding 完成的UI 风格有不错的效果。
整个工作流分为五个核心步骤：
- 复制目标网页样式上下文，生成初步HTML。
- 迭代优化原始UI的细节。
- 基于优化后的UI，生成详细的
STYLE_GUIDE.md样式指南。
- 参考样式指南，构建产品原型HTML。
- 将原型转化为结构清晰、易于维护的Next.js应用。
最终成品效果如下，全程通过自然语言对话（Vibe Coding）完成。
在线预览: https://eisenhower-matrix-to-do.vercel.app/en
步骤一：复制样式上下文，生成初版HTML
首先，需要为目标UI（例如 MotherDuck 官网）提供尽可能完整的上下文信息给Claude Code，以构建一个初始的HTML页面。所需信息包括：
- 参考的Web UI截图：提供长图或多张全屏截图。
- 复制的HTML/CSS样式信息：通过浏览器开发者工具获取。
- 明确的Prompt指令。
操作流程：
-
截图：对目标页面进行完整截图。
-
复制样式信息：在开发者工具中，选中<html>和<body>元素，复制其完整的style信息。
例如复制的样式可能包含：
-webkit-locale: "en";
scroll-margin-top: var(--eyebrow-desktop);
animation-duration: 0.0001s !important;
/* ... 大量其他样式属性 ... */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--swiper-theme-color: #007aff;
--header-desktop: 90px;
-
使用Prompt生成HTML：向Claude Code发送如下指令，附上截图和样式信息。
Help me rebuild exact same ui design in single html as xxx.html, above is extracted css:
[在此粘贴复制的CSS样式]
-
获得初版HTML：Claude Code将生成一个初步还原的HTML文件，在浏览器中打开即可预览效果。
步骤二：迭代优化原始UI
初版HTML在大体风格上已接近，但细节（如按钮悬停效果、边框、阴影等）仍需完善。此时，可以结合具体的CSS代码和更细致的Prompt进行迭代。
常用迭代Prompt示例：
Only code in HTML/Tailwind in a single code block.
Any CSS styles should be in the style attribute. Start with a response, then code and finish with a response.
Don't mention about tokens, Tailwind or HTML.
Always include the html, head and body tags.
Use lucide icons for javascript, 1.5 strokewidth.
Unless style is specified by user, design in the style of Linear, Stripe, Vercel, Tailwind UI (IMPORTANT: don't mention names)...
[此处为保持连贯性，省略部分Prompt细节，原文中已有完整列举]
操作：将需要修改的特定元素（如某个按钮）的CSS代码提供给Claude Code，并要求其按照目标风格调整。经过2-3轮调整后，可获得细节更完善的“原始UI”。
步骤三：生成STYLE_GUIDE.md样式指南
在正式开发产品前，需要创建一个容器来系统化保存上一步得到的“原始UI”的所有样式信息，这便是STYLE_GUIDE.md。它作为后续开发的“单一可信源”，能极大减少与AI沟通中的信息衰减。
生成Prompt：
Great, now help me generate a detailed style guide
In style guide, you must include the following part:
- Overview
- Color Palette
- Typography (Pay attention to font weight, font size and how different fonts have been used together in the project)
- Spacing System
- Component Styles
- Shadows & Elevation
- Animations & Transitions
- Border Radius
- Opacity & Transparency
- Common Tailwind CSS Usage in Project
- Example component reference design code
- And so on...
In a word, Give detailed analysis and descriptions to the project style system, and don't miss any important details.
Claude Code将生成一份非常详尽的设计系统文档，涵盖色彩、字体、间距、阴影、组件样式等所有细节。这份指南是后续实现像素级还原的关键。完整STYLE_GUIDE.md示例过长，核心部分示例如下：
# MotherDuck UI Design System - Style Guide
## Color Palette
### Primary Colors
```css
--beige-background: #F4EFEA; /* Main page background */
--primary-blue: #6FC2FF; /* Primary CTA buttons */
--cyan: #4DD4D0; /* Secondary accent, badges */
--dark: #383838; /* Primary text, borders */
Typography
Font Families:
- Primary UI:
'Inter', -apple-system, BlinkMacSystemFont, sans-serif
- Code Samples:
'Monaco', 'Courier New', monospace
Type Scale (示例):
- Hero H1:
text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tighter
- Body Large:
text-lg lg:text-xl font-medium leading-relaxed
- Button Text:
text-sm font-bold uppercase
Spacing System
基于Tailwind默认间距尺度 (1单位 = 0.25rem / 4px)。
- 标准区域：
py-20 px-6
- 容器最大宽度：
max-w-6xl (1152px)
- 元素间隙：
gap-6 (24px)
步骤四：参考样式指南构建产品原型
有了完整的STYLE_GUIDE.md，就可以指导Claude Code实现我们自己的产品功能了。例如，构建一个四象限待办列表（Eisenhower Matrix）的原型。
操作：向Claude Code描述产品功能需求（四象限待办），并提供STYLE_GUIDE.md作为样式依据，要求生成HTML原型。
初稿可能效果一般，这正是样式指南发挥作用的时候。可以持续要求AI依据指南进行迭代，例如：
- “将header颜色替换为style-guide.md中的黄色(
#FFD500)。”
- “依据指南的图表规范，添加任务统计图表功能。”
经过几轮有针对性的迭代，即可得到风格统一、细节到位的产品原型。
步骤五：构建像素级还原的Next.js应用
静态HTML文件不利于后续维护和功能扩展。最后一步是将其转化为一个结构清晰的现代化前端应用。
转换Prompt：
Great，now you need to build a next app from todo-quadrant.html
- you need to ensure the UI and logic are pixel perfectly restored。
- the code structure should be clear enough and The code is highly readable.
- when there is the case that if-else ，your need to use early-return to solve
在开始构建前，可以让Claude Code先输出一份实现计划(plan.md)，梳理已实现的功能和组件结构，确保逻辑清晰。
随后，Claude Code会生成完整的Next.js项目代码，包括组件拆分、状态管理和样式应用，最终实现与原型像素级还原的、可维护的Web应用。使用STYLE_GUIDE.md指导的前端框架/工程化开发，能确保UI一致性。
工作流扩展应用
拥有了系统化的STYLE_GUIDE.md后，此工作流还可拓展至更多场景：
- 生成设计稿：在Stitch等工具中，依据样式指南和初版HTML生成更符合风格的设计稿。
- 生成美术素材：在Lovart等AI绘画工具中，生成与产品UI风格匹配的图标、插图等美术素材。
- 生成演示动画：基于Framer Motion等库，生成产品功能的展示动画。
- 生成演示幻灯片：生成符合产品风格的HTML幻灯片，并可转换为PPT使用。
总结
通过“截图复制样式 -> 迭代优化 -> 生成样式指南 -> 指导开发 -> 工程化”这五步工作流，可以有效利用Claude Code等AI编码助手，突破其生成UI在细节和风格上的瓶颈。关键在于将隐性的、分散的样式信息，通过STYLE_GUIDE.md显性化、系统化，从而在后续的所有设计和开发环节中保持高度一致，最终实现高质量、有风格的UI产出。这种方法不仅适用于Next.js，也可应用于其他HTML/CSS/JS技术栈的项目。
发表于 3 天前
|
查看: 10|
回复: 0
