产品简介

Subframe是一款AI驱动的设计工具，旨在简化和加速产品界面的构建过程。它通过允许设计师和开发者使用相同的代码材料进行构建，从而取代了传统的设计到代码的手工转换流程。Subframe的核心理念是“设计优先，代码原生”，它不仅仅是一个设计工具，更是一个集设计、原型制作和代码生成于一体的综合平台。通过Subframe，用户可以利用真实的UI组件进行可视化设计，并借助AI生成设计和原型，这些AI能够理解用户的产品需求，最终导出可用于生产的React代码。Subframe的目标是让设计过程更加高效、协作更加顺畅，并确保最终产品在设计和开发之间保持高度一致性。它不仅提供了一个预构建的组件库，还允许用户创建自定义组件，所有这些组件都会自动同步为生产代码，为用户提供了一个完整的、可信赖的设计系统。

主要功能

• 构建统一的设计系统：Subframe作为设计系统的核心，能够集中管理主题、组件和文档，确保团队成员始终使用一致的设计语言，并减少重复工作，提高整体设计效率。
• 可视化设计与原型制作：用户可以在Subframe的可视化编辑器中，通过拖拽和配置真实组件来创建界面，无需编写大量代码即可实现精细的设计控制和交互原型。
• AI辅助设计与原型生成：Subframe集成了AI功能，可以根据用户提供的提示或图像自动生成设计方案，并且AI会不断学习用户的主题、组件和页面风格，从而提供更加智能化的设计建议。
• 代码级别的组件同步：Subframe通过命令行工具（CLI）实现组件的同步，确保设计与代码的一致性。页面可以导出为可复制的React代码或通过MCP服务器进行部署，实现设计成果的快速交付。
• 支持多种前端框架：Subframe不仅适用于特定的前端框架，还支持与Typescript、React和Tailwind CSS等主流技术栈集成，为开发者提供了灵活的选择，可以轻松地将Subframe集成到现有的项目中。

使用方法

1. 设置Tailwind CSS：首先需要在项目中安装和配置Tailwind CSS，包括安装tailwindcss、postcss和autoprefixer等依赖，并初始化Tailwind CSS配置文件。
2. 安装Subframe：通过npm安装@subframe/core依赖包，这是Subframe运行所必需的核心库。
3. 创建.subframe/sync.json文件：在该文件中配置Subframe的同步设置，包括组件存放目录、导入别名和项目ID等信息，以便Subframe能够正确地同步组件代码。
4. 配置Tailwind CSS：将Subframe的预设添加到Tailwind CSS的配置文件中，确保Subframe的主题能够应用到项目中。
5. 同步Subframe组件：运行Subframe CLI命令，将Subframe中的组件代码下载到本地代码库中，完成设计与代码的同步。

应用场景

• 快速原型开发：Subframe允许设计师快速创建交互式原型，无需编写大量代码即可验证设计方案，从而缩短产品的迭代周期，提高开发效率。
• 设计系统构建与维护：Subframe可以作为设计系统的单一数据源，集中管理和维护组件库，确保设计语言的一致性，并减少重复设计，提高团队协作效率。
• 跨平台应用开发：Subframe支持导出React代码，可以用于构建Web应用，同时也可以与React Native等技术结合，实现跨平台应用的快速开发。
• AI辅助界面设计：利用Subframe的AI功能，可以快速生成各种界面布局和组件样式，为设计师提供灵感，并加速设计过程，从而提高设计效率和质量。
• 团队协作设计：Subframe提供协作功能，允许多个设计师同时参与同一个项目的设计，并实时同步设计变更，从而促进团队成员之间的沟通和协作，提高整体设计效率。