Agent Skills 技能库 · 进阶

Open Design 是什么：给小白的开源设计工作台教程

介绍 nexu-io/open-design 的定位、适合场景、安装方式、CLI 选择、第一条设计任务怎么写，以及如何用它做网页、移动端、海报和 PPT 原型。

  • Open Design
  • 设计 Agent
  • Claude Code
  • Codex
更新于 2026-05-24

一句话结论

Open Design 可以理解成开源、本地优先的 Claude Design 替代品：你选 Skill 和设计系统，它调用本机 Claude Code、Codex、OpenCode 等 CLI 生成可预览的设计原型。

适用场景

  • 想让 Agent 帮你做落地页、SaaS 首页、仪表盘、移动端原型、海报或 PPT
  • 希望设计过程可本地运行、可换模型、可接自己的 API Key
  • 想给客户先出一个能打开预览的 Demo，再继续细化交付

常见现象

  • 直接让 AI 生成网页，结果很像模板，风格和细节不稳定
  • 不会 Figma，但又想先做一个能给客户看的原型
  • Claude Code、Codex、OpenCode 都能写代码，却不知道怎么把它们变成设计工作流

原因解释

  • Open Design 把设计任务拆成 Skill、设计系统、提问表单、方向选择、Todo 计划、预览 iframe 和导出文件
  • 它本身不绑定某一个模型，而是自动检测本机 PATH 里的 Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode 等 CLI
  • 如果没有本地 CLI，也可以走 BYOK API 模式，填写 baseUrl、apiKey、model 后由代理转成同一套聊天流

解决步骤

  1. 先决定你要做的设计类型：网页原型、SaaS 落地页、Dashboard、移动 App、社媒轮播、海报还是 PPT
  2. 准备运行环境：最省事用 Docker；想开发和改源码用 Node 24 + Corepack + pnpm
  3. 安装或配置一个设计引擎：Claude Code、Codex、OpenCode、Cursor Agent 任意一个即可
  4. 打开 Open Design 后选 Skill，再选 Design System，例如 Neutral Modern、Linear、Stripe、Vercel、Apple 等
  5. 按它弹出的 discovery 表单补齐受众、语气、品牌、约束，让 Agent 先问清楚再生成
  6. 预览右侧 artifact，发现问题用“修改颜色 / 缩小标题 / 改成移动端三屏”这类具体反馈继续迭代

可复制命令

git clone https://github.com/nexu-io/open-design.git
cd open-design
cd deploy
docker compose up -d
# 浏览器打开 http://localhost:7456
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version
pnpm install
pnpm tools-dev run web
pnpm tools-dev status
pnpm tools-dev logs
pnpm tools-dev check
pnpm tools-dev stop

仍然不行怎么办

  • 如果启动失败，先确认 Node 是 24.x、pnpm 是项目锁定版本、Docker Desktop 已运行
  • 如果检测不到 Claude Code / Codex，检查 CLI 是否在 PATH 里，尤其是 macOS GUI 启动时 PATH 可能和终端不同
  • 如果 Agent 生成很慢或失败，先换一个更简单的 Skill，例如 web-prototype，再减少页面数量
  • 如果设计质量不够，先补品牌素材、参考网站、禁用风格和验收标准，不要只说“高级一点”

它能做什么

  • 网页和落地页：营销首页、SaaS Landing、产品介绍页、文档页。
  • 业务界面：Dashboard、后台管理、数据看板、CRM 或运营工具原型。
  • 移动端：iPhone / Pixel 风格的多屏 App 原型和 onboarding。
  • 内容物料：社媒轮播、海报、邮件模板、动效分镜、像素风解释页。
  • PPT / Deck：基于 guizang-ppt 等技能生成杂志感网页 PPT，并支持导出。

小白理解它的工作方式

  1. Skill 决定这次要做什么类型的东西，例如 dashboard、mobile-app、social-carousel。
  2. Design System 决定视觉语言，例如 Linear 的克制、Stripe 的商业感、Apple 的留白。
  3. Discovery 表单先问清受众、语气、内容规模和限制，减少 Agent 自由发挥。
  4. 本地 daemon 调起你电脑里的 Claude Code / Codex / OpenCode，让它在真实文件夹里写文件。
  5. 生成结果会作为 artifact 放进预览窗口，可以继续改，也可以保存、导出 HTML / PDF / ZIP / PPTX。

Claude Code、Codex、OpenCode 怎么选

  • Claude Code：适合交互式改设计、边看边调、需要模型理解复杂风格时使用。
  • Codex：适合多文件重构、长任务、批量生成页面和需要明确 AGENTS.md 约束的项目。
  • OpenCode：适合想用开源客户端和自定义 provider 的用户。
  • BYOK API 模式：适合没有安装 CLI，或者只想填 1A1API / OpenAI-compatible 接口试用的人。
  • 第一次试用不必纠结，能被 Open Design 检测到的 CLI 先用起来，再换模型对比。

第一条任务这样写

请用 Open Design 帮我做一个可预览原型。\n类型：{网页 / Dashboard / 移动端 / PPT / 海报}\n业务：{你的业务说明}\n目标用户：{谁会看}\n核心内容：{必须出现的模块，3-6 条}\n参考风格：{例如 Linear / Stripe / Apple / Notion / 小红书}\n不想要：{不要大渐变、不要营销废话、不要卡片堆太满}\n输出要求：先给我一个可点击/可预览版本，再列出还能继续优化的 5 个点。

小白第一次试跑路线

  1. 先用 Docker 跑起来，少碰 Node 依赖问题。
  2. 先选 web-prototype 或 saas-landing，不要一上来做复杂多页应用。
  3. 只给 3-5 个模块，例如 Hero、功能、流程、案例、CTA。
  4. 第一版只看结构和风格，不要纠结每个字。
  5. 第二轮再让 Agent 做视觉细节：字号、间距、按钮、移动端适配。
  6. 最终导出 HTML 或 ZIP，作为客户预览 Demo 或交给开发继续实现。

注意事项

  • 这是设计原型工具，不等于完整生产系统；上线前仍要做代码审查、性能、安全和兼容性测试。
  • 连接本地 CLI 时，Agent 能读写项目文件；只在可信目录里运行，不要把私密资料全塞进去。
  • BYOK API Key 不要写进公开截图、仓库或示例链接。
  • 仓库迭代很快，README 里 skills / design systems 数量可能会变，实际以 GitHub 最新说明和 release 为准。

参考来源

  • GitHub 仓库：https://github.com/nexu-io/open-design
  • 官网：https://open-design.ai/
  • Quickstart：https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md
  • README 中说明其本地优先、可检测 16 个 coding-agent CLI、内置 Skills 和 Design Systems，并支持 BYOK API 模式。
  • 仓库元数据读取时间：2026-05-24，GitHub 显示约 50.7k stars、5.8k forks，默认分支 main。

相关问题

还卡着？

可以把截图、日志、需求单或当前页面链接发到 zhemuy@gmail.com。