YOHO AI

标签： Figma替代品

  • Open Design：开源版 Claude Design，把你的编码智能体变成设计引擎

    Open Design：开源版 Claude Design，把你的编码智能体变成设计引擎

    ⭐ 79.6K Stars  ·  Apache-2.0  ·  TypeScript  ·  本地优先桌面应用

    项目简介

    Open Design 是 Anthropic Claude Design 的开源替代方案——一个本地优先（local-first）的桌面应用，让你的 Claude Code / Codex / Cursor / Gemini 等编码智能体直接化身”设计引擎”，生成网页、桌面、移动端原型、实时仪表盘、演示文稿、图片与视频，并导出为 HTML / PDF / PPTX / MP4 真实文件。

    Open Design 工作台

    安装要求与过程

    环境要求

    • 桌面应用：macOS（Apple Silicon / Intel x64）、Windows（x64）、Linux（AppImage）——无需 Node / pnpm / 克隆仓库。
    • 自托管：Docker + Docker Compose；源码运行需 Node 24、pnpm 10.33.x。
    • 编码智能体：Claude Code、Codex、Cursor、Copilot、OpenClaw、Gemini、Hermes、Kimi、Trae、OpenCode 等 25+ 本地 CLI，或任意 OpenAI 兼容端点（BYOK）。

    快速安装

    1. 下载桌面应用（推荐，零配置）：前往官网或 GitHub Releases 下载对应平台安装包；安装后自动检测 PATH 上的编码智能体，加载 100+ 功能技能、渲染模板目录与 151 套设计系统。
    2. 装进编码智能体（无界面）：od mcp install <agent>（<agent> = claude | codex | cursor | copilot | gemini | hermes | kimi | trae | opencode …）；或用托管脚本 curl -fsSL https://open-design.ai/install.sh | sh -s <agent>。
    3. Docker 自托管： 
      git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# 打开 http://localhost:7456
    4. 源码运行： 
      git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

    核心功能

    内置 151 套品牌级设计系统

    1. 智能体原生、模型无关：不绑定任何厂商 Agent，你 PATH 上已有的 claude / codex / cursor / copilot / hermes / kimi 就是设计引擎，一键切换；一条 od mcp install <agent> 把 MCP 服务器接入 25+ 编码智能体。
    2. 品牌级 DESIGN.md 设计系统：每一帧渲染都读取当前包的 DESIGN.md 作为品牌契约；仓库内置 151 套品牌级设计系统（Claude、Stripe、Figma、Apple、NVIDIA…），丢进文件夹即被识别。
    3. 多形态产物，单一项目：Studio 支持原型（web / desktop / mobile 单页）、实时仪表盘 / artifact、演示文稿（deck）、图片、视频与 HyperFrames 动态图形，统一导出 HTML / PDF / PPTX / MP4。
    4. 四层可组合：插件（可运行工作流）+ 功能技能（Agent 行为）+ 设计模板（渲染蓝图）+ 设计系统（品牌），全部用可移植、可版本化的目录，任何人都能创作与发布；官方 277 个插件 + 183 个可复用示例。
    5. 本地优先 + BYOK 隐私：原生桌面应用（macOS / Windows）+ Docker + Vercel；所有数据在你本机、团队服务器或部署项目里运行，BYOK 代理具备 SSRF 防护，沙箱 iframe 预览。

    Open Design 支持的 25 个编码智能体 CLI

    典型使用场景

    • 一句话生成落地页：在入口视图输入 brief，智能体结合 saas-landing 模板与 Linear 设计系统，流式生成带 hero / 特性 / 定价 / CTA 的可运行着陆页，直接导出 HTML 部署。
    • 实时数据仪表盘：用 dashboard 模板生成带侧边栏的管理 / 分析看板，作为 live artifact 实时刷新，而非静态截图。
    • 品牌统一的演示文稿：用 guizang-ppt / html-ppt 模板生成杂志风 Web PPT；或把现有 git 仓库 + DESIGN.md 交给智能体，自动把真实组件重构到品牌规范（含 Figma / Pencil → React / Next / Vue 迁移插件）。

    演示文稿 / Deck 产物

    插件与集成生态

    推荐理由

    作为天天和编码智能体打交道的人，最打动我的是它把”设计”从闭源付费的云端玩具，变成了你笔记本上的文件系统——你的 CLI 是引擎，笔记本是工作室，团队的 DESIGN.md 是品牌契约。相比 Claude Design 的封闭锁定，Open Design 的 agent-native + 模型无关 + Apache-2.0，让我可以随意换模型、自托管、调用 151 套现成设计系统，还能用 277 个插件把 Figma 工作流迁到 React。对想把”vibe coding”从代码延伸到 UI / 海报 / 演示的人来说，这是目前最完整、最开放的一个选择。

    下载地址