其实，

前言

Hi 大家🫶。我是大雄，好久不见，按理说，最近空余时间在独立开发小产品，也在探索独立开发的常用方法。今天要分享的是：如何用 Claude Code 生成 顶级靓丽 UI 🌝。

所有源码已开源：，并已部署到 Vercel：。

AI 画的 UI 味太浓了哈哈。说起来，今天我们来解决这个痛点！，

以下行文为实践过程记录出处为 Json 的 B站视频：如何用 Claude Code 生成顶级 UI？

再看痛点一。AI 绘制的 UI 太“油”——缺乏细节与可控性

• 颜色饱和度过高，缺少真实感。
• 阴影、边框细节模糊不清。
• 布局比例失衡，导致视觉疲劳。

至于痛点二，OCR 过程导致信息大量丢失

• 具体配色数值缺失。按理说，
• 字体、字号、粗细未被保留。话说回来，
• 间距、对齐方式难以精准还原。
• 最终 AI 完成的效果往往低于原稿60%。

再看步骤一，Copy 样式上下文，生成初版 HTML

你需要提供下方上下文信息给 Claude Code，让它帮忙建立一个 HTML 页面：

截图示例

Prompt 示例：

Help me rebuild exact same ui design in single html as xxx.html。above is extracted css:
...

style info 示例：

* html css style
body css style
...
* -webkit-locale: "en";scroll-margin-top: var;...

HTML 预览效果：

步骤二这方面。 迭代原始 UI —— 补齐细节与交互动画

此时已有基本布局，但仍需完善按钮 hover 阴影、边框等细节。使用下方 prompt 与具体标签 CSS 一起继续迭代：

Only code in HTML/Tailwind in a single code block.
Any CSS styles should be in style attribute.
Start with a response,n code and finish with a response.
Don't mention about tokens。Tailwind or HTML.
Always include html,head and body tags.
Use lucide icons for javascript,strokewidth.
...
Use subtle contrast.
Avoid a bottom right floating DOWNLOAD button.

原始 UI.html 效果：

后我觉得已达标。

步骤三这方面，生成 STYLE_GUIDE.md —— 集中所有样式信息，减少信息差距

Avoiding repeated OCR loss by consolidating all style data into one file.

Great,now help me generate a detailed style guide...
In style guide,you must include following parts:
...
Give detailed analysis and descriptions to project style system。and don't miss any important details.

生成的 STYLE_GUIDE.md：

# MorDuck UI Design System - Style Guide
## Table of Contents
| | | ...
## Overview
...
## Color Palette
...
## Typography
...
## Spacing System
...
## Component Styles
...
## Shadows & Elevation
...
## Animations & Transitions
...
## Border Radius
...
## Opacity & Transparency
...
## Layout System
...
### Common Tailwind CSS Usage in Project
### Example Component Reference
### Responsive Design Patterns
---

至于步骤四，根据 STYLE_GUIDE.md 建立原型 HTML

参考 STYLE_GUIDE.md，实现一个四象限 to‑do list 的 .html 原型。下面是初稿的观点是，

• …

"看起来平平无奇？别担心，所有样式信息都已集中在 STYLE_GUIDE.md，可继续推送给 CC 进行迭代。"

经过几轮迭代后得到了初版效果。

再看步骤五，建立像素级别还原的 Next.js App

The raw .html 不便于维护，可通过下面 Prompt 指导 Claude Code 创建 Next.js 项目，并保持像素级还原：

 Great。now you need to build a next app from todo-quadrant.html -
you need to ensure UI and logic are pixel perfectly restored.
The code structure should be clear enough and code is highly readable.
When re is an if‑else case your need to use early‑return to solve it.

保存 plan.md 并启动项目后你将得到最终 Next.js App 效果！

---

其他 思路

• - 在 stitch 生成符合风格 ui 设计稿;
• - 在 lovart 生成符合风格美术素材;
• - 基于 Framer Motion 生成产品演示动画;
• - 用工具把漂亮的产品幻灯片转为 PPT 等。

---

参考实践

• b23.tv/t7pyB9a

---