3分钟出设计稿?土木人说:这玩法我们也能抄

AI x DESIGN WORKFLOW

我家宝贝用AI做设计,我看呆了

从0到Figma源文件 | 全程提示词驱动 | 效率提升90%

今天上午,我家宝贝照常开工,录了一段工作分享视频。我看她在那儿跟AI聊了几句,几分钟就出了个完整的登录页——不是什么设计稿,是可交互的React页面。然后她让AI生成Figma插件,一键导入,暗黑+明亮双版本直接出来,图层全可编辑。说实话,我整个人都看傻了。

我的判断:AI负责搭建框架,省下90%的重复劳动;我们负责审核和精调,把精力花在真正有价值的判断上。这不是被替代,是进化。

工作环节传统流程AI协作流程时间对比
搭建页面框架2~4小时3~5分钟节省95%
绘制交互组件1~2小时自动生成节省100%
导入Figma手动重绘插件一键导入节省90%
精细化调整3~6小时局部微调节省70%
整体效率提升5~10倍
📌 正文详解 📌
🖥AI写代码+实时预览——我直接看傻了

几分钟出一个完整可交互的React登录页,比我之前手写快了不知道多少倍。

最让我意外的是,AI不只是生成了代码——它理解了设计意图。暗黑/明亮模式切换、表单验证、社交登录按钮,一个提示词全搞定。

AI Generated Code
import
React from ‘react’

const
LoginPage = () => {
return (
<div>
<input type=“email” />
<button>Sign In</button>
</div>
)
}
Welcome
email@example.com
••••••••
Sign In

AI生成代码并实时预览效果

1

选个模板,说人话就行 💡说人话就能出图,不需要学魔法

我家宝贝用了一个预设的设计类提示词模板,让AI生成基于React + Tailwind CSS的响应式登录页,参考Linear风格。门槛真的很低,不需要什么提示词工程。

2

AI先给你拆任务清单 💡不是盲干,先对齐再动手

AI自动把任务拆开:响应式断点怎么做、暗黑/明亮模式怎么切换、社交登录加哪几个、表单验证逻辑是什么——逐条列出来,看完没问题它才开始。

3

代码写完,右边直接看效果 💡当场验收,不满意当场改

代码生成的同时,右侧预览窗口实时展示登录页。暗黑/明亮模式切换、输入框交互全都能点。讲真,视觉还原度比我想象的高太多了。

📌 正文详解 📌
🔌Figma导入这个坑,AI这样绕过去了

AI说不能直接生成.fig文件,但给了个更好的方案——生成Figma插件代码。这种诚实让我反而更信任它。

直接生成.fig(不可行)

• AI无法生成二进制文件

• 技术上不可行

• 死路一条

生成Figma插件(可行)

• 生成manifest.json + code.js

• 本地保存,Figma直接导入

• 生成的图层全部可编辑

Plugin Files
manifest.json
code.js
ui.html
Bridge
Figma
Plugin API
createFrame()
Render
Design
Layers
Components

通过Figma插件架起代码与设计的桥梁

1

AI说不能,但给了解法 💡不装,直接给替代方案

我家宝贝问了AI能不能直接生成.fig文件,AI老实说不行——二进制格式搞不定。但紧接着它说:我可以帮你生成一个Figma插件。这个转折让我眼前一亮。

2

manifest.json + code.js,照着做就行 💡手把手教,不会也能跟上

AI把插件需要的核心文件都输出了,还附带操作指引:怎么保存、怎么在Figma里加载、怎么运行——一步一步,照着走就行。

📌 正文详解 📌
✨插件一跑——画布上的那一刻我真的服了

点一下运行,画布上瞬间蹦出两个完整的Frame——暗黑版+明亮版,图层全可编辑,设计规范全到位。

2个

自动生成Frame

100%

图层可编辑

90%

完成度

几秒

人工修复耗时

1

打开Figma → 插件 → 开发 → 从manifest.json导入

2

运行插件,点一下

3

画布上直接出来:暗黑模式Frame + 明亮模式Frame

4

