open-design

open-design — 本地优先的设计产物生成

关键词：open-design · local design tool · prototype generation · design artifact

Anthropic 的 Claude Design 的开源替代方案——使用已安装在你机器上的编码 Agent 生成 Web、移动端和桌面端原型、演示文稿和媒体产物。

选择最适合当前任务的最小生成模式时，Open Design 最有用：

• 先从原型开始，再考虑完整演示文稿
• 先选择一个设计系统，再叠加自定义样式
• 选择一种输出格式（先用 HTML 审阅，再导出为 PDF/PPTX）
• 使用第 1 轮发现表单，在开始生成前减少重定向循环

何时使用此技能

• 用户需要通过单条提示词生成本地优先的 UI 原型、演示文稿或文档产物
• 用户希望使用已安装的编码 Agent（Claude Code、Cursor、Gemini CLI 等）生成设计产物
• 用户希望将 72 种内置设计系统之一（Linear、Stripe、Vercel、Notion、Apple 等）应用于输出
• 用户需要多格式导出：HTML 审阅 → PDF、PPTX、ZIP 或 Markdown
• 用户希望在设计产物中嵌入 AI 生成的图像、视频或音频媒体
• 用户希望通过自定义文件型技能扩展 Open Design，或将其安装为 Claude Code 插件

不要在以下情况使用此技能

• 任务是在真实代码库中编写实时 UI 组件 → 转至 stitch-skills 或 design-system
• 任务是视频制作或 Remotion 动画 → 转至 video-production
• 任务是无需应用设计系统的数据驱动型演示文稿 → 转至 presentation-builder
• 任务是压缩或优化现有媒体文件 → 转至 compresso
• 任务是进行广泛的 Web UI 评审或审计 → 转至 web-accessibility

说明

步骤 1：确定生成模式

在选择工作流前，收集最少必要信息：

• 输出类型：UI 原型、演示文稿、落地页、文档或媒体产物
• 设计系统：72 种内置设计系统之一（Linear、Stripe、Vercel、Notion、Tesla、Apple……）或自定义
• 视觉方向：5 种方向之一（极简、醒目、活泼、企业风、深色）
• 导出格式：HTML 审阅、PDF、PPTX、ZIP 或 Markdown
• Agent：要委派任务的已安装 CLI（自动检测或明确指定）

使用以下规则：

1. 如果输出是 UI 原型或落地页 → 选择 prototype 模式
2. 如果输出是演示文稿或投资人演示文稿 → 选择 deck 模式
3. 如果输出是长篇文档或规范 → 选择 document 模式
4. 如果主要输出是媒体（图像/视频/音频）生成 → 选择 media 模式
5. 如果用户尚未选择设计系统 → 使用第 1 轮发现表单，在生成前减少偏差

步骤 2：安装 Open Design

# Clone and install
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install

# Start the local web UI
pnpm tools-dev run web

要求：

• Node.js ~24
• pnpm 10.33.x

插件安装（Claude Code）：

claude plugin marketplace add nexu-io/open-design

从 jeo-skills 安装：

npx skills add https://github.com/akillness/jeo-skills --skill open-design

生命周期命令：

pnpm tools-dev start    # start daemon
pnpm tools-dev stop     # stop daemon
pnpm tools-dev run web  # open local web UI
pnpm tools-dev status   # check status
pnpm tools-dev logs     # tail logs
pnpm tools-dev inspect  # inspect agent connections
pnpm tools-dev check    # preflight check

步骤 3：选择合适的生成模式

A. 原型模式

适用于用户需要 Web、移动端或桌面端 UI 模型图的情况。

Mode: Prototype
Design system: Linear (or any of 72 built-ins)
Visual direction: minimal / bold / playful / enterprise / dark
Output: HTML review → PPTX / PDF / ZIP

适用于：

• SPA 仪表板、落地页、移动端屏幕
• 多页面原型流程
• 实际实现前与设计系统保持一致的模型图

B. 演示文稿模式

适用于用户需要投资人演示文稿、路线图或架构演示文稿的情况。

