设计系统 AI 化的组织变革:设计师与工程师如何重新分工协作
设计系统 AI 化的组织变革设计师与工程师如何重新分工协作一、引子设计师和工程师的翻译层正在消失传统设计-开发协作模型中有一层翻译工作——设计师出设计稿Figma/Sketch工程师把设计稿翻译成代码。这个翻译层消耗了大量时间也是设计稿和上线效果不一样的根源。AI UI 生成正在把这层翻译自动化。一个 Figma 设计稿扔进 Galileo AI3 分钟出一版代码。这意味着协作模型中翻译这个环节从人工变成了半自动。设计师和工程师的工作边界需要重新界定。二、AI 生成代码的边界“从设计稿生成代码”并不等于设计和开发之间不再需要沟通。生成工具通常能识别颜色、间距和常见布局却不知道一个按钮点击后应写入什么状态、失败时怎样恢复、权限不同的用户能否看到它。它也不会天然理解组件在多个产品中的复用边界。因此团队需要把交接物从一张静态设计稿改成一组可检查的约束组件状态有哪些、哪些内容可编辑、空数据如何呈现、移动端如何折行、键盘如何操作以及哪些字段属于敏感信息。设计师提供这些约束工程师将其落实为组件 API、测试和数据模型。AI 可以加快第一版实现但不能替代这层约定。三、把流程改成短反馈回路不要让 AI 在一个大需求里连续生成几十个页面再集中评审。更稳妥的方式是选择一个高频组件做试点例如筛选面板或用户卡片设计师先给出状态和 Token工程师限定技术栈与数据接口工具生成候选代码双方在同一天完成视觉、交互和可访问性检查。试点通过后再把可复用的 Prompt、组件模板和检查项放进仓库。这会留下可追踪的记录哪类需求适合生成哪些问题会反复出现生成结果是否真的减少了返工。没有这些记录所谓效率提升很容易只是把沟通时间挪到后面的修复阶段。四、新分工模式设计师的新角色常规页面的重复标注可以减少但复杂状态和交互仍需要明确说明。设计师的工作会更集中在设计语言定义者维护设计 Token、交互规范、动画语言。这些是 AI 的设计约束。设计质量审查者AI 生成的代码需要设计师确认设计意图是否被正确传达。这比标注参数更接近设计师的核心能力。Prompt 策略师将设计意图转化为 AI 可理解的 Prompt 约束。这是新的技能树。工程师的新角色重复样式可以交给工具起草但生成的 CSS 仍要经过工程审查。工程师的重点会转向上移架构决策组件拆分粒度、状态管理方案、性能策略变得更加重要。这些是 AI 做不了的。下移AI 代码审查成为新任务——审查 AI 生成代码的类型安全、性能影响、可访问性。横向搭建 AI 工具链——Prompt 模板维护、CI 集成、质量门配置——成为新的工程领域。可以减少、但不能默认省掉的工作重复的尺寸标注可以由 Token 和检查工具承担常规 CSS 可以由工具起草再由工程师核对结构和可访问性有分歧的交互仍应回到用户任务和测试结果而不是只看生成效果五、协作流程建议01. 设计师在 Figma 中定义组件 Token设计意图→ 02. 提交到 AI 生成流水线 → 03. AI 生成代码 视觉差异报告 → 04. 设计师审核视觉还原度 → 05. 工程师审核代码质量和性能 → 06. 合并 自动化测试通过 → 07. 部署上线六、上线前的共同检查每次由 AI 参与的界面变更建议至少检查设计 Token 是否被复用加载、空态和错误态是否存在表单是否有 label、焦点和错误提示窄屏及长文案是否溢出生成代码是否绕过既有权限、埋点和组件规范。把这份清单放到 PR 模板里比依赖某次评审更可靠。团队还应明确生成代码的归属谁对合并后的质量负责、谁维护 Prompt 模板、发现视觉回归后由谁修复。没有责任边界工具只会增加一条难以追溯的交接链。先把这些小问题定下来协作效率才会稳定下来。工具的版本、输入素材和关键约束也应随 PR 记录。出现问题时团队需要能够复现当时的生成条件而不是靠记忆猜测是哪一次操作引入了差异。七、结论设计-开发协作中的翻译层正在被 AI 自动化设计师角色上移定义设计语言 → 审查设计意图 → 管理 Prompt 策略工程师角色分化架构决策上移 AI 代码审查新领域 工具链搭建横向可以自动化重复标注和样式初稿但状态、权限和可访问性仍需人工确认协作模型更接近“设计师和工程师共同定义约束再共同审核生成结果”

