全球首创 Design System 生成 UI: 从产品到商业化
Ugic 上线首月实现 $3162 收入、付费率达到 3.48%，我从 0 到 1 完成了产品与商业化落地。
LLM 驱动，基于 Design System 生成 UI 设计稿
背景
2024 年前后，设计稿生成始终存在一个核心问题：生成结果难以与实际产品保持一致。在这一背景下，Ugic 应运而生。Ugic 基于 Figma 内的设计系统生成设计稿，从源头保证界面与产品组件和风格的一致性。在项目中，我负责产品到商业的全链路构建。
Mobile&Web 生成结果展示
核心界面设计
生成设计稿 Workflow 架构图
架构要点：需求与 Design System 先经模型整理成可核对的页面结构，再按页生成 DSL，工程校验组件与素材后写入 Figma；用分层流水线替代「一次画完整稿」，便于控成本与排错。
优化 Workflow 降低 90% 成本
在能力侧跑通后，我们发现生成一个设计稿要 $1/page。如果产品定价在 $9 美元，要保证不亏的情况下，只能给用户开放 9 个 Drafts 的生成额度。在真实工作中这点额度是不 work 的。对此，我通过优化 workflow 实现了成本优化，最终将成本降低至 $0.1/page。
$1/page 生成思路
页面先被拆成多个模块，每个模块单独调一次生成；且每次调用都带着完整组件库上下文。调用次数多、单次上下文又极大，token 很快堆到一页约 $1。
$0.1/page 生成思路
把生成粒度提到页面级：先做完页面级整理与组件筛选，再每个页面只调一次生成，且只注入该页真正用到的组件。调用次数与重复上下文一起降下来，单页约 $0.1。
定价策略与成本测算
实现细节
如何提高设计稿中的组件调用率
1. 向生成内容结构的 AI 提供裁剪后的组件库信息
来自 Figma 的原始组件库字段非常多，会占掉大量 token。我们只把组件的 name 与 id 提供给生成内容结构的 AI，用最少必要信息让它知道「真实组件库里到底有哪些组件」。
2. 要求输出真实的 id 与 name
当生成内容结构的 AI 提出组件需求时，必须写出真实的组件 id 与 name，不能只用「要一个按钮 / 导航栏」这类描述。
3. 生成设计稿的 AI 按需接收组件库信息
生成设计稿的第二个 AI 不会再接收整份组件库。而是会根据第一个 AI 组件清单按需注入。
{
"pages": [
{
"sections": [
{ "name": "header" },
{
"sectionUI": "The content must match the received information without omissions or fabrications. At least 50 words"
}
],
"components": [
{ "key": "17:10587", "type": "Button", "nodeType": "COMPONENT" }
]
}
]
}DSL 结构设计
<dsl_spec> 按 Figma nodeType 映射成 AI 与 Canvas 共用的中间 Schema（规避非公开、与前端非一一对应的 Figma 内部表示），并扩展 img / icon 以支持图标注入与按关键词出图。面向落地时，DSL 还包含布局容器（div / childrenLayout）、Design System component、Typography（h1–p）等字段约定。下列为规范节选（与原图一致，每条一行 JSON，便于解析）。
<dsl_spec>
{"t":"div","n":"name","w":"390","h":"auto|number|fill","r":"border-radius(optional)","f":"background-color(optional, Hex format,)","sw":"border-width(optional)","sf":"border-color(optional)","sd":"box-shadow(optional)","childrenLayout":{"display":"flex","flexDirection":"row|column|row-reverse|column-reverse","justifyContent":"space-between|flex-start|center|flex-end","gap":"integer","alignItems":"flex-start|center|flex-end","padding":"[top, right, bottom, left]"},"children":[{"t":"div","n":"","w":"auto|number|fill","h":"auto|number|fill","childrenLayout":{"display":"","flexDirection":"","justifyContent":"","gap":"","alignItems":"","padding":""}},{"t":"img","w":"number|fill","h":"number|fill","n":"avatar/product image","r":"border-radius(optional)","imgKeywords":"Briefly describe imgKeywords based on the context."},{"t":"icon","w":"number","h":"number","n":"The icon name is obtained from the website https://tabler.io/icons. For example:star"}]}
{"t":"component","key":"original 'key' value in COMPONENTS","n":"component name","w":"auto|number|fill","h":"auto|number|fill","nodeType":"original 'nodeType' value in COMPONENTS","characters":[{"type":"original 'type' value in COMPONENTS","characterValue":"Detailed, demand-matching and meaningful text content"}],"images":[{"type":"original 'type' value in COMPONENTS","imgKeywords":"Briefly describe imgKeywords based on the context."}]}
{"t":"h1|h2|h3|p","cs":"Detailed, demand-matching and meaningful text content","textAlign":"left|right|center(Left is usually used)","w":"auto|number|fill (recommended to use fill or auto.) ","h":"auto|number|fill (recommended to use fill or auto.) ","fw":"font-weight","fs":"font-size","f":"color"}
{"t":"img","w":"number|fill","h":"number|fill","n":"avatar/product image","r":"border-radius(optional)","imgKeywords":"Briefly describe imgKeywords based on the context."}
{"t":"icon","w":"number","h":"number","n":"The icon name is obtained from the website https://tabler.io/icons. For example:star"}
</dsl_spec>项目管理
上线后成果
上线后用户好评
Product Hunt #3
