subframe
一款集可视化编辑、代码导出与AI设计于一体的UI设计工具。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：subframe。 它的用途是：一款集可视化编辑、代码导出与AI设计于一体的UI设计工具。 完整的 Skill 内容见：https://321skill.com/skills/subframe/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我用 Subframe 设计一个登录页的UI，并导出 React 代码。”，它会引导你使用 Subframe 的可视化编辑器拖拽组件、配置样式，完成后通过其 CLI 工具将设计同步到你的代码库，生成对应的 React 组件文件。或者，你可以说：“用 Subframe 为我的 SaaS 后台快速搭建一个设计系统。”，AI 会建议你利用其组件库和样式变量功能，统一颜色、间距等设计令牌，并生成可复用的代码模块。
介绍
Subframe 是一款面向开发者的现代UI设计工具，旨在弥合设计与开发之间的鸿沟。它允许设计师和开发者通过拖拽式可视化编辑器快速构建界面，并支持一键导出高质量的 React + Tailwind CSS 代码，极大提升了从设计到代码的实现效率。
使用 Subframe 时，用户可以在其在线编辑器中进行界面设计，利用其内置的 AI 功能辅助生成设计稿或进行原型交互。设计完成后，通过其 CLI 工具或集成功能，可以将设计系统与本地代码库同步，确保设计与代码的一致性。
这款工具特别适合需要快速迭代产品界面、重视设计与代码一致性的团队或个人。前端开发、全栈开发和 UI 设计师是其主要受益者，他们可以借此工具减少沟通成本，加速开发流程。
建议在项目初期或重构阶段引入 Subframe，以建立统一的设计系统。需要注意的是，它主要面向基于 React 的技术栈，如果项目使用其他前端框架，可能需要进行额外的适配工作。
核心特点
与同类设计工具（如Figma）相比，Subframe 的核心优势在于其原生支持将设计直接导出为可直接使用的 React 组件代码，并深度集成了 Tailwind CSS 实用类，实现了设计与生产代码的无缝衔接。
注意事项
主要面向 React 技术栈，对于使用 Vue、Svelte 等其他前端框架的项目支持有限。
常见问题
Subframe 导出的代码质量如何？
导出的代码基于 React 和 Tailwind CSS，结构清晰、可维护性强，可直接用于生产环境。
Subframe 适合非开发者使用吗？
适合。其拖拽式编辑器和 AI 功能降低了设计门槛，但最大化价值仍需与开发流程结合。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/subframe/raw/index.md 读取 subframe 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/subframe/raw/index.md（查看排版版本）