Open Design: Use Your Coding Agent as a Design Engine

查看原文 / View Original

Open Design: Use Your Coding Agent as a Design Engine

Open Design is the open-source alternative to Claude Design. It is local-first, web-deployable, and BYOK (Bring Your Own Key) at every layer. It features 12 coding-agent CLIs auto-detected on your PATH (Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro) that become the design engine, driven by 31 composable Skills and 72 brand-grade Design Systems. No CLI? An OpenAI-compatible BYOK proxy provides the same loop without the spawn.

Open Design 是 Claude Design 的开源替代方案。它优先支持本地运行、可部署至 Web，并在每一层都支持 BYOK（自带 API Key）。系统会自动检测你 PATH 路径下的 12 种编码代理 CLI（包括 Claude Code、Codex、Devin for Terminal、Cursor Agent、Gemini CLI、OpenCode、Qwen、GitHub Copilot CLI、Hermes、Kimi、Pi、Kiro），并将它们转化为设计引擎，由 31 种可组合的技能和 72 套品牌级设计系统驱动。如果没有 CLI？通过兼容 OpenAI 的 BYOK 代理，无需启动本地进程即可实现相同的循环。

Why this exists

Anthropic’s Claude Design (released 2026-04-17, Opus 4.7) showed what happens when an LLM stops writing prose and starts shipping design artifacts. It went viral — and stayed closed-source, paid-only, cloud-only, locked to Anthropic’s model and Anthropic’s skills. There is no checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent. Open Design (OD) is the open-source alternative. Same loop, same artifact-first mental model, none of the lock-in.

为什么会有这个项目

Anthropic 的 Claude Design（发布于 2026 年 4 月 17 日，Opus 4.7 版本）展示了当大模型不再仅仅撰写文本，而是开始交付设计产物时会发生什么。它迅速走红，但始终保持闭源、付费、仅限云端，且被锁定在 Anthropic 的模型和技能体系中。它不支持本地部署、不支持 Vercel 部署，也无法更换你自己的代理。Open Design (OD) 正是其开源替代方案：同样的循环，同样的“产物优先”思维模型，但没有任何厂商锁定。

We don’t ship an agent — the strongest coding agents already live on your laptop. We wire them into a skill-driven design workflow that runs locally with pnpm tools-dev, can deploy the web layer to Vercel, and stays BYOK at every layer.

我们不提供代理——最强大的编码代理已经存在于你的笔记本电脑中。我们将它们接入一个由技能驱动的设计工作流，该工作流通过 pnpm tools-dev 在本地运行，可以将 Web 层部署到 Vercel，并在每一层保持 BYOK 的灵活性。

Type “make me a magazine-style pitch deck for our seed round.” The interactive question form pops up before the model improvises a single pixel. The agent picks one of five curated visual directions. A live TodoWrite plan streams into the UI. The daemon builds a real on-disk project folder with a seed template, layout library, and self-check checklist. The agent reads them — pre-flight enforced — runs a five-dimensional critique against its own output, and emits a single <artifact> that renders in a sandboxed iframe seconds later.

输入“为我们的种子轮融资制作一份杂志风格的演示文稿”。在模型生成任何像素之前，交互式问卷会先弹出。代理会从五种精选的视觉方向中选择一种。一份实时的 TodoWrite 计划会流式传输到 UI 中。守护进程会在磁盘上创建一个真实的项目文件夹，包含种子模板、布局库和自检清单。代理会读取这些内容（强制执行预检），对其输出进行五维评估，并在几秒钟后生成一个在沙盒 iframe 中渲染的 <artifact>。

That’s not “AI tries to design something”. That’s an AI that has been trained, by the prompt stack, to behave like a senior designer with a working filesystem, a deterministic palette library, and a checklist culture — exactly the bar Claude Design set, but open and yours.

这不仅仅是“AI 尝试设计点什么”。这是一个通过提示词栈训练出来的 AI，它的行为就像一位资深设计师，拥有可操作的文件系统、确定性的调色板库和清单文化——这正是 Claude Design 设定的标准，但现在它是开源的，且属于你。

