AI x DESIGN WORKFLOW
我家宝贝用AI做设计,我看呆了
从0到Figma源文件 | 全程提示词驱动 | 效率提升90%
我的判断:AI负责搭建框架,省下90%的重复劳动;我们负责审核和精调,把精力花在真正有价值的判断上。这不是被替代,是进化。
| 工作环节 | 传统流程 | AI协作流程 | 时间对比 |
|---|---|---|---|
| 搭建页面框架 | 2~4小时 | 3~5分钟 | 节省95% |
| 绘制交互组件 | 1~2小时 | 自动生成 | 节省100% |
| 导入Figma | 手动重绘 | 插件一键导入 | 节省90% |
| 精细化调整 | 3~6小时 | 局部微调 | 节省70% |
| 整体效率 | — | — | 提升5~10倍 |
几分钟出一个完整可交互的React登录页,比我之前手写快了不知道多少倍。
最让我意外的是,AI不只是生成了代码——它理解了设计意图。暗黑/明亮模式切换、表单验证、社交登录按钮,一个提示词全搞定。
AI生成代码并实时预览效果
选个模板,说人话就行 💡说人话就能出图,不需要学魔法
我家宝贝用了一个预设的设计类提示词模板,让AI生成基于React + Tailwind CSS的响应式登录页,参考Linear风格。门槛真的很低,不需要什么提示词工程。
AI先给你拆任务清单 💡不是盲干,先对齐再动手
AI自动把任务拆开:响应式断点怎么做、暗黑/明亮模式怎么切换、社交登录加哪几个、表单验证逻辑是什么——逐条列出来,看完没问题它才开始。
代码写完,右边直接看效果 💡当场验收,不满意当场改
代码生成的同时,右侧预览窗口实时展示登录页。暗黑/明亮模式切换、输入框交互全都能点。讲真,视觉还原度比我想象的高太多了。
AI说不能直接生成.fig文件,但给了个更好的方案——生成Figma插件代码。这种诚实让我反而更信任它。
直接生成.fig(不可行)
• AI无法生成二进制文件
• 技术上不可行
• 死路一条
生成Figma插件(可行)
• 生成manifest.json + code.js
• 本地保存,Figma直接导入
• 生成的图层全部可编辑
通过Figma插件架起代码与设计的桥梁
AI说不能,但给了解法 💡不装,直接给替代方案
我家宝贝问了AI能不能直接生成.fig文件,AI老实说不行——二进制格式搞不定。但紧接着它说:我可以帮你生成一个Figma插件。这个转折让我眼前一亮。
manifest.json + code.js,照着做就行 💡手把手教,不会也能跟上
AI把插件需要的核心文件都输出了,还附带操作指引:怎么保存、怎么在Figma里加载、怎么运行——一步一步,照着走就行。
点一下运行,画布上瞬间蹦出两个完整的Frame——暗黑版+明亮版,图层全可编辑,设计规范全到位。
2个
自动生成Frame
100%
图层可编辑
90%
完成度
几秒
人工修复耗时
打开Figma → 插件 → 开发 → 从manifest.json导入
运行插件,点一下
画布上直接出来:暗黑模式Frame + 明亮模式Frame
检查图层——SVG图标能改、颜色变量到位、圆角规范正确
小瑕疵比如文字换行问题,自己调几秒就搞定
Figma插件运行瞬间生成可编辑设计稿
这不是AI会不会取代你的问题。是你会不会用AI,决定你值多少钱。
想想看,以前消耗你精力最多的活是什么?搭框架、调间距、画图标——恰恰是最低价值的部分。AI把这些接过去,你才能把脑子花在真正重要的事上。
📌 这套工作流谁用最香?
① UI设计师快速出原型,验证方向后再精调;② 产品经理自己撸交互稿,减少跟设计师的来回拉扯;③ 开发团队快速生成设计参考,前后端直接对齐;④ 小团队或独立开发者,一个人把设计+开发全扛了。
人机协作:AI搭建框架,设计师精调把控
AI干活,我做决策 💡AI干苦力,人做判断
搭框架、写代码、生成组件、导出文件——这些重复活全丢给AI,几小时的事压缩到几分钟。我只管方向对不对、细节行不行。
设计师的价值不在手速,在判断力 💡把精力花在刀刃上
审美、用户体验、品牌一致性——这些东西AI搞不定。AI给你90分的框架,你用10%的时间推到100分。省下来的时间干什么?做更有创造力的活。
会用AI的人,不会被AI干掉 💡工具不是威胁,不会用才是
这个视频的主角不是WorkBuddy,是「人+AI协作」这件事。掌握这套打法的人,效率是传统路线的5到10倍。你选哪个?
看完视频我第一反应不是「设计圈要变天」,而是「我这个行业也能这么干」。同样的AI协作逻辑,完全可以用到投标、施工、算量、建模上。
80%
施组编制提速
5x+
BIM建模提速
70%
进度计划提速
90%
算量自动化
AI增强的土木工程:从蓝图到数字孪生
施工组织设计,AI帮你搭框架 💡技术标编制效率提升80%
我每次编施组最烦的就是搭框架——施工部署、进度计划、资源配置,格式固定的重复活。现在AI能根据工程概况自动生成施组框架,我只需要审内容、调参数。原来3到5天的活,半天就能交稿。
钢筋算量,10分钟出初稿 💡精度高+速度快+不遗漏
AI读结构图纸,自动跑钢筋算量、配筋验算、料单生成。以前2到3天的算量活,现在10分钟出初稿,我重点审核关键节点就行。关键是——不会漏算。
投标报价分析,从拍脑袋到数据说话 💡决策有依据,不靠拍脑袋
AI自动解析招标文件、提取工程量清单、对比历史报价,直接出报价建议和得分模拟。就像AI给设计师生成90%的框架一样,投标团队也能拿到90%的分析基础。
CAD自动转BIM,碰撞检查一步到位 💡BIM建模效率提升5倍以上
类比AI生成Figma插件的思路——AI可以基于CAD图纸自动生成Revit BIM模型,跑管线碰撞检查、净高分析。我的角色从建模员变成模型审核者,这才是总工该干的事。
施工网络图,AI自动排关键线路 💡进度计划编制效率提升70%
输入工程内容和工序逻辑,AI自动生成双代号网络图、关键线路分析和进度计划表。就像视频里AI理解设计规范一样,AI也理解施工工序的前后逻辑。
📝 总结提醒
1. WorkBuddy用自然语言就能生成完整可交互的React登录页
2. AI搞不定.fig文件,但生成Figma插件代码——效果更灵活
3. 插件跑一下,暗黑+明亮双版本Frame直接出来,图层全可编辑
4. 完成度90%,人工微调几秒搞定,整体效率提升5到10倍
5. 核心逻辑:AI搭框架,人做审核,角色从执行者变决策者
6. 回到土木——施组框架/钢筋算量/报价分析/BIM建模/进度计划,都能用AI协作提速
7. 别问AI会不会取代你,问自己会不会用AI——这才是真正的分水岭
👍 就点个赞 | 📁 收藏备用 | 📤 转发分享
































暂无评论内容