Subframe

Subframe 官网标题是「design & build in one tool」，摘要写的是「Subframe is a design tool connected to your codebase, and a coding agent with a canvas.」。它把画布、浏览器与代理三件事放在同一个界面里：画布为代码而生，浏览器可直接预览并编辑正在运行的应用，代理同时处理设计与代码。官网还设有 Free 与 Pro 两档定价以及 FAQ。

核心能力

• Infinite canvas built for code：官网称为代码而生的无限画布，界面中可看到页面、图层与组件结构。
• Preview & edit your live app：官网称可直接预览并编辑正在运行的应用，示例中出现本地开发地址。
• One agent for design & code：官网称同一个代理同时处理设计与代码，可让其搜索代码库并给出实现思路。
• Designing & building is a roundtrip：官网把设计与开发描述为一个来回的过程，而不是单向交付。
• 代理协作：官网示例中代理会搜索代码与设计、读取文件并产出多版设计方案。
• 定价与 FAQ：官网列出 Free 与 Pro 两档，FAQ 覆盖是否替代 Figma、是否替代 Cursor、支持哪些编码代理等问题。

适合谁

• 独立开发者与创业者：一个人既做设计又写代码，希望少在工具之间切换。
• 需要让 AI 代理读懂现有代码库再动手的开发团队。
• 已有组件库和设计系统的前端团队，官网 FAQ 提到可复用既有组件。
• 想把设计稿直接连到真实运行页面的产品设计搭档。
• 正在评估设计工具与编码代理能否合一的技术负责人。

使用建议

• 官网 FAQ 明确回答了「代码是否离开本机」，接入真实项目前务必先读这一条。
• 先在一个小分支或非核心页面上试跑，确认代理改动可控再放到主干。
• 已有设计系统时，先把组件与规范接入，代理产出才不会与既有风格冲突。
• 官网提供 Free 档，建议先用免费额度验证整个来回流程是否顺手。
• 涉及生产环境页面时，请保留代码审查环节；官方能力与支持范围可能调整，以官网说明为准。