Starry

Starry是什么

Starry 是一款围绕 AI + UI设计 + 代码生成构建的新一代设计工具。

用户可以直接使用自然语言描述需要创建的界面，例如登录页、数据看板、管理后台或营销网站，Starry 会在画布中生成真实的、可编辑的 UI 图层，而不是仅生成一张静态图片。

生成完成后，可以继续通过自然语言修改界面，也可以直接编辑画布中的元素，并将设计导出为 React（JSX）、HTML、SVG 等格式。

Starry 同时支持导入原生 Figma .fig 文件，可以将已有 Figma 设计继续用于 AI 修改和代码生成。

Starry核心功能

Starry AI生成UI

使用自然语言描述需要设计的页面，AI 自动创建：

• 页面布局
• UI组件
• 文本内容
• 间距
• 样式
• Auto Layout
• 设计系统元素

生成后的界面是真实可编辑的设计节点，可以继续修改和调整。

Starry自然语言设计

不需要从空白画布开始逐个拖拽组件。

可以直接描述：

“创建一个包含个人信息、账户设置和危险操作区域的设置页面。”

Starry 会根据描述生成对应的 UI，并可以继续通过对话进行修改。

这种方式将传统的：

画布 → 拖拽 → 调整 → 设计

转变为：

描述 → AI生成 → 修改 → 导出代码

Starry AI画布

Starry 将 AI 与设计画布直接结合。

AI 可以读取和修改画布中的真实设计节点，并使用 Auto Layout、组件和变量等设计能力完成界面构建。

Starry设计转代码

Starry 支持将设计直接转换为生产代码。

目前支持：

• React（JSX）
• HTML
• SVG
• Design Tokens

生成的代码可以直接进入开发项目，并继续在代码编辑器中维护。

Starry React代码生成

Starry 可以将设计画布中的 UI 转换为 React（JSX）代码。

布局、间距和设计 Token 会同步到生成的代码中，适合 React 项目快速实现 UI。

Starry HTML生成

除了 React，Starry 还支持直接导出 HTML。

适合：

• 企业官网
• 营销落地页
• 产品介绍页
• 管理后台
• 原型页面

等 Web 页面开发场景。

Starry Figma导入

Starry 支持导入原生 Figma .fig 文件。

可以将已有的：

• Frame
• Text
• Component
• Style

等设计内容导入 Starry，然后继续进行 AI 编辑和代码生成。

Starry Figma协同

Starry 支持与 Figma 进行设计内容交换。

可以在 Figma 与 Starry 之间复制和粘贴设计节点，并继续进行编辑和代码导出。

Starry MCP

Starry 内置 MCP Server，可以连接 AI 编程工具。

支持：

• Cursor
• Claude Code
• OpenAI Codex
• Windsurf
• VS Code

等 AI 开发工具。

开发者可以让 AI 编程助手读取、修改和导出 Starry 画布中的设计内容。

Starry ACP

Starry 使用 Agent Client Protocol（ACP）连接本地 AI Coding Agent。

可以将 Claude Code、Codex、Gemini CLI 等 AI 编程 Agent 接入 Starry，让 AI Agent 直接操作设计画布。

Starry CLI

Starry 提供 CLI，可以通过命令行批量处理设计文件。

支持：

• 批量导出资源
• 设计检查
• 设计差异比较
• CI/CD 集成

可以将设计工作进一步纳入软件开发流程。

Starry组件与设计系统

Starry 支持：

• Components
• Variants
• Auto Layout
• CSS Grid
• Variables
• Design Tokens

可以构建设计系统，并将设计变量转换为代码中的 CSS 自定义属性。

Starry AI模型支持

Starry采用 BYOK（Bring Your Own Key） 模式，用户可以使用自己的 AI 服务商 API Key。

目前支持的 AI 服务商包括：

• OpenRouter
• Anthropic
• OpenAI
• Google AI
• DeepSeek
• Z.ai
• MiniMax
• 通义千问
• 豆包
• Kimi
• 百川
• 阶跃星辰
• xAI
• Mistral
• Cohere
• Perplexity

同时支持 OpenAI 兼容接口。

用户的 API Key 保存在本地，AI 请求直接发送至所选择的模型服务商，Starry 不需要通过自己的后端转发。

Starry应用场景

Starry SaaS界面设计

通过自然语言快速生成：

• 设置页面
• CRUD页面
• 表单
• 数据管理界面

适合 SaaS 产品原型和正式 UI 开发。

Starry网站设计

可以快速生成：

• 官网
• Landing Page
• 产品介绍页
• 营销页面

