Tailwind CSS 的原子类风格让 AI 如鱼得水——Claude Code 能直接生成完整、可用的 UI 组件，不需要你懂每个 class 的含义。本文演示如何通过对话快速构建现代 UI。
项目初始化
bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install tailwindcss @tailwindcss/vite
claudeConfigure Tailwind CSS for this Vite + React + TypeScript project.
Update vite.config.ts, create tailwind.config.ts with content paths,
add Tailwind directives to src/index.css.
快速生成组件
现代导航栏
Create a responsive navigation component (src/components/Navbar.tsx):
- Logo on the left
- Nav links in center (Home, Features, Pricing, Docs)
- CTA button on right (Get Started)
- Mobile hamburger menu
- Frosted glass effect (backdrop-blur)
- Sticky on scroll
Use Tailwind CSS only, no external UI libraries.
Hero Section
Create a hero section (src/components/Hero.tsx):
- Gradient background (purple to blue)
- Large headline with gradient text effect
- Subtitle text
- Two CTA buttons (primary filled, secondary outlined)
- Subtle animated background particles (CSS animation only)
- Fully responsive (mobile/tablet/desktop)
定价卡片
Create a pricing section (src/components/Pricing.tsx):
- 3 pricing tiers: Free, Pro ($29/mo), Enterprise (custom)
- Pro tier highlighted with border and badge
- Feature list with checkmarks
- Hover effects on cards
- Toggle for monthly/annual billing (annual 20% off)
数据表格
Create a data table component (src/components/DataTable.tsx):
- Sortable columns (click header to sort)
- Search/filter input
- Pagination (10 rows per page)
- Row hover highlight
- Loading skeleton state
- Empty state with illustration placeholder
- TypeScript generic: DataTable<T extends object>
深色模式
Add dark mode support to all components:
1. Add darkMode: 'class' to tailwind.config.ts
2. Create a ThemeToggle component with sun/moon icons
3. Use localStorage to persist preference
4. Update all components to use dark: variants
(e.g., bg-white dark:bg-gray-900, text-gray-900 dark:text-white)
动画效果
Add smooth animations using Tailwind + CSS:
1. Fade-in on scroll (IntersectionObserver + opacity/translate transition)
2. Button hover: scale-105 with shadow
3. Card hover: translateY(-4px) with shadow-lg
4. Loading spinner using animate-spin
5. Skeleton loading with animate-pulse
对话式迭代调整
这是用 Claude Code 做 UI 最大的优势——直接用自然语言调整设计：
The Navbar looks good but:
1. Make the background more transparent (lower opacity)
2. Add a subtle bottom border on scroll
3. Make the CTA button use gradient (from purple-600 to blue-600)
4. Increase spacing between nav links
For the Hero section:
- The gradient is too dark, make it lighter
- Add a mockup/screenshot placeholder below the CTAs
- The animation is too fast, slow it down to 3 seconds
- On mobile, hide the particle animation for performance
从设计稿还原
I have a Figma design. Here's the description:
- Card with 24px padding, 12px border-radius
- Background: #1a1a2e, border: 1px solid rgba(255,255,255,0.1)
- Title: 20px semibold white, subtitle: 14px gray-400
- Action button: full width, gradient from #7c3aed to #2563eb, 48px height
Create this as a React component using Tailwind CSS.
生成完整页面
Create a complete SaaS landing page (src/pages/Landing.tsx)
combining all components: Navbar + Hero + Features(6 items) + Pricing + Footer.
Make it production-ready with proper SEO meta tags.
The overall color scheme should be purple/violet primary.
时效对比
| 组件 | 手写时间 | Claude Code |
|---|---|---|
| 响应式 Navbar | 2-3 小时 | 3 分钟 |
| 定价卡片 | 1-2 小时 | 2 分钟 |
| 数据表格（含排序） | 4-6 小时 | 5 分钟 |
| 完整 Landing 页面 | 1-2 天 | 15 分钟 |
来源：Anthropic 官方文档 + Tailwind CSS 官方文档