hi，我是渔夫。
先说，这个小程序是去年给一位好朋友做的，主营精酿酒。计划这两年把市场铺到整个贵州，所以还是得有自己的小程序和 App 才方便。
年前已经上线了一版，比较粗糙，主要是赶上春节的流量先顶着用。
最近我想系统学一下 UI 设计，今天试着用 Claude Code 接入 Figma，打算把界面重新做一遍，边学边踩坑，于是有了这边文章了。
1、CC 如何配置 Figma
先在 Figma 中创建 token，有了这个 cc 才能有权限操作。
点击「头像」-「settings」- 「security」- 「generate new token」
下面核心给可读可写权限，如果你不是很清楚，可以全部都给问题不大。
## Files
- ✅ `file_content:read` — 必选，读取设计内容
- ✅ `file_metadata:read` — 必选，读取文件信息
- ✅ `file_versions:read` — 可选
- ✅ `file_comments:read` — 可选
- ✅ `file_comments:write` — 可选
## Design systems
- ✅ `library_assets:read` — 读取组件和样式
- ✅ `library_content:read` — 读取发布的组件库
- ✅ `team_library_content:read` — 读取团队组件库
## Development
- ✅ `file_dev_resources:read` — 读取开发资源
- ✅ `file_dev_resources:write` — 如果需要 Code Connect 映射
## Projects
- ✅ `projects:read` — 读取项目结构
## Webhooks
- ❌ `webhooks:read` — 不需要
- ❌ `webhooks:write` — 不需要
Webhooks 是用来监听 Figma 文件变化事件的，管理团队这时可能需要用到。
记得保存好 token，关闭后就没法复制了，只能建一个新的，不能查看。
配置 MCP，我们让 CC 自己来完成。
配置完成后，最好重启下 CC 终端，然后打开，输入 /mcp 回车，选择 Figma 进行登录授权。
这样 MCP server 里面包含了 10 多 个工具。其中特别的是 use_figma，这个它会修改你的 Figma 文件内容，其他工具只能读的形式。
2、在 Figma 中 Drafts 新建 Design
新建一个画板后，在顶部栏或点击这个设计板，复制把链接给到 cc帮你设计 UI。
但后来，我发现不给链接，它也会自动给你建新的。
3、实际效果
当 claude code 在控制台告诉我设计完成后，那一刻，我是没有太大期望的。但当我真正到 Figma 认真浏览的时候，真的被惊到了。
从登录页，到户用端，骑手，商家后台所有页面，都把 UI 设计得非常完整，虽然在审美上需要一些微调，但不妨碍我对他的赞美。
关于，ai 生成 ui 在多数下是很死板，无审美，让人一看就知道一定是 ai 搞出来的。所以，很多人拒绝 ai 生成，这个可以理解。
但是，我想说的如果你有这种想法，请抛弃你当前的认知。
现在新设计流程是，以小时级迭代了，重视结果，设计开发合一 ，可观察行为。传统模式一去兮不复返了：探索 → 研究 → 模型 → 迭代 → 交付 → 开发 → 发布。这样环节流程太多，耗时周期数日。
从 23 年开始，生图视频，vibe coding各个领域，到今天已经是第三个年头了，肉眼可见发展速度惊人。
尤其在 vibe coding 领域，现在 90% 人都不会写一行代码，只做架构工程化，模糊边界定义指导 ai，做 ai 的评审导师，评审它的输出结果，也许是该要掌握的。
推荐阅读：