如何用Claude Code 生成頂級UI ❇️

前言

嗨 大家🫶 ，我是大雄，好久不見。最近空餘時間，在獨立開發一些小產品，也在探索一些獨立開發的最佳實踐。今天要分享的是：如何用 Claude Code 生成 頂級【靚麗】UI 🌝

所有的源碼都已開源：Github，並已部署到vercel：在線預覽。

眾所周知，AI 畫的UI，味太濃了哈哈。今天我們來解決這個痛點！！

以往我的處理

以往生成UI我會怎麼做呢？

• 跟 v0 結對聊天，出一版原型，再基於原型樣式去迭代

• 或者是使用 stritch 設計一個初版的UI，再進行迭代

• https://v0.app/

• https://stitch.withgoogle.com/

下方是其中一個產品，hi-offer 多次迭代後大致的UI效果，看起來還可以，只是還沒有到很靚麗的程度🫥

那可能有小夥伴會有同樣的疑問：

• 我沒有UI設計經驗呀，我要怎麼快速實現 靚麗程度 的UI呢？
• 答案是抄，No，是模仿學習哈哈

給大家一個樣例，MotherDucker 的首頁。
給大家10秒鐘，思索一下。如果你想復刻這種UI風格，用在自己的產品上，你會怎麼做？

可能有下面的一些思考

• 截圖UI給Claude Code分析
• 截圖丟給stitch + 對話迭代

眾所周知，OCR過程，出現很大UI信息缺失，比如：具體配色數值、陰影、間距、字體等，於是你會發現，最終AI完成的效果可能都沒有60%。

於是核心思路是：解決樣式信息大量丟失的問題，通過減少信息代差，讓AI coding 完成的UI風格有不錯的效果

好消息是，最近實踐了一個工作流，很好地解決了這個問題，隨我來，我們只需要核心的五個步驟：

最終成品效果如下，全程vibe coding，詳見：4-quadrant-to-do.vercel.app/

• 如果你覺得效果還不錯，愉快開始本文之旅吧~~
• 如果你認為效果比較牽強，那麼閱讀本文之後，你一定可以迭代出更好的UI。

話不多說，我們開始發車~~

步驟一：Copy樣式上下文，生成初版的html

你需要提供下方的上下文信息給CC，讓他幫忙構建一個html頁面

• 參考的 web UI 截圖【長圖或多張全屏圖】
• copy web的 html css樣式信息
• prompt

截圖

prompt

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

style info

右鍵檢查，選擇html、body元素，copy style信息

• html css style
• body css style

例如：

    -webkit-locale: "en";
    scroll-margin-top: var(--eyebrow-desktop);
    animation-duration: 0.0001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    caret-color: transparent !important;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
    box-sizing: border-box;
    border: 0px;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
    scroll-padding-top: var(--header-desktop);
    scroll-behavior: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    --swiper-theme-color: #007aff;
    --toastify-toast-min-height: fit-content;
    --toastify-toast-width: fit-content;
    --header-mobile: 70px;
    --header-desktop: 90px;
    --eyebrow-mobile: 70px;
    --eyebrow-desktop: 55px;

HTML 預覽效果

CC構建的html頁面

步驟2: 迭代原始UI

這裡我覺得原始UI的分格上已經可以了，只是一些細節還不太行，比如按鈕hover的陰影、邊框等還需要完善。