Mode: Deck
Design system: Vercel / Stripe / Notion (pick one)
Visual direction: enterprise / bold
Output: PPTX, PDF, or Google Slides

适用于：

• 投资人 / 路线图 / 发布演示文稿
• 架构和演示文稿
• 工作坊或游戏提案幻灯片

路由：对于不应用设计系统的纯演示文稿任务，转至 presentation-builder。

C. 文档模式

适用于输出为长篇技术文档、规范或样式化报告的情况。

Mode: Document
Design system: pick one for consistent typography/spacing
Output: Markdown, PDF

适用于：

• 设计规范和系统文档
• 导出为 PDF 的样式化技术报告

D. 媒体模式

当主要输出为生成的图像、视频或音频时使用。

支持的生成后端：

• 图像：gpt-image-2（通过集成的编码 Agent）
• 视频：Seedance 2.0
• HTML → MP4：HyperFrames
• 93 个即用型提示词模板，涵盖产品、营销和社交媒体类别

步骤 4：应用设计系统

Open Design 内置了 72 个设计系统，包括：

• 统一的配色方案、排版和间距标记
• 跨格式一致性（HTML、PPTX 和 PDF 使用同一系统）
• 以真实产品命名的系统（Linear、Stripe、Vercel、Notion、Tesla、Apple 等）

每个产物只使用一个设计系统。混用多个系统会导致输出不一致。

步骤 5：导出产物

选择满足需求的最小输出格式：

格式	适用场景
HTML 预览	快速征求利益相关方意见，在最终导出前进行迭代
PPTX	演示文稿幻灯片，导出后可编辑
PDF	最终交付、打印
ZIP	包含资源的完整产物包
Markdown	文档、集成到 Wiki

建议先进行 HTML 预览，在导出为 PDF/PPTX 前发现方向性问题。

步骤 6：通过自定义技能扩展

Open Design 支持基于文件的技能插件：

• 将技能文件夹放入 skills/ 目录并重启
• 技能文件夹遵循本仓库使用的相同 SKILL.md 约定
• 可通过 GitHub issues 和 PR 提交社区技能和设计系统

# Add a custom skill to Open Design
cp -r my-custom-skill open-design/skills/
pnpm tools-dev stop && pnpm tools-dev run web

示例

示例 1：SaaS 仪表板原型

Mode: Prototype | Design system: Linear | Direction: minimal
Prompt: "Analytics dashboard with sidebar nav, KPI cards, and a time-series chart"
Export: HTML review → PPTX

示例 2：投资人路演演示文稿

Mode: Deck | Design system: Vercel | Direction: enterprise
Prompt: "10-slide investor deck: problem, solution, market, traction, team, ask"
Export: PPTX

示例 3：产品图像生成

Mode: Media | Backend: gpt-image-2 | Template: Product hero
Prompt: "Clean product hero image for a developer CLI tool, dark background, code aesthetic"

示例 4：插件安装

# Claude Code plugin
claude plugin marketplace add nexu-io/open-design

最佳实践

1. 使用第 1 轮需求探索表，在生成前确定设计系统、视觉方向和输出格式；遇到含糊的请求时不要跳过此步骤。
2. 每个产物只选择一个设计系统，以确保跨格式输出一致。
3. 建议先进行 HTML 预览，再导出为 PDF/PPTX，以降低迭代成本。
4. 仅当生成的图像/视频是主要交付内容而非副作用时，才使用媒体模式。
5. 对于真实代码库中的 UI 组件，请改用 stitch-skills 或 design-system。
6. 向 Open Design 添加基于文件的技能时，遵循本仓库使用的相同 SKILL.md 格式。
7. 首次使用前，建议运行 pnpm tools-dev check，以验证 Node.js 和 pnpm 版本要求。

参考资料

• Open Design GitHub 仓库
• stitch-skills — 用于在真实代码库中使用 AI 生成的 UI 组件
• presentation-builder — 用于制作无需应用设计系统的数据驱动型演示文稿产物
• video-production — 用于 Remotion/可编程视频制作
• compresso — 用于离线媒体压缩
• web-accessibility — 用于全面的 Web UI 审查和指南