Skill-Details

open-design

Useful for generating design prototypes and artifacts, but is tool/workflow-specific.

ÜbereinstimmungMöglichGeprüft für produktdesigner
Quelleakillness/jeo-skillsExterne Quelle
Gemeldete Installationen229Nur Popularitätssignal

Vor Nutzung prüfen

Die automatische Prüfung bewertet Relevanz, nicht Sicherheit oder Empfehlung. Lies vor der Nutzung die Quellanweisungen.

Gespeicherte Quellvorschau

SKILL.md

Dieser Auszug wurde bei der Prüfung gespeichert. Die externe Quelle enthält die vollständige und aktuelle Version.

---
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
Vollständige Quelle auf GitHub lesen (öffnet externe Seite)
Kontext

Verwandte Arbeit