open-design

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: open-design
description: >
  Route design-generation work into the right Open Design workflow mode — prototype, deck, document, or media artifact.
  Use when the user needs local-first UI prototype generation, presentation deck creation, or design-system-aware
  HTML/PDF/PPTX artifacts via locally-installed coding agents. Supports 72 built-in design systems, 5 visual directions,
  93 media prompt templates, and multi-format export. Triggers on:
  open-design, local design tool, prototype generation, design deck, design artifact, design agent workflow,
  open design prototype, design system artifact, UI prototype generation.
allowed-tools: Bash Read Write Edit Glob Grep WebFetch
compatibility: Requires Node.js ~24 and pnpm 10.33.x. Run `pnpm tools-dev run web` to launch the local UI. Auto-detects 13+ coding agent CLIs (Claude Code, Cursor, Gemini CLI, GitHub Copilot, etc.). Extend with file-based skills in the `skills/` directory. Plugin install via `claude plugin marketplace add nexu-io/open-design`.
license: MIT
metadata:
  tags: open-design, design-tool, local-first, prototype, deck, ui-generation, multi-format, design-system, media-generation, html-export, pptx-export
  version: "1.0"
  source: https://github.com/nexu-io/open-design
  platforms: Claude, Gemini, Codex, ChatGPT
---

# open-design — local-first design artifact generation

> **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

## 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

## Do not use this skill when

- The task is live UI component authoring in a real codebase → route to `stitch-skills` or `design-system`
- 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-accessibility`

## Instructions

### Step 1: Capture the generation mode

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:

1. If output is a UI prototype or landing page → choose `prototype` mode
2. If output is a presentation or investor deck → choose `deck` mode
3. If output is a long-form document or spec → choose `document` mode
4. If media (image/video/audio) generation is the primar