Appearance
Claude Code和Figma协作:小团队AI设计的真实痛点与解法
没有规矩,不成方圆。AI省下来的时间,最终还是会转嫁到其他地方。
痛点一:和开发同事怎么协作?
小团队背景:对接1个前端、2个后端,没有UI设计师。
踩过的坑:
| 尝试方案 | 结果 |
|---|---|
| AI出原型demo,截图给前端 | 还原度差一点 |
| 把demo代码给前端copy效果 | 效率提升有限 |
| 直接git拉代码,创建分支改 | ✅ 速度最快 |
推荐方案:直接从git创建新分支,在分支上修改页面效果。
前提是你能直接和老板沟通想要的效果,在分支上直接改样式。小团队的产品与开发之间,这种协作方式效率最高。
痛点二:如何让AI设计出想要的效果?
设计是很主观的。手搓页面时直接在Figma里调就行,但和AI沟通"具象的描述"非常费时间。调一版不对,调一版很丑——这个环节AI反而拉低了效率。
实战经验:Figma链接喂给Claude
踩坑:直接把整个Figma文件链接(右上角分享链接)喂给Claude,效果不好——文件里东西太多了,Claude抓不住重点。
解法:把单个Page的链接单独喂给Claude。比如你想用某个文件里的字号规范,应用到自己网站里,那就把这个页面的链接喂给Claude。
效果比全部喂好得多——AI改得更细致。
推荐做法:
1. 找到Figma文件中你想要的规范Page
2. 复制该Page的单独链接
3. 喂给Claude Code,附上你的修改需求
4. 在git分支上直接调整实际感受
虽然网上很多博主分享了很多好用的idea和Skill,但放到一个公司的实际业务中——在各种实际约束、条件限制下——AI如何有效帮助提高效率,仍然是个有待解决的问题。
改变是慢慢发生的。
总结
| 环节 | 推荐做法 |
|---|---|
| 代码协作 | git分支修改,不截图不传代码 |
| 设计规范参考 | Figma单Page链接,不传全文件 |
| 效果调整 | 分支上直接改样式,快速迭代 |
| 核心原则 | 地基打稳,约束做好 |
AI工具在爆发,但团队协作的真正瓶颈往往不在工具本身,而在工作流的设计。
关键词:Claude Code, Figma, 设计协作, AI设计, git工作流
