open-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

open-design — local-first design artifact generation

open-design — 本地优先的设计制品生成

Keyword:
open-design
·
local design tool
·
prototype generation
·
design artifact
Open-source alternative to Anthropic's Claude Design — generates web, mobile, and desktop prototypes, decks, and media artifacts using coding agents already installed on your machine.

Open Design is most useful when you choose the smallest generation mode that fits the job:

start with a prototype before reaching for a full deck
pick one design system before layering custom styles
choose one output format (HTML review before PDF/PPTX export)
use the Turn 1 discovery form to reduce redirect cycles before generation begins

关键词:
open-design
·
local design tool
·
prototype generation
·
design artifact
Anthropic的Claude Design的开源替代方案——使用您机器上已安装的coding agents生成网页、移动端和桌面端原型、演示文稿以及媒体制品。

Open Design最适合在您选择最贴合任务的最小生成模式时使用：

在制作完整演示文稿前先从原型开始
在添加自定义样式前先选择一个设计系统
选择一种输出格式（先导出HTML进行评审，再导出PDF/PPTX）
在生成开始前使用Turn 1发现表单减少重定向循环

When to use this skill

何时使用此技能

The user needs a local-first UI prototype, presentation deck, or document artifact from a single prompt
The user wants to generate design artifacts using coding agents they already have installed (Claude Code, Cursor, Gemini CLI, etc.)
The user wants to apply one of 72 built-in design systems (Linear, Stripe, Vercel, Notion, Apple, etc.) to their output
The user needs multi-format export: HTML review → PDF, PPTX, ZIP, or Markdown
The user wants AI-generated images, video, or audio media embedded in design artifacts
The user wants to extend Open Design with custom file-based skills or install it as a Claude Code plugin

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

Do not use this skill when

何时不使用此技能

The task is live UI component authoring in a real codebase → route to
```
stitch-skills
```
or
```
ui-component-patterns
```
The task is video production or Remotion animation → route to
```
video-production
```
The task is a data-driven presentation deck without design-system application → route to
```
presentation-builder
```
The task is compressing or optimizing existing media files → route to
```
compresso
```
The task is a broad web UI critique or audit → route to
```
web-design-guidelines
```

任务是在真实代码库中进行实时UI组件创作 → 转向
```
stitch-skills
```
或
```
ui-component-patterns
```
任务是视频制作或Remotion动画 → 转向
```
video-production
```
任务是无需应用设计系统的数据驱动型演示文稿 → 转向
```
presentation-builder
```
任务是压缩或优化现有媒体文件 → 转向
```
compresso
```
任务是宽泛的网页UI评审或审计 → 转向
```
web-design-guidelines
```

Instructions

使用说明

Step 1: Capture the generation mode

步骤1：确定生成模式

Collect the minimum packet before choosing a workflow:

Output type: UI prototype, presentation deck, landing page, document, or media artifact
Design system: one of the 72 built-ins (Linear, Stripe, Vercel, Notion, Tesla, Apple…) or custom
Visual direction: one of 5 directions (minimal, bold, playful, enterprise, dark)
Export format: HTML review, PDF, PPTX, ZIP, or Markdown
Agent: which installed CLI to delegate to (auto-detected or explicit)

Use this rule set:

If output is a UI prototype or landing page → choose
```
prototype
```
mode
If output is a presentation or investor deck → choose
```
deck
```
mode
If output is a long-form document or spec → choose
```
document
```
mode
If media (image/video/audio) generation is the primary output → choose
```
media
```
mode
If the user has not chosen a design system → use the Turn 1 discovery form to reduce drift before generating

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

输出类型：UI原型、演示文稿、着陆页、文档或媒体制品
设计系统：72个内置系统之一（Linear、Stripe、Vercel、Notion、Tesla、Apple…）或自定义系统
视觉风格：5种风格之一（极简、醒目、活泼、企业风、深色）
导出格式：HTML评审版、PDF、PPTX、ZIP或Markdown
Agent：要委托的已安装CLI（自动检测或手动指定）

遵循以下规则：

如果输出是UI原型或着陆页 → 选择
```
prototype
```
模式
如果输出是演示文稿或投资者推介Deck → 选择
```
deck
```
模式
如果输出是长篇技术文档或规格说明 → 选择
```
document
```
模式
如果主要输出是媒体（图片/视频/音频）生成 → 选择
```
media
```
模式
如果用户未选择设计系统 → 在生成前使用Turn 1发现表单减少偏差

