文生 UI

文生 UI 功能让你通过自然语言描述界面需求，由 AI 生成对应的 UI 设计稿，大幅降低从零开始设计的门槛。

功能简介

输入文字描述 → AI 理解语义与布局需求 → 生成可编辑的 UI 设计稿

适用场景：

快速生成页面原型，用于需求评审
探索设计方向，产出多种方案对比
生成 UI 组件变体（不同状态、配色）
创建用户画像（User Persona）

操作步骤

打开设计文件，点击工具栏「AI」图标
在 AI 助手面板输入设计需求描述
点击发送，等待 AI 生成（通常 15~45 秒）
生成结果出现在画布上，可直接编辑

提示词编写技巧

好的提示词能显著提升生成质量：

包含的要素

[页面类型] + [核心功能] + [视觉风格] + [具体内容]

示例：

设计一个移动端登录页面，包含手机号输入框、验证码输入框和登录按钮，
使用简约风格，主色调为蓝色，底部有微信、QQ 第三方登录选项

电商 App 商品详情页，包含商品图片轮播、商品名称、价格、规格选择
（颜色/尺码）、加入购物车和立即购买按钮，参考 iOS 设计规范

提示词建议

建议	示例
明确平台	"移动端"、"PC 端"、"iPad"
指定风格	"简约"、"Material Design"、"iOS 风格"、"卡片式"
描述布局	"顶部导航栏"、"底部 Tab 栏"、"左侧菜单"
列举元素	"包含搜索框、筛选按钮、列表卡片"
说明配色	"主色蓝色"、"暗色主题"、"白色背景"

生成结果编辑

生成的设计稿完全可编辑：

修改文字内容和样式
调整颜色、填充、描边
重新排列图层位置
替换占位图片
应用设计系统中的组件

用户画像生成

AI 助手支持快速生成用户画像（User Persona）：

在 AI 面板输入：创建一个用户画像，目标用户是 25-35 岁的职场女性
AI 生成结构化的用户画像卡片，包含：
- 基本信息（年龄、职业、地点）
- 目标与动机
- 痛点与需求
- 技术使用习惯

注意事项

文生 UI 生成结果每次可能不同，可多次生成选择最佳结果
生成的文字内容为占位符，需根据实际需求替换
复杂的动效和交互逻辑超出生成能力范围，需手动搭建