OD stands on four open-source shoulders:

  • alchaincyf/huashu-design: The design-philosophy compass. Junior-Designer workflow, the 5-step brand-asset protocol, the anti-AI-slop checklist, the 5-dimensional self-critique, and the “5 schools × 20 design philosophies” idea behind our direction picker — all distilled into apps/web/src/prompts/discovery.ts.
  • op7418/guizang-ppt-skill: The deck mode. Bundled verbatim under skills/guizang-ppt/ with original LICENSE preserved; magazine-style layouts, WebGL hero, P0/P1/P2 checklists.
  • OpenCoworkAI/open-codesign: The UX north star and our closest peer. The first open-source Claude-Design alternative. We borrow its streaming-artifact loop, its sandboxed-iframe preview pattern (vendored React 18 + Babel), its live agent panel (todos + tool calls + interruptible generation), and its five-format export list (HTML / PDF / PPTX / ZIP / Markdown). We deliberately diverge on form factor — they are a desktop Electron app bundling pi-ai; we are a web app + local daemon that delegates to your existing CLI.
  • multica-ai/multica: The daemon-and-runtime architecture. PATH-scan agent detection, the local daemon as the only privileged process, the agent-as-teammate worldview.

OD 站在四个开源项目的肩膀上：

  • alchaincyf/huashu-design：设计哲学指南。初级设计师工作流、5 步品牌资产协议、防 AI 垃圾内容清单、五维自我评估，以及方向选择器背后的“5 大流派 × 20 种设计哲学”理念，全部浓缩在 apps/web/src/prompts/discovery.ts 中。
  • op7418/guizang-ppt-skill：演示文稿模式。完整打包在 skills/guizang-ppt/ 下并保留原许可证；包含杂志风格布局、WebGL 首页特效及 P0/P1/P2 清单。
  • OpenCoworkAI/open-codesign：UX 的北极星，也是我们最亲密的同行。它是第一个开源的 Claude-Design 替代品。我们借鉴了它的流式产物循环、沙盒 iframe 预览模式（内置 React 18 + Babel）、实时代理面板（待办事项 + 工具调用 + 可中断生成）以及五种格式的导出列表（HTML / PDF / PPTX / ZIP / Markdown）。我们在形态上有所不同——他们是捆绑了 pi-ai 的桌面 Electron 应用，而我们是 Web 应用 + 本地守护进程，将任务委托给现有的 CLI。
  • multica-ai/multica：守护进程与运行时架构。负责 PATH 扫描代理检测、作为唯一特权进程的本地守护进程，以及“代理即队友”的世界观。

At a glance

  • Coding-agent CLIs (12): Claude Code, Codex CLI, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, GitHub Copilot CLI, Hermes (ACP), Kimi CLI (ACP), Pi (RPC), Kiro CLI (ACP) — auto-detected on PATH, swap with one click.
  • BYOK fallback: OpenAI-compatible proxy at /api/proxy/stream — paste baseUrl + apiKey + model and any vendor (Anthropic-via-OpenAI, DeepSeek, Groq, MiMo, OpenRouter, your self-hosted vLLM, or any other OpenAI-compatible provider) becomes the engine. Internal-IP/SSRF blocked at the daemon edge.
  • Design systems built-in (129): 2 hand-authored starters + 70 product systems (Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu, …) from awesome-design-md, plus 57 design skills from awesome-design-skills added directly under design-systems/.
  • Skills built-in (31): 27 in prototype mode (web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs, …) + 4 in deck mode (guizang-ppt, simple-deck, replit-deck, weekly-update). Grouped in the picker by scenario: design, marketing, operation, engineering, product, finance, hr, sale, personal.