我一般會使用下方的prompt以及copy具體標籤的CSS來進一步處理。

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).
Checkboxes, sliders, dropdowns, toggles should be custom (don't add, only include if part of the UI). Be extremely accurate with fonts.
For font weight, use one level thinner: for example, Bold should be Semibold.
Titles above 20px should use tracking-tight.
Make it responsive.
Avoid setting tailwind config or css classes, use tailwind directly in html tags.
If there are charts, use chart.js for charts (avoid bug: if your canvas is on the same level as other nodes: h2 p canvas div = infinite grows. h2 p div>canvas div = as intended.).
Add subtle dividers and outlines where appropriate.
Don't put tailwind classes in the html tag, put them in the body tags.
If no images are specified, use these Unsplash images like faces, 3d, render, etc.
Be creative with fonts, layouts, be extremely detailed and make it functional.
If design, code or html is provided, IMPORTANT: respect the original design, fonts, colors, style as much as possible.
Don't use javascript for animations, use tailwind instead. Add hover color and outline interactions.
For tech, cool, futuristic, favor dark mode unless specified otherwise.
For modern, traditional, professional, business, favor light mode unless specified otherwise.
Use 1.5 strokewidth for lucide icons and avoid gradient containers for icons.
Use subtle contrast.
For logos, use letters only with tight tracking.
Avoid a bottom right floating DOWNLOAD button.

原始UI.html效果

經過兩次三次調整後，我覺得工作了

步驟3: 生成STYLE_GUIDE.md

在正式開整我們的web產品之前，我們需要一個容器，保存上面我們原始UI的所有樣式信息，減少信息代差。

這個容器就是STYLE_GUIDE.md，你可以使用下面的prompt來生成

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.

生成的STYLE_GUIDE.md

由於CC給我生成的style-guide比較長，這裡只貼了關鍵部分，如需查看完整.md，辛苦移步倉庫查看Github

# MotherDuck UI Design System - Style Guide

## Table of Contents
1. [Overview](#overview)
2. [Color Palette](#color-palette)
3. [Typography](#typography)
4. [Spacing System](#spacing-system)
5. [Component Styles](#component-styles)
6. [Shadows & Elevation](#shadows--elevation)
7. [Animations & Transitions](#animations--transitions)
8. [Border Radius](#border-radius)
9. [Opacity & Transparency](#opacity--transparency)
10. [Layout System](#layout-system)
11. [Common Tailwind CSS Usage](#common-tailwind-css-usage)
12. [Example Component Reference](#example-component-reference)
13. [Responsive Design Patterns](#responsive-design-patterns)

---

## Overview

The MotherDuck design system features a **bold, playful, and technical aesthetic** that combines:
- **Brutalist design principles** with heavy borders and sharp corners
- **Vibrant color palette** inspired by data visualization
- **Interactive micro-animations** with shadow-based hover effects
- **Technical typography** mixing Inter for UI and Monaco for code
- **Generous spacing** for a clean, breathable layout

### Design Philosophy
- **Bold & Confident**: Strong borders, high contrast, and clear visual hierarchy
- **Playful & Approachable**: Bright colors, whimsical cloud decorations, and friendly copy
- **Technical & Professional**: Code samples, data-focused messaging, and precise typography
- **Interactive**: Immediate visual feedback on all interactive elements

---

## Color Palette

### Primary Colors

```css
/* Background Colors */
--beige-background: #F4EFEA;      /* Main page background */
--white: #FFFFFF;                  /* Card and section backgrounds */
--dark-gray: #2D2D2D;             /* Code editor header */

/* Brand Colors */
--primary-blue: #6FC2FF;          /* Primary CTA buttons */
--cyan: #4DD4D0;                  /* Secondary accent, badges */
--light-blue: #5CB8E6;            /* Tertiary accent, banners */
--yellow: #FFD500;                /* Top banner, tags, accents */

/* Text & Borders */
--dark: #383838;                  /* Primary text, borders */
--medium-gray: #666666;           /* Secondary elements */
--light-gray: #E0E0E0;            /* Dividers, table borders */

/* Accent Colors */
--orange-primary: #FF9500;        /* Logo primary */
--orange-secondary: #FF6B00;      /* Logo secondary */
--coral: #FF6B6B;                 /* Error/warning states */
--pink: #FFB6C1;                  /* Decorative accents */

Color Usage Guidelines

Color Combinations

High Contrast Pairings:

• Yellow background (#FFD500) + Dark text (#383838)
• White background + Dark borders (#383838)
• Primary Blue (#6FC2FF) + Dark borders (#383838)

Semantic Colors:

• Success: Cyan (#4DD4D0)
• Warning: Yellow (#FFD500)
• Error: Coral (#FF6B6B)
• Info: Light Blue (#5CB8E6)

Typography

Font Families

/* Primary Font - UI Text */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

/* Secondary Font - Code Samples */
font-family: 'Monaco', 'Courier New', monospace;

Type Scale

Font Weight Guidelines

Typography Patterns

Heading Pattern:

<!-- Large Display Heading -->
<h1 class="text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tighter leading-none mb-8">
    MAKING BIG DATA FEEL SMALL
</h1>

<!-- Section Heading -->
<h2 class="text-5xl font-bold tracking-tight mb-16">
    WHY IT'S BETTER
</h2>

<!-- Subsection Heading with Description -->
<h2 class="text-5xl font-bold tracking-tight mb-3">
    WHO IS IT FOR?
</h2>
<p class="text-xl text-gray-600 mb-16">
    Analytics that works for everyone
</p>

Body Text Pattern:

<!-- Lead Paragraph -->
<p class="text-lg lg:text-xl max-w-4xl mb-10 font-medium leading-relaxed">
    DUCKDB CLOUD DATA WAREHOUSE SCALING TO TERABYTES
</p>

<!-- Regular Paragraph -->
<p class="text-lg leading-relaxed">
    Is your data all over the place? Start making sense...
</p>

<!-- Small Text -->
<p class="text-sm">Subscribe to MotherDuck news</p>

Text Decoration:

• Links use underline for emphasis
• All-caps text for: buttons, headings, labels, navigation
• Tracking adjustment: -tracking-tighter for large headings, tracking-widest for small labels

Spacing System

Base Spacing Scale

The design uses Tailwind's default spacing scale (1 unit = 0.25rem / 4px):

Component Spacing Patterns

Section Padding:

/* Standard Section */
padding: py-20 px-6              /* 80px vertical, 24px horizontal */

/* Compact Section */
padding: py-16 px-6              /* 64px vertical, 24px horizontal */

/* Hero Section */
padding: py-20 lg:py-28 px-6    /* 80px mobile, 112px desktop */

Container Max Width:

max-w-6xl   /* 1152px - Standard content */
max-w-7xl   /* 1280px - Wide content */
max-w-4xl   /* 896px - Narrow content, forms */
max-w-2xl   /* 672px - Very narrow, centered content */

Gap Spacing:

gap-2       /* 8px - Tight elements (window dots) */
gap-3       /* 12px - Form elements, checkboxes */
gap-4       /* 16px - Button groups, form rows */
gap-6       /* 24px - Grid items (small screens) */
gap-8       /* 32px - Navigation items */
gap-12      /* 48px - Card grid (medium) */
gap-16      /* 64px - Section elements */

Margin Spacing:

/* Heading Margins */
mb-2        /* 8px - Label to content */
mb-3        /* 12px - Subtitle to content */
mb-6        /* 24px - Small heading to content */
mb-8        /* 32px - Medium heading to content */
mb-16       /* 64px - Large heading to grid */

/* Element Margins */
mb-4        /* 16px - Paragraph to button */
mb-6        /* 24px - Form to submit */
mb-8        /* 32px - Icon to text */

步驟4: 構建原型html

為了驗證效果我們叫CC大哥，參考STYLE_GUIDE.md，實現一個四象限to-do list的.html原型。

中間省略我跟他對需求的過程，下方是CC實現的初稿👇

看起來平平無奇，甚至有點糟糕，什麼東西嘛這是？？🥸

別擔心！！ 別忘啦，所有的樣式信息，都在STYLE_GUIDE.md，我們可以繼續push CC迭代。

UI 迭代

1：叫替換一下header的顏色為style-guide.md裡面的黃色 
2：添加圖表統計功能

經過幾輪的迭代，我們得到了初版的效果

原文出處：https://juejin.cn/post/7569777676098814002