Step 2: Install Open Design

步骤2：安装Open Design

bash

undefined

bash

undefined

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

启动本地Web UI

pnpm tools-dev run web


Requirements:
- Node.js ~24
- pnpm 10.33.x

**Plugin install (Claude Code):**
```bash
claude plugin marketplace add nexu-io/open-design

Install from oh-my-skills:

bash

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

Lifecycle commands:

bash

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

pnpm tools-dev run web


要求：
- Node.js ~24
- pnpm 10.33.x

**插件安装（Claude Code）：**
```bash
claude plugin marketplace add nexu-io/open-design

通过oh-my-skills安装：

bash

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

生命周期命令：

bash

pnpm tools-dev start    # 启动守护进程
pnpm tools-dev stop     # 停止守护进程
pnpm tools-dev run web  # 打开本地Web UI
pnpm tools-dev status   # 检查状态
pnpm tools-dev logs     # 查看日志
pnpm tools-dev inspect  # 检查Agent连接
pnpm tools-dev check    # 预检查

Step 3: Choose the right generation mode

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

A. Prototype mode

A. 原型模式

Use when the user needs a web, mobile, or desktop UI mockup.

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

Best for:

SPA dashboards, landing pages, mobile screens
Multi-page prototype flows
Design-system-aligned mockups before actual implementation

当用户需要网页、移动端或桌面端UI原型时使用。

模式: Prototype
设计系统: Linear（或72个内置系统中的任意一个）
视觉风格: minimal / bold / playful / enterprise / dark
输出: HTML评审版 → PPTX / PDF / ZIP

最适合：

SPA仪表盘、着陆页、移动端界面
多页面原型流程
实际开发前符合设计系统的原型

B. Deck mode

B. 演示文稿模式

Use when the user needs an investor pitch, roadmap, or architecture deck.

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

Best for:

Investor / roadmap / launch decks
Architecture and demo presentations
Workshop or game-pitch slide decks

Routes: for deck-only work without design-system application, route to

presentation-builder

当用户需要投资者推介、路线图或架构演示文稿时使用。

模式: Deck
设计系统: Vercel / Stripe / Notion（选其一）
视觉风格: enterprise / bold
输出: PPTX、PDF或Google Slides

最适合：

投资者/路线图/发布演示文稿
架构和演示展示
研讨会或游戏推介幻灯片

注意：如果仅需制作演示文稿且无需应用设计系统，请转向

presentation-builder

。

C. Document mode

C. 文档模式

Use when the output is a long-form technical document, spec, or styled report.

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

Best for:

Design specs and system documentation
Styled technical reports exported to PDF

当输出是长篇技术文档、规格说明或样式化报告时使用。

模式: Document
设计系统: 选择一个以保持一致的排版/间距
输出: Markdown、PDF

最适合：

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

D. Media mode

D. 媒体模式

Use when the primary output is generated images, video, or audio.

Supported generation backends:

Images: gpt-image-2 (via integrated coding agents)
Video: Seedance 2.0
HTML → MP4: HyperFrames
93 ready-to-use prompt templates across product, marketing, and social media categories

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

支持的生成后端：

图片: gpt-image-2（通过集成的coding agents）
视频: Seedance 2.0
HTML → MP4: HyperFrames
93个现成提示模板，涵盖产品、营销和社交媒体类别

Step 4: Apply a design system

步骤4：应用设计系统

Open Design includes 72 built-in design systems with:

Consistent color palettes, typography, and spacing tokens
Cross-format coherence (same system across HTML, PPTX, and PDF)
Named systems from real products (Linear, Stripe, Vercel, Notion, Tesla, Apple, and more)

Keep to one design system per artifact. Mixing multiple systems produces inconsistent output.

Open Design包含72个内置设计系统，具备：

一致的调色板、排版和间距令牌
跨格式一致性（HTML、PPTX和PDF使用同一系统）
来自真实产品的命名系统（Linear、Stripe、Vercel、Notion、Tesla、Apple等）

每个制品仅使用一个设计系统。混合多个系统会导致输出不一致。

Step 5: Export the artifact

步骤5：导出制品

Choose the smallest output format that meets the need:

