上个帖子是大半夜发的，本来是准备放弃被 Figma "干死"的产品 （flare.design） 的，只是想找个没人认识的地方记录一下，没想到收到很多关于产品设计的正向反馈。

所以又半夜上来发个帖，分享一下这个产品是怎么 vibe 出来的，回馈一下感兴趣、并且给过正反馈的朋友。

说一下我的流程，人手写版本。

1. 先确认自己想要的风格

   因为本来是想做面向设计师偏专业的工具，设计师如果用起来会持续花大量的时间在一个画布上，所以编辑器必须要保持冷静、克制、清爽的设计风格，这样设计师长时间使用才不会感觉到视觉疲劳，所以给整体风格定了一个基调。

2. 选择一个模块开始打磨 我首先打磨的是编辑器，参考了市面上成熟的产品，体验下应该可以发现整体设计上比较偏向 Figma ，面向设计师 Figma 是一定绕不过去的，要尽量让设计师感觉到熟悉和容易上手，所以我在字号、布局配色上都接近它。

   但是也不完全一致，在差异化的功能方面，比如生成器、时间轴、动效等则参考了其他产品比如 Jitter 然后迁移到我们的风格里。

3. 收敛设计 token 和风格规范

   编辑器打磨到一个比较舒服的状态后，我开始从里面抽设计 token 和通用组件规则，再把整站往这个感觉上靠。

   这里没啥魔法，主要就是不停的使用和 review ，哪里感觉不对劲就改哪里（我感觉有点偏苦力了。。），这里 AI 更多的在执行，它很难发现四处散落的细节问题，主要还是靠人的审美和审查。

4. 反复打磨小细节

   很多质感其实来自特别小的地方：按钮高度、hover 状态、popover 位置、面板半径、阴影强度等，还有信息密度，这个我花了挺多时间反复调整。

   这些东西单独看都不大，但是到处都是。打磨到后面，体验的提升不是来自一个大改版，而是各个小地方终于开始有一致的设计了。

所以如果说有什么经验，我觉得不是“用了某个高级方法论”，而是：

先定一个足够清楚的产品气质，然后选一个核心模块打穿，把它变成设计语言的源头。之后所有页面、所有组件都往这个源头收口。最后就是持续不断地 review 细节。

当然现在我还有很多不满意的地方，比如对外站点（首页、文档、定价、登录流程等）、email 模板，还有品牌和 Logo ，都还差点意思，还要花更多时间打磨才行。

下面是 Codex 基于项目上下文和我们之前讨论总结的版本，偏工程视角：

我们的流程大概是这样的：

1. **先收窄产品定位**  
   我们先明确 flare.design 不是 Figma 、Canva ，也不是泛泛的运营后台，而是一个 **AI-native motion canvas**：让 AI 生成的图片、视频、文字、动效和导出都留在同一块画布里。这个定位决定了界面不能太营销化，也不能太重，而要像一个安静、精密、可工作的创作工具。

2. **从真实创作循环出发**  
   体验主线不是“点一个按钮生成”，而是：生成 / 导入素材 → 在画布上排布比较 → 加动效 → 预览 → 导出 → 保存资产或 Recipe 。  
   所以我们一直强调“上下文可见”：参考图、备选 frame 、生成结果、批注、最终导出区域都在同一空间里，用户不用在多个工具和文件夹之间跳来跳去。

3. **先把编辑器能力做稳定，再追求漂亮**  
   Frame 、Layer 、Mask 、Group 、Auto Layout 、Timeline 、Motion 、Export 这些能力先被定义成稳定模型。比如预览和导出复用同一套播放逻辑，mask 是一等容器，frame timing 是 frame-local 的。这些底层约束让界面看起来“可靠”，而不是只是表面精致。

4. **把视觉语言沉淀成系统，而不是每个页面单独设计**  
   后面我们开始把 panel 、toolbar 、rail 、popover 、settings 、asset library 、generation UI 都统一到同一套 token 和 primitives 里。核心规则是：浅色、克制、小字号、低阴影、少卡片、少装饰，用 6-12px 的 radius 、细分隔线、紧凑控件和轻微 hover 状态表达层级。  
   这就是为什么现在看起来比较高级：它不是“炫”，而是所有地方都在讲同一种产品语言。

5. **反复打磨高频接触点**  
   最近很多提交都是 polish：image toolbar 、mask controls 、generation UI 、editor controls 、asset popover placement 、collapsed chrome height 、settings navigation 。它们单个看都不大，但都发生在用户每天会碰到的位置。体验的质感就是这些小地方累计出来的。

6. **把 AI 和 agent 设计成协作流程，而不是魔法按钮**  
   MCP / Codex / Claude Code 的接入不是让 agent 接管整个项目，而是让它读取画布上下文、处理边界清楚的任务、把生成资产放回画布，再由人比较和接受。这让 AI 成为创作循环的一部分，而不是一个孤立的生成入口。

7. **用文档和回归清单固定质量**  
   你们已经把设计系统、编辑器稳定性契约、架构 guardrails 、回归 checklist 都写进仓库了。每次行为变化都要更新 contract 和测试场景，这让后续 AI 或人继续改的时候不会把体验改散。

一句话版本可以这样说：

> 我们不是先追求“好看的 UI”，而是先把产品定位、创作流程、编辑器模型和视觉规则收紧。每个功能都必须服务同一个循环：生成、排布、动起来、导出、复用。最后再通过共享 tokens 、panel primitives 和大量高频细节 polish ，把整个产品打磨成现在这种安静、精密、连续的体验。

其实这个产品技术架构我也挺满意的，全栈 Cloudflare ，这也是产品名字（ flare ）的由来，包括邮件发送服务，也是一开放就立马用上了，还有 AI 生成 API ，也是用的 Cloudflare 收购的 Replicate 。

做这个产品的过程中把各种东西都用了一遍，感觉还挺爽的，以前要学很久的东西，比如多人协作、Shader ，现在都跳过学习过程直接用就完了，时代真的不一样了。

Shader 图层一天就支持了，后面又是一天就做了个 Figma 插件和工具页面，可以看我的 changelog，很多事情都是一两天就干完了，AI 实在是太强了。