ai-ui-generation - AI 辅助 Web UI 生成与集成工作流
使用外部工具进行 AI 辅助 Web UI 生成与集成的工作流
标签
更新于: 2026-05-09能力
典型输入
典型输出
该技能可以做什么
- 使用外部 AI 工具生成 UI
- 将生成的代码导入代码库
- 将线框图转换为应用结构
- 将截图转换为应用结构
- 优化导出的 HTML/CSS
- 将原型集成到 React
- 将原型集成到 Next.js
- 将生成的 UI 绑定到真实数据
- 将原型输出适配到模板系统
- 创建 UI 架构蓝图
- 编写生成提示词
- 创建集成计划
- 使用真实结构重构代码
- 使用状态钩子重构代码
- 创建 QA 检查清单
- 将导出内容导入应用模块
- 拆分单体标记为组件
- 用 props 替换内联字面量
- 用 state 替换内联字面量
- 用 tokens 替换内联字面量
输入
- 截图
- 线框图
- 设计系统
- CSS 技术栈
- 布局模式
- 品牌限制
- 排版
- 现有代码库
- React 应用
- Next.js 应用
- Vue 应用
- 服务器模板
- Tailwind
- CSS 模块
- 原生 CSS
- 数据模型
- 后端 API 端点
- 用户流程
输出
- UI 架构蓝图
- 生成提示词
- 集成计划
- 重构代码
- 生产就绪组件
- 状态钩子
- QA 检查清单
- 响应式布局
- 响应式 QA 报告
要求
- 外部 AI UI 生成工具访问
- React
- Next.js
- Vue
- 服务器模板引擎