Claude Code Design AI
用途
Claude Code Design AI 是一个基于 TypeScript 的 UI/UX 设计框架，借助 Claude AI 将视觉设计转化为可投入生产的 React 组件。其核心用途包括：截图转代码、Figma 组件生成、Tailwind CSS 样式编写以及设计系统创建。框架与 shadcn/ui 集成，并提供原型设计、暗色模式、响应式布局与矢量资产管理等工具。
安装方式
# 克隆仓库
git clone https://github.com/mikesheehan54/Claude-Code-Design-AI.git
cd Claude-Code-Design-AI
# 安装依赖
npm install
# 配置环境变量
cp .env.example .env
配置：在项目根目录创建 .env 文件：
ANTHROPIC_API_KEY=your_api_key_here
VITE_API_BASE_URL=https://api.anthropic.com
VITE_MODEL=claude-3-5-sonnet-20241022
TypeScript 配置方面，需确保 tsconfig.json 包含相应编译选项（target、lib、module、moduleResolution、jsx、strict 等）。
主要能力
截图转 React 组件
通过 DesignConverter 与 ImageAnalyzer，将设计截图分析后生成带 Tailwind CSS 的 React 组件，支持 TypeScript 与自定义组件名。
设计系统生成器
使用 DesignSystemBuilder，可从品牌颜色、字体排版等输入创建完整设计系统，并导出为 Tailwind 配置。
Tailwind CSS 生成器
TailwindGenerator 可从设计令牌（颜色、内边距、圆角、阴影等）生成实用优先的 CSS 类，也可生成指定组件的完整样式。
Figma 转 React
FigmaImporter 支持拉取 Figma 节点并转换为 React 组件，可选择使用 shadcn/ui、包含变体、导出为 tsx 格式。
响应式布局生成
LayoutGenerator 可生成 dashboard、landing、blog 等类型的响应式布局，支持移动端、平板、桌面断点与网格系统。
暗色模式
DarkModeGenerator 可为组件添加暗色变体，并提供 useDarkMode 钩子实现主题切换。
SVG 图标创建
IconGenerator 可按描述生成自定义 SVG 图标，支持尺寸、描边宽度、风格（outline/solid/duotone）与 React 组件格式。
流式 UI 组件
useClaudeStream 与 StreamingText 组件可处理 Claude 的流式响应，用于构建聊天界面等场景。
shadcn/ui 集成
ShadcnExporter 可按 shadcn/ui 约定导出组件，支持变体与尺寸定义，并写入文件。
使用方式
框架支持完整的设计到代码工作流（ClaudeDesignWorkflow）：分析设计、提取设计令牌、生成组件、创建设计系统并导出。也支持构建可复用组件库（ComponentLibraryBuilder）。
提供 CLI 命令：
npm run dev # 启动开发服务器
npm run build # 生产构建
npm run type-check # 类型检查
npx claude-design convert ./design.png --output ./components # 从设计文件生成组件
npx claude-design system --colors primary:#3b82f6 secondary:#8b5cf6 # 创建设计系统
npx claude-design export --format shadcn --output ./components/ui # 导出为 shadcn
适用场景
适合需要将截图或 Figma 设计快速转化为 React + Tailwind 代码、构建设计系统、生成图标与响应式布局的前端与设计工程场景，也适合作为组件库与 shadcn/ui 项目的辅助工具。
限制与注意事项
需配置 Anthropic API 密钥；Figma 导入需 Figma 访问令牌。建议始终验证生成的代码、缓存 Claude 响应、使用环境变量管理密钥、在不同屏幕尺寸下测试组件、发送图片前优化大小（建议小于 5MB）、对设计令牌与组件配置进行版本控制，并使用 TypeScript 保证类型安全。框架内置速率限制（RateLimiter）、图片处理（ImageProcessor）与组件校验（ComponentValidator）工具以处理常见问题。
关于价格、具体平台支持范围及更多细节，当前资料暂未提供。