AI UI Product Designer 从参考图到可开发 UI

它不是重新发明产品，而是把参考图的视觉 DNA 迁移到你的产品主题上。默认先出一张高保真样张，确认后再锁定设计系统、扩展页面和交付代码。

$ ai-ui sample --ref 参考图 --theme 产品主题

下载 Skill

可输入：参考图、产品主题、目标端、页面数量、语言、是否延续上次风格。

1 先出样张

10 UI Surface

DNA 风格迁移

Lock 系统锁定

12 批量页面

Dev 开发交付

INPUTS

用户少填，也能继续生成

Skill 会把缺省项补齐：没有目标端就自动判断，没有参考图就先引导风格方向，不因为信息不完整卡住流程。

参考图

作为唯一视觉来源提取色彩、字体、组件、信息密度和品牌气质，但不复制 logo、文案和业务结构。

Visual DNANo Copy

产品主题

只定义用户要做什么产品，不借机增加无关业务逻辑，保证生成结果仍然像真实产品界面。

RealityScope

目标端

可显式指定 App、官网、SaaS、后台、电商、桌面工作台或海报；缺省时按语义自动判断。

MobileWebSaaS

输出偏好

页面数量默认 1 张，语言默认中文，并可选择是否延续上一次已经锁定的设计系统。

中文默认1 Sample

无图引导

用户没有参考图时，主动帮他描述风格方向、信息密度、色彩偏好和目标端约束。

Guided StylePrompt

通用协议

Codex、Claude Codex、Hermes 都能读取同一套 Markdown 协议，不绑定单一模型或私有格式。

PortableMarkdown

SAMPLE FIRST

先做一张用户满意的图

它默认不会一口气铺满十几张页面。先用一张核心验证页确认方向，降低后续多页面和开发交付的返工。

判断目标端

根据产品主题自动选择 Mobile、Website、SaaS、Admin、Desktop 或 Poster。

提取视觉 DNA

隐式反推颜色、字体、组件语言、圆角、阴影、间距、信息层级和气质。

生成核心验证页

按目标端生成一个真实可上线的高保真 UI 页面，而不是概念拼图。

等待确认

用户满意后才进入 Style Locked Mode，继续扩展多页面或开发产物。

sample-generation.log

request
theme: AI travel planning app
reference: uploaded image
surface: auto
pages: 1
language: zh-CN
style_lock: false

result
surface_detected: Mobile App
first_page: 首页 / Overview
output: high-fidelity UI sample
next: wait for approval

after approval
style_locked: true
summary: colors, type, radius, shadow, spacing, components
handoff: pages + states + code-ready specs

STYLE LOCK

确认后，锁定一份设计系统摘要

后续页面不再重新探索风格，只沿用已确认样张里的 tokens、组件和布局规则。

锁定项	摘要内容	扩展页面如何使用
Color Tokens	背景、Surface、Primary、Accent、文本、边框和状态色	不随机换色
Typography	Display、H1、H2、Body、Caption、Label 和数字样式	层级连续
Component Rules	导航、卡片、按钮、输入框、表格、图表、标签和空状态	组件复用
Layout Rules	栅格、间距、信息密度、视觉重心、导航结构和页面节奏	不风格漂移
Handoff Notes	可继续输出页面清单、组件边界、状态说明和前端实现建议	面向开发

5 分钟后，按规则生成 UI

复制调用提示词，或下载完整 Skill。给 agent 一个产品主题和参考图，就能先出高保真样张，再锁定设计系统继续开发。

下载 Skill