SOURCE
Open Design 实践分享 摘要
文档概览
- 作者将 Open Design 定位为“AI 设计工作流中间层”，而非自带模型的独立 AI 模型：它组合技能和设计规范，再调用本机已安装的 Claude Code 等编码 Agent 执行设计任务。
- 文中把它包装为 Claude Design 的开源替代方案，并主张其可本地运行、支持多模型与私有化部署，适合将设计原型、设计源码和后续开发衔接起来。该定位和比较结论均为作者观点。
- 文章特别强调
SKILL.md、DESIGN.md、品牌设计系统、实时 iframe 预览、五维自评审和 HTML/PDF/PPTX/ZIP/Markdown/MP4 导出等要素。
关键事实
作者描述的产品定位
- 原文称 Open Design 采用 Apache-2.0 协议，支持 Web、桌面端和 Docker 部署，且项目文件与设计源码保存在本地、不上传第三方云端。该陈述未独立核验。
- 原文认为 Claude Design 存在订阅成本、额度、模型绑定、云端数据处理、设计系统不可定制及更新停滞等问题；又称 Open Design 与 Claude Code 的组合可解决这些问题。这是比较性和宣传性主张，不应视作已验证事实。
- 文中声称 Open Design 内置 151 套品牌设计系统、100+ 可组合技能，并可自动识别 25 种主流 CLI 工具；这些数量和覆盖范围均来自原文。
三层架构
- 前端层：原文称 Web 界面以 Next.js 16 构建，使用沙盒 iframe 实时预览设计结果，并支持多端自适应预览。
- 本地守护进程层：原文称 Node daemon 会扫描电脑 PATH，识别并绑定 Claude Code 等 CLI；使用 SQLite 持久化项目、会话和模板数据，并提供 SSE 流式接口与标准 MCP 服务。
- 运行时层：负责组合技能、设计系统与 Agent 调度，执行文件生成及多格式导出逻辑。
作者描述的运行流程
- 用户输入自然语言设计需求，并在标准化表单中补充受众、调性、平台与品牌规则。
- 系统组合
SKILL.md技能库和DESIGN.md品牌规范，再通过 stdio 调用 Agent；这一机制与 设计规范驱动的 AI 界面生成、设计令牌与组件规则 的持久化上下文思路相关。 - 原文称 Claude Code 在具备本地文件权限的前提下读取模板、编写 CSS/HTML 并完成布局。
- 内置评审从品牌贴合度、结构、工艺、可用性、创意五个维度进行自评；低分时自动重做。评审是否实际生效、评分规则及重做阈值，原文没有给出可复现细节。
- 成品在 iframe 中实时渲染，可在线微调，并可一键导出 HTML、PDF、PPTX、ZIP、Markdown、MP4。
反“AI 假设计”规则
- 文中称存在 Slop 黑名单，禁止暴力紫色渐变、通用 Emoji、手绘假人脸、滥用 Inter 字体及编造虚假数据等模式。
- 对无真实数据的场景，原文建议以破折号占位，而不是生成虚构数据。
重要细节
与 Claude Design、Claude Code 的关系
- 原文将 Claude Design 描述为 Anthropic 于 2026-04-17 上线、依托 Opus 4.7 的产品，并称 Open Design 在 11 天后发布、两周获得 54K+ GitHub Star；文章标题另有“86.7K+ Star”表述。日期和星标数字彼此可能对应不同统计时点，且均未独立核验。
- 作者称 Claude Design 仅绑定 Opus 4.7、以云端运行；称 Open Design 可复用 Claude Code 或任意大模型，支持 BYOK 及 OpenAI、Anthropic、Azure、Gemini、Ollama、vLLM 等接口。这些兼容性表述应按原文看待。
- 文中称 Open Design 可通过 MCP 让 Claude Code 读取设计源码，实现设计到前后端开发的衔接；安装命令写作
od mcp install <工具名>。 - 作者声称 Open Design 0.8.0 重构为插件化内核，拥有 261 个官方插件和 183 个社区参考插件；这些版本与数量未独立验证。
部署前置条件
- 桌面端与源码部署前，原文要求安装并配置 Claude Code CLI。
- 原文指定 Node 24 和 pnpm 10.33.x，称版本不匹配会报错；源码安装还需要 Git。
- 桌面客户端路径：访问
https://open-design.ai下载 macOS Apple Silicon/Intel、Windows x64 或 Linux AppImage 安装包；在设置中选择 Claude Code，自动检测环境并执行连通性测试。下载可用性与具体安装包未独立验证。
源码与 Docker 操作（按原文记录）
- 源码方式：克隆
https://github.com/nexu-io/open-design，进入项目目录后执行corepack enable、pnpm install、pnpm tools-dev run web；原文称随后访问localhost:3000。 - Docker 方式：进入
open-design/deploy，以.env.example复制生成.env，创建OD_API_TOKEN，再运行 Docker Compose；原文称服务地址为http://localhost:7456。 - 原文将 Docker 称为服务器或“无本地环境”优先方式，但同时声称会自动适配 Claude Code 接口；远程服务器如何访问本地 CLI、鉴权与网络边界并未在原文中说明。
- 原文明确声称不支持 Vercel 网页部署。该限制未独立核验。
Claude Code 自定义接口配置
- 原文示例通过
ANTHROPIC_BASE_URL与ANTHROPIC_API_KEY环境变量配置中转地址和密钥；Windows PowerShell 对应使用$env:语法。 - 另一种原文示例为
claude config set api-url和claude config set api-key，之后执行claude "测试连接"验证。命令是否适用于当前 Claude Code 版本，应以其官方文档和本地 CLI 帮助为准。 - 中转地址、API 密钥与
OD_API_TOKEN属于敏感配置，不应写入版本控制或公开日志。
原文给出的示例工作流
- 新建项目时选择
web-prototype网页原型技能，并选择 Cursor、Vercel 等设计系统。 - 示例需求为“做一款 AI 工具官网，简约科技风”；然后从极简、杂志、科技、粗野、柔和五种视觉方向中选风格。
- 原文称运行中会展示 Todo 进度，支持框选局部修改和一键切换配色主题；完成后可导出 HTML 项目包、PDF 海报或 MP4 视频，并通过 MCP 继续开发前后端。
高频问题与原文处置
- Node 版本不匹配：原文建议以 nvm 或 fnm 安装并切换 Node 24，例如
nvm install 24 && nvm use 24。 - 检测不到 Claude Code：原文建议 macOS 使用
which claude、Windows 使用where claude确认可执行文件在全局 PATH，再以pnpm tools-dev stop && pnpm tools-dev start web重启守护进程。 - 端口被占用：原文给出
pnpm tools-dev run web --daemon-port 17457 --web-port 17574，将守护进程和 Web 端口分别改为 17457、17574。 - Ollama 接入失败：原文建议改用 OpenAI 兼容模式，将 Base URL 设为
http://localhost:11434/v1，并称无需密钥；实际认证和模型接口要求可能随部署配置变化。 - 生成质感较差：原文建议完整填写需求表单、优先选用其宣称的 151 套品牌设计系统、开启五维自评审；使用第三方模型代理时，应开启 SSRF 防护校验。
边界与解读
- “完全平替”“全面碾压”“商用级”“不限次数不限额度”“一键生成”等是原文营销式结论，不能据此推断真实成本、输出质量、版权、隐私合规或生产可用性。
- 即便设计文件在本地，Agent、模型 API、中转服务、云端功能或第三方媒体生成服务是否传输数据，仍取决于实际配置；不能仅凭原文的“本地优先”表述认定数据绝不外流。
- 原文提到 Open Design Cloud 按 Token 计费，这与“本地零费用”的表述并不冲突，但意味着模型、API、中转或云服务仍可能产生费用。
- 对外部模型和 API 的支持范围、MCP 行为、导出质量、CLI 检测结果和插件数量，部署前应查看项目仓库、发布说明和实际版本配置。