Claude Opus 5.5 Figma 克隆演示

Claude Opus 5.5 在不到三小时内构建了一个 Figma 克隆版

利用 Claude Opus 5.5 和 Mana 平台，仅通过八个提示词，在 2 小时 53 分钟内开发出了一个功能完备的 Figma 克隆版。生成的应用程序包含了核心设计工具功能，如自动布局、矢量编辑和实时多人协作，并支持约 20,000 个图层的文件。

开发时间轴与提示词序列

构建过程于 10 月 9 日进行，总会话时长为 4 小时 19 分钟，实际编码时间总计不到三小时。开发遵循以下顺序：

1. 初始编辑器（1 个提示词，54 分钟）： 基础编辑器是通过一个关于创建功能齐全、支持协作的 Figma 克隆版的单一请求创建的。
2. 功能完善（5 个提示词，17 分钟）： 五个后续提示词增加了全视图、圆角手柄、布尔运算、K 缩放工具以及其他功能缺口。
3. 渲染优化（1 个提示词，89 分钟）： 在简短的规划阶段后，构建了一个基于切片的渲染器以取代原始的 SVG 渲染器。
4. 最终修复（1 个提示词，10 分钟）： 实施了一项修复，确保缓存文件在无需等待同步的情况下立即显示。

核心功能集

生成的编辑器实现了广泛的专业设计工具功能：

• 布局与框架： 支持框架、自动布局、组、约束、“包裹”和“填充”设置、剪切内容以及布局网格。
• 矢量工具： 钢笔工具、铅笔工具、点编辑、布尔运算（并集、减去、交集、排除）和蒙版。
• 组件： 实现主组件、实例和覆盖。
• 样式： 集成 Google Fonts、渐变、图像填充、描边、阴影和模糊效果。
• 原型设计： 交互触发器（点击、悬停、延迟）以及转场效果和专门的演示模式。
• 多人协作： 实时光标、选择跟踪、光标聊天、跟随模式和评论线程。
• 导出： 支持将选定内容导出为 PNG、JPG、SVG 或 CSS 代码。

高性能渲染引擎

为了解决原始 SVG 渲染器在处理数千个图层后出现的性能下降问题，Claude 将其替换为基于切片的 Canvas 2D 引擎。该引擎利用了五项关键技术策略：

1. 增量场景更新： 仅重新计算受编辑影响的布局。
2. 512px 切片： 引擎在平移过程中重用缓存的切片，并仅重绘受编辑影响的切片。
3. 框架位图： 大型框架在不同缩放级别下被缓存为位图。
4. 空间索引： 使用空间索引来定位光标下的图层，而无需扫描整个文件。
5. 统一文本测量： 布局和绘制使用相同的测量标准，以确保一致性。

渲染器性能基准测试

图层数	操作	SVG 渲染器	切片引擎	提速
10,200	平移	133 ms	18 ms	7×
10,200	缩放	515 ms	29 ms	18×
10,200	拖动框架	292 ms	23 ms	13×
51,000	平移	875 ms	21 ms	42×
51,000	缩放	2,959 ms	61 ms	40×
51,000	拖动框架	2,685 ms	67 ms	40×

基础设施与 AI 集成

Claude 为核心编辑器逻辑编写了约 8,200 行 React 代码，包括点击测试和撤销功能。该项目依赖 Mana 基础设施实现以下功能：

• 后端服务： 登录、存储、托管、文件共享和离线支持。
• AI 助手： 一个集成的助手，能够读取打开的文件和选定的图层，根据自然语言描述创建或修改设计。

局限性与社区批评

该克隆版目前缺乏高级专业用户功能，包括变体、组件属性、样式、变量以及单个文本框内的混合格式。它在原型设计中也缺乏“智能动画”和滚动框架。

行业专业人士对这些 AI 生成的克隆版的“氛围编程”（vibe-coding）性质提出了担忧。一位前 Figma 员工指出，虽然 AI 可以为普通用户实现视觉上的对等，但它往往忽略了专业级工具所需的复杂边缘情况和条件逻辑：

我曾在 Figma 领导变量工作流，这是我 20 年技术生涯中处理过的最复杂的事情。其中的边缘情况、条件判断和异常处理数量惊人，仅仅是为了让它达到一种（在高级用户定义下的）“简单”状态。 — @handle

其他批评者质疑 8,200 行代码对于一个完整克隆版的有效性，并暗示该实现可能只是一个高保真演示，而非生产就绪的工具。