生成 UI 组件
帮用户快速生成一个即用的 UI 组件。
步骤
1. 确定组件类型
如果用户已经说了想要什么,直接开始。
如果没有,展示常用组件列表:
你想生成什么组件?常见的有:
- 导航栏(Navbar)
- 登录/注册表单
- 定价页(Pricing)
- 卡片列表(Cards)
- 页脚(Footer)
- 数据表格(Table)
- 弹窗/对话框(Modal)
- 侧边栏(Sidebar)
- 搜索框(Search)
- 通知栏(Notification)
- 上传区域(Upload)
- 评论区(Comments)
也可以直接描述你想要的。
2. 检查项目技术栈
查看项目中使用的前端框架和 UI 库:
- 有 React/Vue/Svelte → 生成对应框架的组件
- 有 Tailwind/Bootstrap → 使用对应的样式方案
- 什么都没有 → 生成纯 HTML + CSS
同时观察项目已有组件的代码风格,保持一致。
3. 生成组件
生成的组件必须:
- 可以直接复制到项目中使用
- 响应式布局,移动端友好
- 包含基本的交互状态(hover、active、disabled)
- 表单类组件包含基本的输入验证
- 代码简洁,不过度封装
4. 展示并确认
生成后告诉用户组件放在了哪里,以及如何使用。
询问是否需要调整:
组件已生成。需要调整样式、布局或功能吗?