相关新闻

STM32外部中断实战:从轮询到事件驱动的按键处理与调试

STM32外部中断实战:从轮询到事件驱动的按键处理与调试

1. 项目概述:从“轮询”到“中断”的思维跃迁 在嵌入式开发或者单片机编程的初期,我们最习惯的模式可能就是“轮询”。比如,你想知道一个按键是否被按下,最常见的做法就是在一个 while(1) 的死循环里,不断地去读取那…

2026/10/27 16:30:51 阅读更多 →
椎间盘退变研究核心体外模型:武汉云克隆大鼠纤维环细胞五大产品优势

椎间盘退变研究核心体外模型:武汉云克隆大鼠纤维环细胞五大产品优势

椎间盘退变(IVDD)是腰背痛、腰椎间盘突出症的核心诱因,纤维环细胞(Annulus Fibrosus Cells, AFC)作为椎间盘外围纤维环唯一功能细胞,负责合成型胶原与蛋白多糖,承受脊柱拉伸、剪切力学负荷&…

2026/10/27 16:30:48 阅读更多 →
200字爆款标题创作指南与SEO优化技巧

200字爆款标题创作指南与SEO优化技巧

1. 如何写出吸引眼球的200字文章标题写文章标题看似简单,实则大有学问。一个好的标题能在200字内精准传达文章核心,吸引读者点击阅读。作为从业十余年的内容创作者,我总结出一套行之有效的标题创作方法论。1.1 标题的核心功能标题的首要任务是…

2026/10/24 2:50:46 阅读更多 →

最新新闻

Electron桌面应用开发实战:从环境搭建到打包发布全流程

Electron桌面应用开发实战:从环境搭建到打包发布全流程

做前端这些年,我大部分时间都在跟浏览器标签页打交道,直到第一次把桌面应用跑起来,才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词,最开始是在某段时间频繁出现在同事的讨论里,一个用HTML…

2026/10/26 12:00:21 阅读更多 →
滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

简介:亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档,主要面向智能锁安装人员、终端用户及售后维护者,帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件,大小4.37MB,内容结构清晰&#xff…

2026/10/27 4:06:49 阅读更多 →
PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统,整车要求空载跑到8m/s,电机转速已经拉到额定点,驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令,转速纹丝不动,三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/10/27 7:21:53 阅读更多 →
C++核心知识点:从内存管理到STL的实战指南

C++核心知识点:从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年,用它写过嵌入式驱动、做过游戏服务端,也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词,我其实挺感慨的——这门语言的难点从来不是语法多,而是知识点之间的耦合太深…

2026/10/26 12:00:21 阅读更多 →
T109滑盖智能锁怎么装?安装调试与故障排查全攻略

T109滑盖智能锁怎么装?安装调试与故障排查全攻略

简介:亚太天能T109滑盖智能锁产品说明书以PDF格式发布,适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开,先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能,再给出完整安装步骤&…

2026/10/27 6:20:47 阅读更多 →
LLM知识降熵:从信息垄断到理解权下放

LLM知识降熵:从信息垄断到理解权下放

你有没有过这种经历:翻开源码注释、论文摘要或者一份专业报告,每个字都认识,连在一起却像天书。想找人聊聊,身边要么没人懂,要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型,几秒钟之后&a…

2026/10/27 4:06:50 阅读更多 →

日新闻

周新闻

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/27 13:55:19 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/27 7:21:50 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/26 8:34:37 阅读更多 →