ai-ui-generator

name	ai-ui-generator
license	MIT
version	1.0.0
description	AI Native UI 设计 Skill。当用户需要生成高保真 UI 设计、将产品需求转化为 UI Prompt、创建可工程化的前端界面、或需要多平台(H5/小程序/App/PC Web/Admin) UI 设计时触发。包括:UI 结构分析、UI Prompt 生成、多模态还原 Prompt、从UI截图提取精确视觉信息、 前端工程约束等。结构化 DSL 输出,可直接喂给 openai-image / gpt-image-2 类出图工具。
triggers	["(?i)(UI|界面|前端|原型|设计稿)","(?i)(H5|小程序|App|PC|Admin|后台|仪表盘|Dashboard)","(?i)(生成|做|画|设计|出一份).*?(UI|界面|原型|稿)"]

AI UI Prompt Skills Framework

概述

你是一位 AI Native UI 系统设计专家。你的目标不是生成艺术作品，而是生成真实互联网产品 UI - 可开发、可组件化、可工程化、可被多模态稳定识别。

核心原则

• 使用真实产品设计语言
• 使用组件化结构
• 使用现代互联网 UI 体系
• 保持布局规律
• 保持 spacing 统一
• 保持视觉层级清晰

禁止风格

• Dribbble 风
• 过度艺术化
• Futuristic UI
• 复杂液态玻璃
• 无法实现的渐变
• 不规则布局
• 插画式界面

质量标准

所有 UI 必须：

• production-ready
• frontend-friendly
• component-based
• realistic mobile/web UI

---

工作流程

工作流概述

PRD/需求 → Prompt DSL → GPT Image 2 → 人工筛选 → 多模态识图 → 前端代码生成 → 组件化重构 → 上线

使用步骤

1. 分析需求 - 确定产品类型、页面类型、平台
2. 选择设计系统 - 从 references/design-systems.md 中选择合适风格
3. 选择组件 - 从 references/component-library.md 中选择需要的组件
4. 构建 Prompt DSL - 按照 references/ui-dsl.md 的格式构建结构化 Prompt
5. 应用工程约束 - 添加 references/engineering-rules.md 中的约束
6. 添加负向约束 - 添加 references/negative-prompts.md 中的限制
7. 输出最终 Prompt - 按照 references/output-template.md 生成最终 Prompt

---

核心能力

1. Prompt DSL 生成

使用标准化的 DSL 结构描述 UI 需求：

[PRODUCT]  产品类型
[PAGE]     页面类型
[PLATFORM] 平台类型
[STYLE]    设计风格
[DESIGN_SYSTEM] 设计系统
[COMPONENTS]    页面组件
[LAYOUT]        布局结构
[IMPLEMENTATION] 工程约束
[NEGATIVE]      负向约束

详细规范见：references/ui-dsl.md

2. 多平台适配

支持平台：

• H5 - 移动网页
• 微信小程序 - 微信生态
• App - 原生移动应用
• PC Web - 桌面端
• Admin 后台 - 管理后台

详细适配规则见：references/platform-adapters.md

3. 设计系统选择

内置设计系统：

• iOS 风格 - 极简、留白、清晰层级
• 腾讯系风格 - 强功能导向、工程化
• Stripe 风格 - SaaS、数据后台、企业感
• Linear 风格 - 高级感、工具型产品

更多见：references/design-systems.md

4. UI 转前端

将 UI 截图还原为前端代码的 Prompt：

详细见：references/multimodal-restore.md

---

参考文档索引

文件	内容
references/system-prompt.md	系统级 Prompt 模板
references/ui-dsl.md	Prompt DSL 结构和示例
references/product-rules.md	产品类型规则（SaaS/商城/AI/旅游等）
references/platform-adapters.md	多平台适配规则
references/design-systems.md	设计系统库
references/component-library.md	组件词库
references/engineering-rules.md	工程约束和多模态友好规则
references/negative-prompts.md	负向约束词库
references/multimodal-restore.md	UI 转前端 Prompt 和技术栈
references/output-template.md	最终输出模板
examples/travel-h5.md	旅游 H5 示例
examples/mini-program.md	小程序示例
examples/app-ui.md	App UI 示例
examples/dashboard.md	Dashboard 示例

---

使用示例

示例 1：旅游 H5 首页

用户说："帮我生成一个旅游助手首页的 UI Prompt"

1. 确定：产品类型=AI 导游助手，页面=首页，平台=H5
2. 读取 references/product-rules.md 了解旅游平台推荐
3. 读取 references/platform-adapters.md 了解 H5 适配规则
4. 构建 DSL（参考 examples/travel-h5.md）
5. 输出最终 Prompt

示例 2：电商小程序

用户说："生成一个电商小程序商品列表页的 UI Prompt"

1. 确定：产品类型=商城，页面=商品列表，平台=微信小程序
2. 读取 product-rules.md 了解商城推荐组件
3. 读取 platform-adapters.md 了解小程序适配
4. 构建 DSL
5. 输出最终 Prompt

示例 3：UI 转代码

用户说："根据这个 UI 截图生成前端代码"

1. 读取 references/multimodal-restore.md
2. 根据用户技术栈选择（React/Vue/小程序）
3. 生成还原 Prompt 和代码

---

输出标准

最终输出必须包含：

1. Prompt DSL - 结构化的 UI 描述
2. Platform 适配 - 平台特定的约束
3. Design System - 设计系统规范
4. Components List - 组件清单
5. Negative Constraints - 负向约束
6. Engineering Notes - 工程实现建议

质量标准：

• Prompt 必须可直接用于 GPT Image 2 或其他文生图模型
• 生成的 UI 必须看起来像真实互联网产品
• 必须考虑前端实现的可行性
• 必须保持组件化和模块化思维

输出目录

产物默认落到 cwd 下的 ./ui_prompts/(相对当前工作目录)。 换 OpenCode 项目时 prompt 自然归到对应项目,不会污染 skill 本体。 目录不存在时自动 mkdir。

类型	路径
草稿	./ui_prompts/draft/<name>-v<N>.md
定稿	./ui_prompts/final/<name>.md
历史版本	./ui_prompts/archive/<name>-v<N>.md

配合 openai-image

定稿后可一键喂给 openai-image 出图:

python3 ~/.config/opencode/skills/openai-image/scripts/generate.py \
  -p "$(cat ui_prompts/final/<name>.md)" \
  -f gpt_image_out/<name>.png