概览

  • 编码代理 CLI (12 种)：Claude Code、Codex CLI、Devin for Terminal、Cursor Agent、Gemini CLI、OpenCode、Qwen Code、GitHub Copilot CLI、Hermes (ACP)、Kimi CLI (ACP)、Pi (RPC)、Kiro CLI (ACP) —— 自动检测 PATH，一键切换。

  • BYOK 后备方案：通过 /api/proxy/stream 提供兼容 OpenAI 的代理 —— 粘贴 baseUrl + apiKey + 模型，任何供应商（如通过 OpenAI 调用的 Anthropic、DeepSeek、Groq、MiMo、OpenRouter、你自托管的 vLLM 或任何其他兼容 OpenAI 的提供商）都能成为引擎。守护进程边缘已拦截内部 IP/SSRF。

  • 内置设计系统 (129 套)：2 套手工编写的入门系统 + 70 套来自 awesome-design-md 的产品系统（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma、小红书等），外加 57 套直接添加在 design-systems/ 下的 awesome-design-skills 设计技能。

  • 内置技能 (31 种)：27 种原型模式（Web 原型、SaaS 落地页、仪表盘、移动应用、游戏化应用、社交轮播图、杂志海报、约会网站、精灵动画、动态帧、评估、微调、线框草图、PM 规范、工程手册、财务报告、HR 入职、发票、看板、团队 OKR 等）+ 4 种演示文稿模式（guizang-ppt、simple-deck、replit-deck、weekly-update）。在选择器中按场景分类：设计、营销、运营、工程、产品、财务、HR、销售、个人。

  • Media generation: Image, video, audio surfaces ship alongside the design loop. gpt-image-2 (Azure / OpenAI) for posters, avatars, infographics, illustrated maps; Seedance 2.0 (ByteDance) for cinematic 15s text-to-video and image-to-video; HyperFrames (heygen-com/hyperframes) for HTML→MP4 motion graphics (product reveals, kinetic typography, data charts, social overlays, logo outros). 93 ready-to-replicate prompts gallery — 43 gpt-image-2 + 39 Seedance + 11 HyperFrames — under prompt-templates/, with preview thumbnails and source attribution. Same chat surface as code; outputs a real .mp4 / .png chip into the project workspace.

  • Visual directions: 5 curated schools (Editorial Monocle, Modern Minimal, Warm Soft, Tech Utility, Brutalist Experimental) — each ships a deterministic OKLch palette + font stack (apps/web/src/prompts/directions.ts).

  • Device frames: iPhone 15 Pro, Pixel, iPad Pro, MacBook, Browser Chrome — pixel-accurate, shared across skills under assets/frames/.

  • Imports: Drop a Claude Design export ZIP onto the welcome dialog — POST /api/import/claude-design parses it into a real project so your agent can keep editing where Anthropic left off.

  • 媒体生成：图像、视频和音频功能与设计循环同步交付。gpt-image-2 (Azure / OpenAI) 用于海报、头像、信息图表、插画地图；Seedance 2.0 (字节跳动) 用于 15 秒电影级文生视频和图生视频；HyperFrames (heygen-com/hyperframes) 用于 HTML 转 MP4 动态图形（产品展示、动态排版、数据图表、社交媒体覆盖层、Logo 片尾）。prompt-templates/ 下提供 93 个可直接复用的提示词库（43 个 gpt-image-2 + 39 个 Seedance + 11 个 HyperFrames），附带预览缩略图和来源说明。与代码使用相同的聊天界面；输出真实的 .mp4 / .png 文件到项目工作区。

  • 视觉方向：5 种精选流派（Editorial Monocle、Modern Minimal、Warm Soft、Tech Utility、Brutalist Experimental）——每种都包含确定性的 OKLch 调色板 + 字体栈 (apps/web/src/prompts/directions.ts)。

  • 设备外框：iPhone 15 Pro、Pixel、iPad Pro、MacBook、Browser Chrome —— 像素级精确，在 assets/frames/ 下跨技能共享。

  • 导入：将 Claude Design 导出的 ZIP 文件拖入欢迎对话框 —— POST /api/import/claude-design 会将其解析为真实项目，以便你的代理可以从 Anthropic 停止的地方继续编辑。

← 返回新闻列表 / Back to news list