一键生成高保真交互原型教程
效果展示
设计
设计工作台是 QwenWork 自定义工作台的首个细分领域模式——一个 AI 原生的"设计即代码"画布：用自然语言（或语音）描述需求，就能在无限画布上获得可运行、可编辑、可交付的设计产物。
不同于以"云端协作矢量编辑"为核心的传统设计工具，设计工作台把成果物视为团队共同维护的代码资产：从第一步起设计师与研发就操作同一份可运行文件，设计产物可以一键交付，省去设计到代码之间的有损交接。
使用场景
工作原理
设计工作台通过三个机制重构了 AI 生产设计的流程：
•
Questions——输入不足时 Agent 先追问对齐意图，而非猜测执行，把无效迭代降到最低。
•
Design Plan——Agent 在生成前会在 计划 标签下输出结构化设计计划（布局、风格、内容层级），经你确认后才执行。
•
Nudge——生成后，配色、间距、圆角等关键决策以可调参数暴露，无需重新描述就能微调。
工作区
右侧画布提供 5 个标签：
#ctKWFGMNEIwU text { white-space: pre; }#ctKWFGMNEIwU .fb0 { stroke: var(--N900-FG, 0.15); }#ctKWFGMNEIwU .fb0 {stroke: rgba(31,35,41, 0.15)}#ctKWFGMNEIwU .fx0 { stroke-miterlimit: 10; }#ctKWFGMNEIwU .fx0 {stroke-miterlimit: 10}#ctKWFGMNEIwU .fa1 { fill: rgb(187, 191, 196); }#ctKWFGMNEIwU .fa1 {fill: rgb(187, 191, 196)}#ctKWFGMNEIwU .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ctKWFGMNEIwU .fx1 {font-style: normal}#ctKWFGMNEIwU .fx2 { text-anchor: middle; }#ctKWFGMNEIwU .fx2 {text-anchor: middle}#ctKWFGMNEIwU .fx3 { dominant-baseline: central; }#ctKWFGMNEIwU .fx3 {dominant-baseline: central}#ctKWFGMNEIwU .fx4 { stroke: none; }#ctKWFGMNEIwU .fx4 {stroke: none}#ctKWFGMNEIwU .fc0 { fill: var(--text-caption); }#ctKWFGMNEIwU .fc0 {fill: #646a73}#ctKWFGMNEIwU .fa2 { fill: var(--text-link-disabled); }#ctKWFGMNEIwU .fa2 {fill: rgb(187, 191, 196)}#ctKWFGMNEIwU .fa3 { fill: rgb(229, 229, 229); }#ctKWFGMNEIwU .fa3 {fill: rgb(229, 229, 229)}#ctKWFGMNEIwU .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ctKWFGMNEIwU .fx5 {font-style: normal}#ctKWFGMNEIwU .fx6 { text-anchor: start; }#ctKWFGMNEIwU .fx6 {text-anchor: start}#ctKWFGMNEIwU .fx7 { dominant-baseline: alphabetic; }#ctKWFGMNEIwU .fx7 {dominant-baseline: alphabetic}#ctKWFGMNEIwU .fc1 { fill: rgb(0, 0, 0); }#ctKWFGMNEIwU .fc1 {fill: rgb(0, 0, 0)}#ctKWFGMNEIwU .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ctKWFGMNEIwU .fx8 {font-style: normal}#ctKWFGMNEIwU .fb1 { fill: var(--N900-FG, 0.15); }#ctKWFGMNEIwU .fb1 {fill: rgba(31,35,41, 0.15)}#ctKWFGMNEIwU .fb2 { fill: rgb(216, 216, 216); }#ctKWFGMNEIwU .fb2 {fill: rgb(216, 216, 216)}#ctKWFGMNEIwU .fa4 { fill: var(--bg-body); }#ctKWFGMNEIwU .fa4 {fill: #fff}AB123456标签画布设计文件预览风格参考计划用途无限画布，Agent 在这里生成与编辑画布背后的工程文件把设计当作真实界面预览运行效果查看和切换设计当前使用的风格参考Agent 生成前所依据的结构化设计计划
创建设计
切换到设计工作台
在 QwenWork 首页底部输入框点击工作台切换器（默认 通用），选 设计。
说明
默认工作台可以在 QwenWork 设置里调整——主要在设计场景里工作时，把"设计"设为默认更顺手。
描述需求
用自然语言或语音描述需求，尽量明确目的、关键模块和调性，例如："设计一个高保真的 AI 产品官网首页，包含品牌导航、强主标题、产品价值说明、主 CTA、辅助 CTA、产品界面预览和客户信任信息。整体现代、可信、精致。"
选择风格参考、固定工作目录（可选）
输入框下方有一行工作台可选项：选择工作目录、自动选择风格参考、保真度、组件库。
•
点击 自动选择风格参考 在生成前先锁定整体调性——保持 自动选择风格参考 让画布从 161 个参考中自动挑选；也可以选择 Airbnb、Airtable、Apple、Carbon、Cloudscape 等具体风格，顶部搜索框可按名称过滤。
•
点击 选择工作目录 可把任务绑定到本地一个目录——Agent 会把设计的工程文件落到该目录下，方便长期维护并与 Qwen IDE 协同。
•
点击 保真度 可在 线框图（先梳理低保真结构，尽量减少视觉样式）与 高保真（使用接近最终交付的视觉设计与细节样式，默认）之间切换。
•
点击 组件库 选择目标组件库——默认 不指定组件库（HTML-first，除非需求里明确要求 React 或其他框架）；也可以从 shadcn/ui、Spark Design、Ant Design 三个 React 组件库中选一个，Agent 会基于所选库生成。
选择直接运行或进入设计计划
提交后，Agent 会先理解需求、做一轮简短的分析（你可以在左侧的 深度思考 中看到推理过程），随后给出 进入设计规划 的决策卡，并列两个按钮：
•
直接运行：跳过澄清与计划，Agent 用现有上下文直接落到画布。适合需求已足够明确，或只想先快速看到效果的场景。
•
进入：开启设计计划模式——Agent 会先问问题、再写 Design Plan，确认后才生成。复杂或高保真项目推荐走这条路径。
回答 Agent 的澄清问题
进入设计计划模式后，Agent 会在 Questions 标签下结构化追问——目标用户、产品定位、保真度、品牌资产等，每题给几个备选项并支持「其他（请填写）」自由输入。回答能让计划贴合实际场景；想跳过细化，可点击底部的 AI 自行决定。
确认设计计划
Agent 接着在 计划 标签下输出 Design Plan：开头是设计意图与视觉方向，再是 契约 面板（产物 / 平台 / 输出 / 组件库 / 保真度 / 风格）和 产物 列表（每个文件的目标说明）。审核无误点 运行计划；如需调整，点 要求修改 让 Agent 重写。
查看画布生成过程
Agent 在 画布 上生成。左侧面板会以 深度思考 形式实时显示推理过程，画布上每一个组件落位后即时更新。
预览运行效果
切换到 预览，把设计当作真实界面交互——点击 CTA、查看 hover 状态、走查导航流。
继续迭代
不需要从头重写需求，迭代直接在原画布上进行。
•
追加任务：在底部输入框继续追加指令，Agent 会在当前步完成后接着处理。
•
打断当前生成：输入框旁的停止按钮可以中断正在进行的生成。
•
画布上圈选并标注：选择某一区域，告诉 Agent 改什么——它会基于画面上下文调整，而不是整体重新生成。
•
Nudge 微调关键参数：生成后配色、间距、圆角等以可调参数暴露，无需重新描述就能微调。
•
中途切换模型：输入框旁的模型下拉（例如 标准 / 旗舰）可以为下一步切换模型。
•
直接编辑工程文件：进入 设计文件 检查或编辑源码，必要时切到代码层处理。
说明
Agent 会保留完整的对话上下文，所以"保留布局，但把 hero 区配色调暗、CTA 加宽"这种就地迭代可以精确改动现有画面。
典型场景
产品落地页
代码块
Plain Text
设计一个 SaaS 产品的落地页，面向企业用户。
包含：顶部导航、hero 区（大标题 + 副标题 + 主 CTA）、
三列产品优势、客户 logo 条、定价对比表、底部 CTA 和 footer。
风格：干净、留白多、使用冷色调。
营销视觉套件
代码块
Plain Text
为一场线上产品发布会设计一套营销视觉素材：
1. 16:9 宣传 Banner（标题 + 倒计时 + 二维码区域）
2. 方形社媒配图（适合朋友圈和微博）
3. 活动落地页（包含议程、嘉宾、报名入口）
统一使用品牌色 #1A73E8，现代科技风格。
Dashboard 重设计
代码块
Plain Text
重新设计一个数据分析 Dashboard。
包含：侧边栏导航、顶部筛选器栏、核心指标卡片（4 个）、
折线趋势图、环形分布图、数据表格。
风格参考 Linear，暗色主题，信息密度高但层次清晰。