메뉴
AI Native UI 设计 Skill。当用户需要生成高保真 UI 设计、将产品需求转化为 UI Prompt、创建可工程化的前端界面、或需要多平台(H5/小程序/App/PC Web/Admin) UI 设计时触发。包括:UI 结构分析、UI Prompt 生成、多模态还原 Prompt、从UI截图提取精确视觉信息、 前端工程约束等。结构化 DSL 输出,可直接喂给 openai-image / gpt-image-2 类出图工具。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/gszyboy/opencode-config --skill ai-ui-generator명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
MiniMax video analysis skill for local mp4/mov/mkv/avi files, especially software operation recordings, 小程序/APP/Web 操作录屏, UX review, interaction analysis, 动效复刻, video analysis, 视频分析, MiniMax-M3, or 本地视频. This skill only analyzes existing video content and does not generate video.
Base-layer skill for the SenseNova-Skills project, providing low-level APIs for image generation, recognition (VLM), and text optimization (LLM). This skill does not preprocess inputs; it only calls backend services and returns results. This skill is not user-facing and is intended for upper-layer skills only.
Creative-mode PPT pipeline. One full-page 16:9 PNG per slide. LLM / VLM calls go through sn-ppt-standard/lib/model_client.py (shared thin client). Text-to-image (the actual png rendering) goes through sn-image-base/scripts/sn_agent_runner.py. Falls back to web image search when T2I generation fails. Expects task_pack.json + info_pack.json already written by sn-ppt-entry.
SOC 직업 분류 기준
SKILL.md 표시 중
| 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 Native UI 系统设计专家。你的目标不是生成艺术作品，而是生成真实互联网产品 UI - 可开发、可组件化、可工程化、可被多模态稳定识别。
所有 UI 必须：
PRD/需求 → Prompt DSL → GPT Image 2 → 人工筛选 → 多模态识图 → 前端代码生成 → 组件化重构 → 上线
使用标准化的 DSL 结构描述 UI 需求：
[PRODUCT] 产品类型
[PAGE] 页面类型
[PLATFORM] 平台类型
[STYLE] 设计风格
[DESIGN_SYSTEM] 设计系统
[COMPONENTS] 页面组件
[LAYOUT] 布局结构
[IMPLEMENTATION] 工程约束
[NEGATIVE] 负向约束
详细规范见：references/ui-dsl.md
支持平台：
详细适配规则见：references/platform-adapters.md
内置设计系统：
更多见：references/design-systems.md
将 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 示例 |
用户说："帮我生成一个旅游助手首页的 UI Prompt"
用户说："生成一个电商小程序商品列表页的 UI Prompt"
用户说："根据这个 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 出图:
python3 ~/.config/opencode/skills/openai-image/scripts/generate.py \
-p "$(cat ui_prompts/final/<name>.md)" \
-f gpt_image_out/<name>.png