用 WorkBuddy 做 UI 设计：从0到1出稿完整教程
这篇文章就手把手带你走一遍完整流程——从一句话需求到可交付的设计稿，全程零基础可上手。
50%
50%
一、准备工作
二、实战：一句话生成登录页面
我们以最常见的登录页面为例，完整走一遍设计流程。
第 1 步：发起任务
在 WorkBuddy 对话输入框中输入：
帮我设计一个移动端登录页面，包含 Logo、手机号输入框、密码输入框、登录按钮，底部有「注册账号」和「忘记密码」链接。风格：简洁、科技蓝为主色调。
点击发送，WorkBuddy 开始分析需求并生成设计稿。
第 2 步：等待生成
系统自动在画布上创建页面，包括：
•
顶部 Logo 区域
•
手机号输入框（带图标）
•
密码输入框（带图标）
•
主登录按钮（蓝色）
•
底部注册 / 忘记密码链接
整个过程约 10-30 秒，无需手动拖拽任何组件。
第 3 步：查看与调整
设计稿生成后，你可以直接在画布上修改：
•
改文字：双击输入框文字，直接编辑
•
改颜色：选中元素，在右侧属性面板调整颜色值
•
调整间距：拖拽元素或修改边距参数
•
替换 Logo：上传自己的 Logo 图片替换占位图、
第 4 步：导出交付
设计稿确认后，可以将页面导出为图片，直接用于：
•
产品需求文档
•
汇报 PPT
•
开发参考图
进阶技巧
用「参考图」生成设计
如果你已经有一张参考图或竞品截图，可以直接让 WorkBuddy 参考它生成：
参考这张图，帮我生成一个类似的个人中心页面
上传图片后，WorkBuddy 会分析视觉风格、布局结构，生成风格相近的新设计稿。
迭代修改
不需要重新生成整个页面，直接对话式修改：
•
"把主色调改成绿色"
•
"登录按钮放大一点，加圆角"
•
"在顶部加一个轮播图 Banner"
组合组件复用
设计完成后，你可以把按钮、输入框、卡片等常用组件保存下来，后续新页面直接复用，越用越顺手。
总结
用 WorkBuddy 做 UI 设计，最大的感受就是：快。
以前出一个页面设计稿，至少要半小时到一小时；现在一句话几秒钟就出了初稿，再花几分钟微调就能交付。对于产品经理快速验证想法、创业者低成本出图、开发同学画个简单界面，都非常实用。
一句话总结：
你负责想，WorkBuddy 负责画。