并直接导出 HTML 或 React。

Starry数据看板

适用于：

• 数据大屏
• BI Dashboard
• 管理后台
• 数据分析页面

可以通过 Prompt 快速构建表格、卡片、图表和筛选区域。

Starry移动端UI

可以生成：

• 登录页面
• 注册页面
• 电商页面
• App首页
• onboarding页面

用于移动应用原型和 UI 开发。

Starry设计系统

可以使用自然语言生成组件、变量和设计 Token，构建设计系统。

Starry快速原型

从产品想法直接生成 UI，再导出代码，可以用于 MVP 和产品原型验证。

Starry设计转代码

对于已经完成 UI 设计的产品，可以通过 Figma 导入，再直接转换为 React 或 HTML，减少设计与开发之间的重复工作。

Starry产品优势

• AI原生设计： 通过自然语言直接创建和修改 UI。
• 真实可编辑界面： AI生成的是实际设计节点，而不是静态图片。
• 设计代码一体化： 支持从设计直接导出 React 和 HTML。
• Figma兼容： 支持原生 .fig 文件导入。
• MCP支持： 可以连接 Cursor、Claude Code、Codex 等 AI 开发工具。
• 本地优先： 设计文件默认保存在本地。
• 开放格式： 支持 .fig 和 .pen 等开放设计文件。
• BYOK： 用户可以使用自己的 AI 模型 API Key。
• 可编程： 提供 CLI、MCP 和自动化能力。

Starry使用教程

第一步：打开Starry

Starry支持桌面端和 Web 使用。

桌面端支持：

• macOS
• Windows
• Linux

同时提供浏览器版本。

第二步：创建设计

可以从空白画布开始，也可以导入 .fig 或 .pen 文件。

第三步：连接AI模型

添加自己的 AI 服务商 API Key。

支持 OpenRouter、OpenAI、Anthropic、Google AI、DeepSeek、通义千问、豆包、Kimi 等模型服务。

第四步：描述设计需求

使用自然语言告诉 Starry 希望创建什么界面。

例如：

“创建一个三列价格方案页面，中间方案突出显示，并加入注册按钮。”

第五步：AI生成界面

Starry 根据 Prompt 创建真实的 Auto Layout UI。

第六步：继续修改

可以继续使用自然语言提出修改要求，例如：

“将主色改为品牌绿色，并增加一个客户评价区域。”

第七步：导出代码

完成设计后，可以导出：

• React（JSX）
• HTML
• SVG
• PDF
• PNG
• JPG
• WebP

等格式。

Starry收费标准

Starry目前提供免费版、Pro版和 Enterprise 企业版。

Starry Free

$0 / 永久

包含：

• 本地优先桌面应用
• .fig / .pen 文件读写
• React（JSX）和 HTML 导出

Starry Pro

$12 / 月

包含免费版全部能力，并提供：

• AI Agent
• Unlimited Prompts
• WebRTC实时协作
• MCP Server
• IDE集成

Starry Enterprise

Custom

企业版支持：

• SSO
• 团队管理
• 自托管 MCP
• CI 集成
• 优先技术支持

以上价格为 Starry 当前官方页面展示的价格。

Starry常见问题（FAQ）

Starry是什么？

Starry是一款 AI 原生设计工具，可以通过自然语言生成可编辑 UI，并将设计直接转换为 React 和 HTML 代码。

Starry可以生成网页吗？

可以。Starry可以根据自然语言生成网站和 Web UI，并导出 HTML 或 React（JSX）代码。

Starry可以生成React代码吗？

可以。Starry支持将设计直接导出为生产级 React（JSX）代码。

Starry支持Figma吗？

支持。Starry可以导入原生 Figma .fig 文件，并继续进行设计编辑和代码生成。

Starry支持Cursor吗？

支持。Starry提供 MCP Server，可以连接 Cursor、Claude Code、Codex 等 AI 编程工具。

Starry支持中文AI模型吗？

支持。Starry的 BYOK 模式支持通义千问、豆包、Kimi、百川、阶跃星辰等 OpenAI 兼容接口。

Starry需要注册账号吗？

Starry的本地设计功能不要求注册账号。AI功能需要配置自己的 AI 服务商 API Key。

Starry需要自己购买AI模型吗？

Starry采用 BYOK 模式，AI 模型调用费用由用户所选择的 AI 服务商收取，Starry本身不出售模型调用额度。

Starry支持免费使用吗？

支持。官方目前提供 $0 的 Free 版本，包含本地设计和代码导出能力；Pro版本为 $12/月。