Format	Best for
HTML review	Quick stakeholder review, iteration before final export
PPTX	Presentation slides, editable after export
PDF	Final delivery, print
ZIP	Full artifact package including assets
Markdown	Documentation, wiki integration

Prefer HTML review first to catch direction issues before committing to PDF/PPTX export.

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

格式	最佳用途
HTML评审版	快速利益相关方评审，最终导出前迭代
PPTX	演示幻灯片，导出后可编辑
PDF	最终交付、打印
ZIP	包含资源的完整制品包
Markdown	文档、维基集成

优先选择HTML评审版，在确定最终导出为PDF/PPTX前发现方向问题。

Step 6: Extend with custom skills

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

Open Design supports file-based skill plugins:

Drop a skill folder into the
```
skills/
```
directory and restart
Skill folders follow the same
```
SKILL.md
```
convention used in this repo
Community skills and design systems can be contributed via GitHub issues and PRs

bash

undefined

Open Design支持文件型技能插件：

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

bash

undefined

Add a custom skill to Open Design

向Open Design添加自定义技能

cp -r my-custom-skill open-design/skills/ pnpm tools-dev stop && pnpm tools-dev run web

undefined

cp -r my-custom-skill open-design/skills/ pnpm tools-dev stop && pnpm tools-dev run web

undefined

Examples

示例

Example 1: SaaS dashboard prototype

示例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

模式: Prototype | 设计系统: Linear | 风格: minimal
提示: "带侧边导航、KPI卡片和时间序列图表的分析仪表盘"
导出: HTML评审版 → PPTX

Example 2: Investor pitch deck

示例2：投资者推介Deck

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

模式: Deck | 设计系统: Vercel | 风格: enterprise
提示: "10页投资者推介Deck：问题、解决方案、市场、业绩、团队、融资需求"
导出: PPTX

Example 3: Product image generation

示例3：产品图片生成

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

模式: Media | 后端: gpt-image-2 | 模板: Product hero
提示: "为开发者CLI工具制作简洁的产品主图，深色背景，代码风格"

Example 4: Plugin install

示例4：插件安装

bash

undefined

bash

undefined

Claude Code plugin

Claude Code插件

claude plugin marketplace add nexu-io/open-design

undefined

claude plugin marketplace add nexu-io/open-design

undefined

Best practices

最佳实践

Use the Turn 1 discovery form to freeze design system, visual direction, and output format before generation — do not skip it for ambiguous requests.
Choose one design system per artifact to keep cross-format output coherent.
Prefer HTML review before committing to PDF/PPTX to save iteration cost.
Use media mode only when generated images/video are the primary deliverable, not a side effect.
For real codebase UI components, route to
```
stitch-skills
```
or
```
ui-component-patterns
```
instead.
When adding file-based skills to Open Design, follow the same
```
SKILL.md
```
format used in this repo.
Prefer
```
pnpm tools-dev check
```
before first use to verify Node.js and pnpm version requirements.

在生成前使用Turn 1发现表单确定设计系统、视觉风格和输出格式——对于模糊请求请勿跳过此步骤。
每个制品仅使用一个设计系统，以保持跨格式输出一致性。
在确定导出为PDF/PPTX前优先选择HTML评审版，以节省迭代成本。
仅当生成的图片/视频是主要交付物时使用媒体模式，而非作为附加效果。
对于真实代码库中的UI组件，请转向
```
stitch-skills
```
或
```
ui-component-patterns
```
。
向Open Design添加文件型技能时，请遵循此仓库中使用的
```
SKILL.md
```
格式。
首次使用前优先运行
```
pnpm tools-dev check
```
，以验证Node.js和pnpm版本要求。

References

参考资料

Open Design GitHub Repository
stitch-skills — for live AI-generated UI components in a real codebase
presentation-builder — for data-driven deck artifacts without design-system application
video-production — for Remotion/programmable video production
compresso — for offline media compression
web-design-guidelines — for broad web UI audits and guidelines

Open Design GitHub仓库
stitch-skills — 用于在真实代码库中实时生成AI驱动的UI组件
presentation-builder — 用于无需应用设计系统的数据驱动型演示文稿制品
video-production — 用于Remotion/可编程视频制作
compresso — 用于离线媒体压缩
web-design-guidelines — 用于宽泛的网页UI评审和指南