全文速览
兰亭妙微ui设计公司分享：AI 设计工程化，核心是从交付静态设计稿，升级为直接交付可落地的工程代码，尤其适配页面结构标准化、组件高度复用的 B 端业务场景。整套工作流有 5 个关键转变：
- 交付物革新：不再输出设计稿，直接产出工程代码，消除设计到开发的二次翻译损耗
- 流程自动化：把设计师与 IDE 反复沟通的环节沉淀为 SOP‑Skill，降低人工交互成本
- 质量设计驱动：按照「业务流程→页面框架→组件复用→全局样式」的设计思维组织 Skill，引导 AI 生成符合业务逻辑的页面
- 规范分层维护：Design Token、布局、基础组件统一托管；各业务线独立维护业务专属规范，避免上下文膨胀
- 设计师把控质量：AI 是加速器，标准页面目标达成 80‑90% 提效，但模型幻觉与能力边界客观存在，设计师不能缺位质量校验
一、背景：AI 时代，B 端设计师还只能输出设计稿吗？
随着大模型快速普及，很多团队都在尝试用 AI 提升设计产能，但 AI 对不同类型需求的价值截然不同：
- 标准型需求：页面结构固定、组件复用率高、视觉自由度低、业务链路稳定，AI 理解效果最好，适合规模化提效；
- 定制 / 创意型需求：无统一范式、高度依赖业务定制，AI 更多用于发散思路、启发创意，很难直接产出终版交付物。
以淘宝闪购商家 B 端推广业务为例，业务月均 20 个需求，72% 都属于标准型页面，需求密度高、重复模式多，非常适合落地 AI 设计提效。这也抛出一个行业思考题：AI 浪潮下，设计师的产出是否可以跨过设计稿，参与到代码落地环节？本次实践就是围绕这个命题展开的实战探索。
二、技术选型：为什么选择 AI 设计工程化？
市面上 AI 赋能 UI 一共有 4 条主流实现路径，彼此核心差异在于最终交付产物：
表格
| 方案 |
代表工具 |
工作流特点 |
| AI 设计工具 |
DoneAI、FigmaMake |
需求→思考→输出 HTML / 设计稿→工程二次实现→设计走查 |
| IDE+HTML |
Qoder、Cursor |
需求→思考→输出 HTML→工程二次实现→设计走查 |
| AI 设计工程化 IDE+Skill+React |
Qoder、Cursor |
需求→思考→直接输出 React 工程代码 |
| 自建 Agent 平台 |
- |
按需定制方案，整体实现成本极高 |
重点区分：HTML 更偏向模型输出的 “效果图”，而 React 工程代码是可直接参与项目迭代的真实产物。
AI 设计工程化两大核心优势
- 强标准化：设计师交付产物直接对接业务代码库，研发可直接复用，省去设计稿、HTML 到工程代码的二次转译环节；
- 高效降沟通成本：规避标注、切图等重复劳动，页面还原度接近 100%，设计‑研发之间的还原走查沟通趋近于零。
三、落地全流程：完整跑通 AI 设计工程化
整套落地分为五大阶段：
- 前期准备：安装基础 Skill、业务流程 SOP‑Skill；
- 仓库准备：创建设计代码仓库，创建业务开发分支；
- 业务理解：输入 PRD 并转为结构化文档，确认 AI 对业务理解无误；
- 一键生成设计：依据 PRD 与 Skill 驱动 AI 生成页面，完成双重 AI 校验，人工验收页面效果；
- 推送交付：推送代码至目标分支，完成构建，交付可用代码与设计产物。
四、落地两大核心难点与解法
难点 1：全新协作模式，设计师能力边界发生变化
传统模式设计师输出效果图，而 AI 工程化模式下，设计师需要触达下游实现环节，完成从 “交付图纸” 到 “交付代码” 的转变。实践中设计师会额外承担约 30% 原属于前端的工作，带来两类痛点：
- 不熟悉全新工作流，不知道如何推进项目；
- 高度依赖设计师与 IDE 多轮对话，反复调试，整体效率偏低。
✅ 解决方案：联动研发沉淀SOP‑Skill，把完整流程固化，实现流程自动化，降低普通设计师上手门槛，提升工程部署效率。
难点 2：AI 生成质量不可控，如何稳定输出？
核心思路：用设计师的思考逻辑定义 Skill，搭建高质量生成框架，沉淀可复用经验。
- 内容层：复刻设计师思维路径 设计师处理需求的完整链路：理解业务→梳理业务流程→确定页面框架→选用对应组件→对齐全局样式规范。把这套链路抽象为「业务流程‑页面框架‑组件使用‑全局样式」四步，作为 Skill 的底层逻辑，同时调研多款 AI‑UI 工具，摸清模型能力边界。
- 框架层：轻量简洁原则 初期设想父子嵌套多层 Skill，但是层级复杂会干扰 AI 理解。最终收敛为单设计 Skill，遵循轻量、渐进式信息披露的设计原则。
- 资产共建维护机制，规避上下文爆炸 不把所有业务规范塞进同一个 Skill，避免文件膨胀。
- 统一维护：Design Token、布局规则、基础组件、基础模板这类通用资产；
- 业务规范：交由各业务设计师独立维护，各司其职，兼顾通用性与业务差异化。
五、业务数据结果与未来展望
针对 B 端推广标准页面，本次实战拿到明确提效结果：
- 设计侧整体提效 51%：其中设计输出环节提效 40%，还原走查环节提效 90%；随着设计资产持续完善、设计与前端持续磨合，标准页面还有更大提升空间；
- 研发侧整体提效 38%：研发无需手写样式代码，可以聚焦后端业务逻辑；代码输出环节提效 25%，走查还原环节提效 90%。
团队长期目标：标准型页面实现80‑90% 设计提效，持续迭代优化。同时需要客观看待 AI 的局限：受限于模型能力与幻觉问题，现阶段无法完全替代设计师，质量把关依旧必须由人完成。
新模式对设计师的能力新要求
- 更体系化的设计思维：跳出感性经验，学会分层拆解业务与界面；
- 更全栈的产品能力：向前做架构设计，向后掌握基础代码认知，实现自我闭环；
- 主动解决问题意识：不能被动等待研发排期，主动保障业务最终用户体验。
AI 是强大加速器，而非替代者。设计工程化不是让设计师写前端，而是让设计资产真正以代码形态流入产品生产链路。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
