Web UI 构建器

根据视觉描述或图像参考，自动生成完整的前端页面代码。固定技术栈：React 19 + Vite 8 + Tailwind CSS 4 + lucide-react。

技术栈

Tailwind CSS 4 注意事项

Tailwind CSS 4 采用 CSS 驱动的配置方式，无需 tailwind.config.js 或 postcss.config.js：

/* src/index.css — 替代 tailwind.config.js + postcss */
@import "tailwindcss";

/* 自定义主题色 */
@theme {
  --color-brand-50: #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;
}

/* 自定义组件类 */
@layer components {
  .card { @apply rounded-xl bg-white p-6 shadow-sm border border-gray-100; }
  .btn-primary { @apply rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 transition-colors; }
}

主要变更点：

• @tailwind base/components/utilities → @import "tailwindcss"
• 自定义主题使用 @theme 指令，替代 tailwind.config.js 中的 theme.extend
• 自定义组件使用 @layer components
• 无需 postcss.config.js（由 Vite 内置处理）
• 无需在 tailwind.config.js 中配置 content

package.json 依赖项

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "lucide-react": "^1.17.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^latest",
    "tailwindcss": "^4.0.0",
    "vite": "^8.0.0"
  }
}

项目结构

project/
├── package.json
├── vite.config.js
├── index.html
└── src/
    ├── main.jsx          # React 入口文件
    ├── index.css         # @import "tailwindcss" + @theme 自定义主题
    ├── App.jsx           # 根组件
    ├── LoginPage.jsx     # （按需生成）登录页
    ├── DashboardPage.jsx # （按需生成）仪表盘页
    ├── Sidebar.jsx       # （按需生成）侧边栏
    ├── Header.jsx        # （按需生成）页眉
    └── ...               # （按需生成）其他组件

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

工作流

用户输入（描述/图像）→ 提取功能模块 → 组装骨架 + 内容模块 → 生成文件 → 返回目录结构 + 启动命令

组件驱动策略

不预设页面类型，而是从用户描述中识别 功能模块，并按需动态组合：

骨架组件（按需生成）

内容模块（按需生成）

规划方法

1. 从用户描述中提取功能关键词 → 匹配对应模块
2. 按布局顺序排列模块（从上到下、从左到右）
3. 为每个模块单独生成组件文件
4. 主页面组件组合所有模块

示例：

• "一个带侧边栏、统计卡片和数据表格的仪表盘" → Sidebar + StatsCards + DataTable
• "一个带邮箱/密码输入框及渐变背景的登录页" → FormSection(login) + background decoration
• "一个带顶部导航和卡片网格的产品展示页" → TopNav + CardGrid + Footer

生成规范

样式约定

• 全部使用 Tailwind CSS 4 的工具类，通过 index.css 中的 @theme 自定义调色板
• 默认主题色：靛青色（indigo）/ 紫罗兰色（violet）
• 圆角半径：卡片使用 rounded-xl，按钮与输入框使用 rounded-lg
• 阴影：卡片统一使用 shadow-sm
• 图标：全部来自 lucide-react

代码标准

• 使用函数式组件，JSX 语法
• 对各模块区域添加注释说明
• 占位图使用：https://images.unsplash.com/photo-{id} 或 picsum.photos

响应式设计

• 侧边栏：桌面端固定宽度 240–280px；移动端隐藏 / 折叠为汉堡菜单
• 内容区：响应式布局，最大宽度 max-w-7xl 并居中
• 卡片网格：使用 grid-cols-1 md:grid-cols-2 lg:grid-cols-3

注意事项

• 不生成 node_modules/ 目录
• 启动命令：npm install && npm run dev
• Tailwind CSS 4 不使用 tailwind.config.js 或 postcss.config.js
• 所有图标均来自 lucide-react，不引入外部付费图标库
• 使用模拟数据（mock data），不发起真实 API 请求