AI-Wiki

文档概览

原文记录作者试用 QoderWork Design Desk 的过程。作者将其定义为“AI Native 设计工作台”与“设计 Agent”，认为它让不熟悉 UI 设计或软件开发的人也可通过自然语言、选择与可视化编辑制作带交互和动效的网页项目。文章围绕三个层面展开：一是产品官网和高中物理 3D 实验室两个生成案例；二是画布直接编辑、框选修改和全局设计参数调整三种效率机制；三是以 lusion.co 为对象的复杂动效复刻测试及其局限。原文还将该产品定位为 AI 驱动的“设计即代码”工具，并据此讨论传统设计、研发交接流程及 UI、前端岗位可能受到的影响。后者是作者个人判断。

关键事实

产品定位与使用体验

原文把 QoderWork 的 Design Desk 称为“设计 Agent”，并称其为 AI Native 设计工作台。
作者自述为后端程序员、略懂前端但不懂 UI 设计；其核心痛点是能完成有前端的复杂功能项目，却难以做出“高级感”和交互动效。
作者称，借助 Design Desk 在约 20 分钟内完成一个产品官网页面；其描述自己主要在关键节点作选择，未大量手动编写实现。此为个人体验，非统一性能基准。
作者称使用过程中可在画布上快速调整页面中不满意的设计部分及颜色、边框、间距等细节。

产品官网案例

作者给出的官网需求要求为一家音响公司制作产品网站，并明确指定：

使用 React、Tailwind CSS 与 Framer Motion 实现动画。
将产品作为“雕塑”呈现；以交互可视化声音，而非采用花哨噱头。
通过滚动呈现材质与工程设计。
使用 Lenis 或 locomotive-scroll 等技术实现流畅滚动。
所有交互元素具备微交互，网站完全响应式。
参考 Transparent Speaker、Bang & Olufsen、Sonos、Teenage Engineering，并要求达到 Awwwards 级别。
作者称第一版已具备较好效果，随后添加 tripo-3d-generation 图片转 3D Skill；先以 GPT-image2 设计产品图，再让 QoderWork 将图片转为 3D 产品模型，并替换到网页中。
对同一提示词的对比中，作者主观认为 Codex 也能生成不错的效果，但视觉结果不如 Design Desk。原文没有给出可复现的评分标准、提示词完整版本、代码或客观评测数据。

高中物理 3D 实验室案例

作者用一句不含软件开发术语的自然语言需求测试产品：设计供高中教学互动使用的 3D 科学实验室 App，要求 3D 模型可交互、可依据鼠标展示不同角度，并呈现高中物理中的电磁学和原子物理内容。

Agent 没有直接开始生成，而是先追问若干问题，以进一步明确需求。
在追问之后，Agent 先生成设计计划供用户确认；作者称计划包含交付物、技术方案确认、页面结构、交互设计与风险评估。
作者认可“先对齐、再计划、最后执行”的流程，认为它有助于提高一次命中率、减少反复重做，并使 Agent 的生成质量更稳定。
经确认后，案例生成了带 3D 交互的完整 React + Vite 前端工程文件。
原文将此与 Claude Design 对比，称其“据作者所知”当时只能输出 HTML；该竞品能力描述未在原文中进一步核验。
作者请一位前端从业者查看部分文件，对方评价其规范性不错、符合大部分前端工程师的编写习惯。这是有限样本的主观评价。

重要细节

三项主要效率机制

原文归纳的三项效率提升围绕同一个目标：在生成完成后，以简单、快速、精准的方式调整页面，避免等待 Agent 再次执行或用自然语言费力定位目标。

无限画布直接调整：页面显示在无限画布中，用户可直接手动调整元素的颜色、位置、间距、边框和字体等视觉属性，且实时生效；作者将其与通过对话描述修改、等待 AI 再运行的方式对比。
框选后定向修改：用户在画布中框选目标内容，再告诉 Agent 如何修改，而非以“导航栏左上角的按钮”等文字反复定位组件。
关键设计决策参数化：产品将配色、间距、圆角和字号等高频、全局性的设计决策暴露为可调参数；用户可拖拽调整并实时预览，作者称甚至无需刷新即可看到效果。

作者认为全局修改若完全经由对话完成，不仅需要等待，还可能导致代码被改坏；这一风险是原文的经验性判断。

设计即代码与模板

原文认为 QoderWork 与腾讯此前的 Figma 类云端设计工具有本质区别：后者核心仍是云端协作的矢量设计，而前者被定位为原生 AI 驱动的设计即代码工具。
作者据此提出，传统“纯画图设计师”与“纯写页面前端”的界限正在坍塌，设计文件会成为团队成员可共同维护的视觉资产；这是趋势判断。
原文称产品内置 150 多个高品质风格参考。作者认为模板让风格更可控，可帮助“有审美但难以做出来”的用户。
这一工作流可与 Design Agent 工作流、AI 原生设计工作台关联理解：由自然语言输入、需求澄清、计划确认、工程生成和画布迭代构成连续流程。

lusion.co 极限复刻测试

作者选取 lusion.co 作为“动效审美天花板”级别的极限测试对象，强调其页面翻动伴随复杂、丝滑的 3D 变换。
作者明确认为，目前没有 AI 能一次性百分之百复现该网站前端。
作为参照，作者称其在 1 月曾让 Kimi 的 Agent 复刻该网站，效果约为 30%；本次对 QoderWork 的主观估计接近 50%。这些百分比没有定义评价维度或评测方法，不能视为标准化测量。
原文指出 QoderWork 当时缺少视觉能力，无法直接观看 lusion.co 的录屏，因此可能对目标效果产生理解偏差。
对特别复杂的 3D 场景和连续滚动动效，产品偶尔会卡顿；生成代码也并非每次都能直接运行，有时仍需要手动调试。
作者将上述不足放在“第一个版本”的产品阶段中评价，仍认为其已达到不错程度。

其他工作台功能

原文提及 QoderWork 自定义工作台还包括 PPT 工作台和写作工作台，但未展开完整测试。
对 PPT 工作台，作者称每页演示稿是独立 HTML 文件，内置多种中文字体，断网也能渲染；全流程有 11 个阶段，用户可在每阶段介入。作者主观认为效果不错，并称其已赶上某开源 PPT Skill。
对写作工作台，原文描述“选中即批注”：用户圈选一段文本后给出“改得更正式”或“压缩到100字以内”等要求，AI 可围绕被选中的文本定向修改。

作者的结论与边界

作者认为 Design Agent 解决了自己“做不好看”的问题的一大半，并能降低非专业用户制作界面和前端项目的门槛。
同时，原文并未主张专业设计师失去价值；作者明确表示，这类工具只是抬高所有人在 UI 设计和前端制作上的“下限”，专业 UI 设计师使用后可达到更高“上限”。
作者以传统流程为背景：产品确定原型、UI 出图、前端再实现，中间存在沟通成本和开发周期；文中称传统设计到代码的视觉还原度“普遍不足 70%”，单页面传统交接往往经历 3 至 5 轮标注与返工。原文没有给出这些数字的出处、样本范围或统计方法。
关于“UI 和前端越来越危险”“自己能做出产品官网就不必请专业 UI 和前端”等说法，是作者基于自身体验提出的职业焦虑与观点，不构成对行业就业、生产率或岗位替代的事实证明。
作者给出的应对建议是：一，拥抱 AI，成为“行业 + AI”的复合型人才；二，叠加 AI、技术、营销、内容等技能，使自身更稀缺。这些属于职业发展建议。

体验完阿里首款Design Agent,我开始替UI 前端焦虑了..摘要