检查图层——SVG图标能改、颜色变量到位、圆角规范正确

5

小瑕疵比如文字换行问题,自己调几秒就搞定

Login Page Generator — Figma Plugin
Layers
Frame: Dark
├ Card
├ Input x2
├ Button
├ Social Icons
Frame: Light
├ Card
├ Input x2
├ Button
Welcome
Welcome

Figma插件运行瞬间生成可编辑设计稿

📌 正文详解 📌
🎯说到底——设计师的角色该变变了

这不是AI会不会取代你的问题。是你会不会用AI,决定你值多少钱。

想想看,以前消耗你精力最多的活是什么?搭框架、调间距、画图标——恰恰是最低价值的部分。AI把这些接过去,你才能把脑子花在真正重要的事上。

📌 这套工作流谁用最香?

① UI设计师快速出原型,验证方向后再精调;② 产品经理自己撸交互稿,减少跟设计师的来回拉扯;③ 开发团队快速生成设计参考,前后端直接对齐;④ 小团队或独立开发者,一个人把设计+开发全扛了。

AI Builder
Frame
Code
Export
Designer
Review
Polish
5-10x Efficiency

人机协作:AI搭建框架,设计师精调把控

1

AI干活,我做决策 💡AI干苦力,人做判断

搭框架、写代码、生成组件、导出文件——这些重复活全丢给AI,几小时的事压缩到几分钟。我只管方向对不对、细节行不行。

2

设计师的价值不在手速,在判断力 💡把精力花在刀刃上

审美、用户体验、品牌一致性——这些东西AI搞不定。AI给你90分的框架,你用10%的时间推到100分。省下来的时间干什么?做更有创造力的活。

3

会用AI的人,不会被AI干掉 💡工具不是威胁,不会用才是

这个视频的主角不是WorkBuddy,是「人+AI协作」这件事。掌握这套打法的人,效率是传统路线的5到10倍。你选哪个?

📌 正文详解 📌
🏗回到我的老本行——土木工程能用AI干什么?

看完视频我第一反应不是「设计圈要变天」,而是「我这个行业也能这么干」。同样的AI协作逻辑,完全可以用到投标、施工、算量、建模上。

80%

施组编制提速

5x+

BIM建模提速

70%

进度计划提速

90%

算量自动化

传统施工
📐 蓝图手算
🏗️ 人工翻模
📋 纸质文档
AI
AI增强施工
🤖 自动算量
🏢 BIM + 数字孪生
📊 智能标书
自动配筋 智能投标 风险分析 BIM+AI Agent

AI增强的土木工程:从蓝图到数字孪生

1

施工组织设计,AI帮你搭框架 💡技术标编制效率提升80%

我每次编施组最烦的就是搭框架——施工部署、进度计划、资源配置,格式固定的重复活。现在AI能根据工程概况自动生成施组框架,我只需要审内容、调参数。原来3到5天的活,半天就能交稿。

2

钢筋算量,10分钟出初稿 💡精度高+速度快+不遗漏

AI读结构图纸,自动跑钢筋算量、配筋验算、料单生成。以前2到3天的算量活,现在10分钟出初稿,我重点审核关键节点就行。关键是——不会漏算。

3

投标报价分析,从拍脑袋到数据说话 💡决策有依据,不靠拍脑袋

AI自动解析招标文件、提取工程量清单、对比历史报价,直接出报价建议和得分模拟。就像AI给设计师生成90%的框架一样,投标团队也能拿到90%的分析基础。

4

CAD自动转BIM,碰撞检查一步到位 💡BIM建模效率提升5倍以上

类比AI生成Figma插件的思路——AI可以基于CAD图纸自动生成Revit BIM模型,跑管线碰撞检查、净高分析。我的角色从建模员变成模型审核者,这才是总工该干的事。

5

施工网络图,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——这才是真正的分水岭

👍 就点个赞  |  📁 收藏备用  |  📤 转发分享

END
经验交流
微信扫码关注公众号
undefined

© 版权声明
THE END
世界的尽头到了,喜欢就支持一下吧!
点赞129赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容