# AI UI Generator

> AI Native UI 设计 Skill。当用户需要生成高保真 UI 设计、将产品需求转化为 UI Prompt、创建可工程化的前端界面、或需要多平台(H5/小程序/App/PC Web/Admin) UI 设计时触发。包括:UI 结构分析、UI Prompt 生成、多模态还原 Prompt、从UI截图提取精确视觉信息、 前端工程约束等。结构化 DSL 输出,可直接喂给 openai-image / gpt-image-2 类出图工具。

- Skill: `gszyboy/ai-ui-generator` (Agent Skill, multi-file: 15 files)
- Install (CLI): `npx skillmds@latest add gszyboy/ai-ui-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gszyboy/ai-ui-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- License: MIT
- Author: gszyboy (https://skillmd.com/u/gszyboy)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gszyboy/ai-ui-generator

---


# 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

---

## 工作流程

### 工作流概述

```text
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 需求：

```text
[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 出图:

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