@feimacode/open-design-agent-kit 0.1.4 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -2
- package/assets/claude-skills/article-magazine/SKILL.md +3 -2
- package/assets/claude-skills/card-xiaohongshu/SKILL.md +3 -2
- package/assets/claude-skills/data-report/SKILL.md +3 -2
- package/assets/claude-skills/deck-guizang-editorial/SKILL.md +3 -2
- package/assets/claude-skills/deck-open-slide-canvas/SKILL.md +3 -2
- package/assets/claude-skills/deck-swiss-international/SKILL.md +3 -2
- package/assets/claude-skills/doc-kami-parchment/SKILL.md +3 -2
- package/assets/claude-skills/frame-data-chart-nyt/SKILL.md +3 -2
- package/assets/claude-skills/frame-flowchart-sticky/SKILL.md +3 -2
- package/assets/claude-skills/frame-glitch-title/SKILL.md +3 -2
- package/assets/claude-skills/frame-light-leak-cinema/SKILL.md +3 -2
- package/assets/claude-skills/frame-liquid-bg-hero/SKILL.md +3 -2
- package/assets/claude-skills/frame-logo-outro/SKILL.md +3 -2
- package/assets/claude-skills/frame-macos-notification/SKILL.md +3 -2
- package/assets/claude-skills/guizang-ppt/SKILL.md +3 -2
- package/assets/claude-skills/mockup-device-3d/SKILL.md +3 -2
- package/assets/claude-skills/open-design/SKILL.md +4 -4
- package/assets/claude-skills/open-design/references/remixable-examples.md +1 -1
- package/assets/claude-skills/ppt-keynote/SKILL.md +3 -2
- package/assets/claude-skills/resume-modern/SKILL.md +3 -2
- package/assets/claude-skills/social-reddit-card/SKILL.md +3 -2
- package/assets/claude-skills/social-spotify-card/SKILL.md +3 -2
- package/assets/claude-skills/social-x-post-card/SKILL.md +3 -2
- package/assets/claude-skills/vfx-text-cursor/SKILL.md +3 -2
- package/assets/claude-skills/video-hyperframes/SKILL.md +3 -2
- package/assets/codex-skills/article-magazine/SKILL.md +2 -2
- package/assets/codex-skills/card-xiaohongshu/SKILL.md +2 -2
- package/assets/codex-skills/data-report/SKILL.md +2 -2
- package/assets/codex-skills/deck-guizang-editorial/SKILL.md +2 -2
- package/assets/codex-skills/deck-open-slide-canvas/SKILL.md +2 -2
- package/assets/codex-skills/deck-swiss-international/SKILL.md +2 -2
- package/assets/codex-skills/doc-kami-parchment/SKILL.md +2 -2
- package/assets/codex-skills/frame-data-chart-nyt/SKILL.md +2 -2
- package/assets/codex-skills/frame-flowchart-sticky/SKILL.md +2 -2
- package/assets/codex-skills/frame-glitch-title/SKILL.md +2 -2
- package/assets/codex-skills/frame-light-leak-cinema/SKILL.md +2 -2
- package/assets/codex-skills/frame-liquid-bg-hero/SKILL.md +2 -2
- package/assets/codex-skills/frame-logo-outro/SKILL.md +2 -2
- package/assets/codex-skills/frame-macos-notification/SKILL.md +2 -2
- package/assets/codex-skills/guizang-ppt/SKILL.md +2 -2
- package/assets/codex-skills/mockup-device-3d/SKILL.md +2 -2
- package/assets/codex-skills/open-design/SKILL.md +4 -4
- package/assets/codex-skills/open-design/references/remixable-examples.md +1 -1
- package/assets/codex-skills/ppt-keynote/SKILL.md +2 -2
- package/assets/codex-skills/resume-modern/SKILL.md +2 -2
- package/assets/codex-skills/social-reddit-card/SKILL.md +2 -2
- package/assets/codex-skills/social-spotify-card/SKILL.md +2 -2
- package/assets/codex-skills/social-x-post-card/SKILL.md +2 -2
- package/assets/codex-skills/vfx-text-cursor/SKILL.md +2 -2
- package/assets/codex-skills/video-hyperframes/SKILL.md +2 -2
- package/out/index.js +2 -2
- package/out/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
# @feimacode/open-design-agent-kit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Build pro-grade design into Claude Code and Codex with one command.**
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npx @feimacode/open-design-agent-kit init
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
That's the whole setup. `init` writes [Open Design](https://github.com/nexu-io/open-design)'s design skills straight into your project, in each agent's own native skill format, and registers the MCP server that goes with them. From then on, ask your agent for a deck, a landing page, a dashboard, or a prototype. It draws on 163 skills, 114 design templates, 152 brand design systems, and 167 remixable examples to build something that looks designed rather than generated.
|
|
10
|
+
|
|
11
|
+
- **No desktop app, no daemon, no account.** There's nothing running in the background, and the skills are plain files in your repo.
|
|
12
|
+
- **No API keys or model settings.** Your agent's own model does all the generation.
|
|
13
|
+
- **No marketplace add or manual copying.** It's modeled on `openspec init`: pick your agents, and it writes the files.
|
|
14
|
+
- **Shareable.** Commit the generated `.claude/skills/`, `.agents/skills/`, and MCP config, and everyone who clones the repo gets the same design skills.
|
|
4
15
|
|
|
5
16
|
## Quick start
|
|
6
17
|
|
|
@@ -37,7 +48,7 @@ Generated skill files are always fully refreshed — no stale entries left behin
|
|
|
37
48
|
|
|
38
49
|
## More
|
|
39
50
|
|
|
40
|
-
Full project layout and the other ways to use
|
|
51
|
+
Full project layout and the other ways to use Open Design (VS Code extension, the Claude Code plugin marketplace, the standalone MCP server) live in the [main repo](https://github.com/feimacode/open-design-agent-kit).
|
|
41
52
|
|
|
42
53
|
## License
|
|
43
54
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-article-magazine"
|
|
3
|
+
description: Magazine Article (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:article-magazine` (Magazine Article).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-card-xiaohongshu"
|
|
3
|
+
description: Xiaohongshu Card (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:card-xiaohongshu` (Xiaohongshu Card).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Xiaohongshu Card template to turn my content into a Xiaohongshu-style swipeable knowledge-card carousel. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-data-report"
|
|
3
|
+
description: Data Visualization Report (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:data-report` (Data Visualization Report).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-deck-deck-guizang-editorial"
|
|
3
|
+
description: Guizang Editorial E-Ink Deck (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:deck:deck-guizang-editorial` (Guizang Editorial E-Ink Deck).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Guizang Editorial E-Ink Deck template to turn my content into an editorial magazine x e-ink horizontal deck with 10 layouts and 5 palettes. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-deck-deck-open-slide-canvas"
|
|
3
|
+
description: Open-Slide 1920 Canvas Deck (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:deck:deck-open-slide-canvas` (Open-Slide 1920 Canvas Deck).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Open-Slide 1920 Canvas Deck template to turn my content into a locked 1920x1080 free-composition deck with React component-level layout. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-deck-deck-swiss-international"
|
|
3
|
+
description: Swiss International Deck (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:deck:deck-swiss-international` (Swiss International Deck).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Swiss International Deck template to turn my content into a 16-column-grid deck with one saturated accent and 22 locked layouts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-doc-kami-parchment"
|
|
3
|
+
description: Kami Parchment Document (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:doc-kami-parchment` (Kami Parchment Document).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Kami Parchment Document template to turn my content into a warm parchment document with monochrome ink-blue accents, one serif family, and editorial-grade typography. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-frame-data-chart-nyt"
|
|
3
|
+
description: NYT-Style Data Chart Frame (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:frame-data-chart-nyt` (NYT-Style Data Chart Frame).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-frame-flowchart-sticky"
|
|
3
|
+
description: Sticky Flowchart Frame (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:frame-flowchart-sticky` (Sticky Flowchart Frame).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-frame-glitch-title"
|
|
3
|
+
description: Glitch Title Frame (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:frame-glitch-title` (Glitch Title Frame).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-frame-light-leak-cinema"
|
|
3
|
+
description: Light-Leak Cinematic Frame (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:frame-light-leak-cinema` (Light-Leak Cinematic Frame).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-frame-liquid-bg-hero"
|
|
3
|
+
description: Liquid Background Hero (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:frame-liquid-bg-hero` (Liquid Background Hero).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-frame-logo-outro"
|
|
3
|
+
description: Logo Outro Frame (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:frame-logo-outro` (Logo Outro Frame).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-frame-macos-notification"
|
|
3
|
+
description: macOS Notification Banner (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:frame-macos-notification` (macOS Notification Banner).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-deck-guizang-ppt"
|
|
3
|
+
description: Write a Brand-to-Revenue Story like a Growth Strategy Lead (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:deck:guizang-ppt` (Write a Brand-to-Revenue Story like a Growth Strategy Lead).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Create \"Write a Brand-to-Revenue Story like a Growth Strategy Lead\" as a Marketing and GTM deck in the Guizang Ppt visual system. Scene: annual-marketing-plan. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce a commercial-grade slide plan, written slides, visual direction, speaker-ready structure, and critic pass against this rubric: can the plan connect creative choices to measurable growth."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-mockup-device-3d"
|
|
3
|
+
description: Device 3D Showcase (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:mockup-device-3d` (Device 3D Showcase).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: open-design
|
|
3
|
-
description: Generate design artifacts (landing pages, decks, prototypes, dashboards, components) using
|
|
3
|
+
description: Generate design artifacts (landing pages, decks, prototypes, dashboards, components) using Open Design's bundled design skills and design systems. Use whenever the user asks to design, build, mock up, or generate something visual — a landing page, pitch deck, dashboard, prototype, or marketing page — even if they don't say "Open Design" explicitly.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
Open Design is a bundled catalog of design skills and design templates (reusable task recipes and rendering styles — both usable interchangeably as a `skillId`) plus design systems (brand-inspired visual token sets), exposed through the `open-design` MCP server's tools.
|
|
7
7
|
|
|
8
8
|
Every skill/template id is namespaced as `od:<mode>:<name>` (e.g. `od:deck:guizang-ppt`), where `mode` is one of: `prototype`, `deck`, `design-system`, `image`, `video`, `template`, `utility`, `audio`. Always pass the full namespaced id as `skillId`. Note: mode `design-system` means "a skill that helps author a design-system deliverable" — it has nothing to do with `designSystemId`, which selects from the separate library of ~150 prebuilt brand design systems (see step 2).
|
|
9
9
|
|
|
10
10
|
A small, curated subset of skills/templates also has its own explicit `/open-design:<id>` skill — if the user's request closely matches one of those, prefer invoking it directly; it pins the exact skillId and often a ready-made example brief, removing any guesswork. Otherwise, follow the flow below yourself.
|
|
11
11
|
|
|
12
|
-
All
|
|
12
|
+
All Open Design content (skill/template text, design system tokens, example briefs) is delivered to you as plain text through the MCP tool calls below — never as a file path. You never need to, and should not, browse or search for Open Design's own files anywhere on disk; `list_open_design_skills` and `prepare_open_design_brief` already return everything you need as plain text.
|
|
13
13
|
|
|
14
14
|
Follow this flow:
|
|
15
15
|
|
|
@@ -20,7 +20,7 @@ Follow this flow:
|
|
|
20
20
|
5. Call `register_open_design_artifact` with the entry path, a `kind`, a `title`, and any `supportingFiles`, so the artifact is recognized and gets its manifest sidecar written.
|
|
21
21
|
6. Optionally call `get_open_design_artifact` to confirm what was written before telling the user it's done.
|
|
22
22
|
|
|
23
|
-
Generated artifacts land under the project's
|
|
23
|
+
Generated artifacts land under the project's Open Design output directory (default `.open-design/`) so they stay visible and trackable in version control like any other project file. This host has no live preview editor — after registering an artifact, just tell the user where it was written; there is nothing further to open automatically.
|
|
24
24
|
|
|
25
25
|
If the user wants to start from or riff on an existing example rather than build something new, prefer `remix_open_design_example` (skillId must have a non-empty `exampleArtifactPath`) over `prepare_open_design_brief` — it copies a working starting artifact into the project and tells you to modify it rather than regenerate from scratch. See [references/remixable-examples.md](references/remixable-examples.md) for the full list of what's available to remix, grouped by mode — check it before calling `list_open_design_skills` with `remixableOnly: true` if a quick skim already answers the question.
|
|
26
26
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Remixable
|
|
1
|
+
# Remixable Open Design examples
|
|
2
2
|
|
|
3
3
|
167 vendored examples have an actual rendered starting artifact you can copy into the workspace and modify, via `remix_open_design_example` with the `id` shown below as `skillId`, instead of generating from scratch with `prepare_open_design_brief`.
|
|
4
4
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-deck-ppt-keynote"
|
|
3
|
+
description: Keynote-style Slides (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:deck:ppt-keynote` (Keynote-style Slides).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Keynote-style Slides template to turn my content into Apple Keynote-quality slides with one card per screen and keyboard left/right navigation. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-resume-modern"
|
|
3
|
+
description: Modern Resume (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:resume-modern` (Modern Resume).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Modern Resume template to turn my content into a modern minimal single-page A4 resume ready for print or PDF export. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-social-reddit-card"
|
|
3
|
+
description: Reddit Post Card (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:social-reddit-card` (Reddit Post Card).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Reddit Post Card template to turn my content into a realistic Reddit post card with vote rail and comment count for a video overlay or story share. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-social-spotify-card"
|
|
3
|
+
description: Spotify Now-Playing Card (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:social-spotify-card` (Spotify Now-Playing Card).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Spotify Now-Playing Card template to turn my content into a Spotify Now Playing-style card with album art, progress bar, and playback controls for a video overlay or personal homepage. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-prototype-social-x-post-card"
|
|
3
|
+
description: X / Twitter Post Card (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:prototype:social-x-post-card` (X / Twitter Post Card).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the X / Twitter Post Card template to turn my content into a realistic X post card with engagement metrics for a video overlay or shareable image card. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-vfx-text-cursor"
|
|
3
|
+
description: VFX Text Cursor (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:vfx-text-cursor` (VFX Text Cursor).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the VFX Text Cursor template to turn my content into a video-intro quote reveal with cursor light trails, chromatic rays, and directional flares. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
name: "od-video-video-hyperframes"
|
|
3
|
+
description: Hyperframes Video (Open Design) — use only when the user explicitly runs this skill
|
|
3
4
|
disable-model-invocation: true
|
|
4
5
|
argument-hint: a brief describing what to build (optional — defaults to a starting example)
|
|
5
6
|
---
|
|
6
7
|
|
|
7
8
|
<!-- generated:curated-entry -->
|
|
8
9
|
|
|
9
|
-
Use the
|
|
10
|
+
Use the Open Design skill `od:video:video-hyperframes` (Hyperframes Video).
|
|
10
11
|
|
|
11
12
|
Brief: "$ARGUMENTS", or if empty: "Use the Hyperframes Video template to turn my content into a Hyperframes / Remotion-compatible continuous frame animation with autoplay support. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
12
13
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: article-magazine
|
|
3
|
-
description: Magazine Article (
|
|
3
|
+
description: Magazine Article (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:article-magazine` (Magazine Article).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: card-xiaohongshu
|
|
3
|
-
description: Xiaohongshu Card (
|
|
3
|
+
description: Xiaohongshu Card (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:card-xiaohongshu` (Xiaohongshu Card).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Xiaohongshu Card template to turn my content into a Xiaohongshu-style swipeable knowledge-card carousel. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: data-report
|
|
3
|
-
description: Data Visualization Report (
|
|
3
|
+
description: Data Visualization Report (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:data-report` (Data Visualization Report).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: deck-guizang-editorial
|
|
3
|
-
description: Guizang Editorial E-Ink Deck (
|
|
3
|
+
description: Guizang Editorial E-Ink Deck (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:deck:deck-guizang-editorial` (Guizang Editorial E-Ink Deck).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Guizang Editorial E-Ink Deck template to turn my content into an editorial magazine x e-ink horizontal deck with 10 layouts and 5 palettes. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: deck-open-slide-canvas
|
|
3
|
-
description: Open-Slide 1920 Canvas Deck (
|
|
3
|
+
description: Open-Slide 1920 Canvas Deck (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:deck:deck-open-slide-canvas` (Open-Slide 1920 Canvas Deck).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Open-Slide 1920 Canvas Deck template to turn my content into a locked 1920x1080 free-composition deck with React component-level layout. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: deck-swiss-international
|
|
3
|
-
description: Swiss International Deck (
|
|
3
|
+
description: Swiss International Deck (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:deck:deck-swiss-international` (Swiss International Deck).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Swiss International Deck template to turn my content into a 16-column-grid deck with one saturated accent and 22 locked layouts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: doc-kami-parchment
|
|
3
|
-
description: Kami Parchment Document (
|
|
3
|
+
description: Kami Parchment Document (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:doc-kami-parchment` (Kami Parchment Document).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Kami Parchment Document template to turn my content into a warm parchment document with monochrome ink-blue accents, one serif family, and editorial-grade typography. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: frame-data-chart-nyt
|
|
3
|
-
description: NYT-Style Data Chart Frame (
|
|
3
|
+
description: NYT-Style Data Chart Frame (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:frame-data-chart-nyt` (NYT-Style Data Chart Frame).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: frame-flowchart-sticky
|
|
3
|
-
description: Sticky Flowchart Frame (
|
|
3
|
+
description: Sticky Flowchart Frame (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:frame-flowchart-sticky` (Sticky Flowchart Frame).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: frame-glitch-title
|
|
3
|
-
description: Glitch Title Frame (
|
|
3
|
+
description: Glitch Title Frame (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:frame-glitch-title` (Glitch Title Frame).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: frame-light-leak-cinema
|
|
3
|
-
description: Light-Leak Cinematic Frame (
|
|
3
|
+
description: Light-Leak Cinematic Frame (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:frame-light-leak-cinema` (Light-Leak Cinematic Frame).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: frame-liquid-bg-hero
|
|
3
|
-
description: Liquid Background Hero (
|
|
3
|
+
description: Liquid Background Hero (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:frame-liquid-bg-hero` (Liquid Background Hero).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: frame-logo-outro
|
|
3
|
-
description: Logo Outro Frame (
|
|
3
|
+
description: Logo Outro Frame (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:frame-logo-outro` (Logo Outro Frame).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: frame-macos-notification
|
|
3
|
-
description: macOS Notification Banner (
|
|
3
|
+
description: macOS Notification Banner (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:frame-macos-notification` (macOS Notification Banner).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: guizang-ppt
|
|
3
|
-
description: Write a Brand-to-Revenue Story like a Growth Strategy Lead (
|
|
3
|
+
description: Write a Brand-to-Revenue Story like a Growth Strategy Lead (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:deck:guizang-ppt` (Write a Brand-to-Revenue Story like a Growth Strategy Lead).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Create \"Write a Brand-to-Revenue Story like a Growth Strategy Lead\" as a Marketing and GTM deck in the Guizang Ppt visual system. Scene: annual-marketing-plan. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce a commercial-grade slide plan, written slides, visual direction, speaker-ready structure, and critic pass against this rubric: can the plan connect creative choices to measurable growth."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: mockup-device-3d
|
|
3
|
-
description: Device 3D Showcase (
|
|
3
|
+
description: Device 3D Showcase (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:mockup-device-3d` (Device 3D Showcase).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: open-design
|
|
3
|
-
description: Generate design artifacts (landing pages, decks, prototypes, dashboards, components) using
|
|
3
|
+
description: Generate design artifacts (landing pages, decks, prototypes, dashboards, components) using Open Design's bundled design skills and design systems. Use whenever the user asks to design, build, mock up, or generate something visual — a landing page, pitch deck, dashboard, prototype, or marketing page — even if they don't say "Open Design" explicitly.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
Open Design is a bundled catalog of design skills and design templates (reusable task recipes and rendering styles — both usable interchangeably as a `skillId`) plus design systems (brand-inspired visual token sets), exposed through the `open-design` MCP server's tools.
|
|
9
9
|
|
|
10
10
|
Every skill/template id is namespaced as `od:<mode>:<name>` (e.g. `od:deck:guizang-ppt`), where `mode` is one of: `prototype`, `deck`, `design-system`, `image`, `video`, `template`, `utility`, `audio`. Always pass the full namespaced id as `skillId`. Note: mode `design-system` means "a skill that helps author a design-system deliverable" — it has nothing to do with `designSystemId`, which selects from the separate library of ~150 prebuilt brand design systems (see step 2).
|
|
11
11
|
|
|
12
12
|
A small, curated subset of skills/templates also has its own explicit `/open-design:<id>` skill — if the user's request closely matches one of those, prefer invoking it directly; it pins the exact skillId and often a ready-made example brief, removing any guesswork. Otherwise, follow the flow below yourself.
|
|
13
13
|
|
|
14
|
-
All
|
|
14
|
+
All Open Design content (skill/template text, design system tokens, example briefs) is delivered to you as plain text through the MCP tool calls below — never as a file path. You never need to, and should not, browse or search for Open Design's own files anywhere on disk; `list_open_design_skills` and `prepare_open_design_brief` already return everything you need as plain text.
|
|
15
15
|
|
|
16
16
|
Follow this flow:
|
|
17
17
|
|
|
@@ -22,7 +22,7 @@ Follow this flow:
|
|
|
22
22
|
5. Call `register_open_design_artifact` with the entry path, a `kind`, a `title`, and any `supportingFiles`, so the artifact is recognized and gets its manifest sidecar written.
|
|
23
23
|
6. Optionally call `get_open_design_artifact` to confirm what was written before telling the user it's done.
|
|
24
24
|
|
|
25
|
-
Generated artifacts land under the project's
|
|
25
|
+
Generated artifacts land under the project's Open Design output directory (default `.open-design/`) so they stay visible and trackable in version control like any other project file. This host has no live preview editor — after registering an artifact, just tell the user where it was written; there is nothing further to open automatically.
|
|
26
26
|
|
|
27
27
|
If the user wants to start from or riff on an existing example rather than build something new, prefer `remix_open_design_example` (skillId must have a non-empty `exampleArtifactPath`) over `prepare_open_design_brief` — it copies a working starting artifact into the project and tells you to modify it rather than regenerate from scratch. See [references/remixable-examples.md](references/remixable-examples.md) for the full list of what's available to remix, grouped by mode — check it before calling `list_open_design_skills` with `remixableOnly: true` if a quick skim already answers the question.
|
|
28
28
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Remixable
|
|
1
|
+
# Remixable Open Design examples
|
|
2
2
|
|
|
3
3
|
167 vendored examples have an actual rendered starting artifact you can copy into the workspace and modify, via `remix_open_design_example` with the `id` shown below as `skillId`, instead of generating from scratch with `prepare_open_design_brief`.
|
|
4
4
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: ppt-keynote
|
|
3
|
-
description: Keynote-style Slides (
|
|
3
|
+
description: Keynote-style Slides (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:deck:ppt-keynote` (Keynote-style Slides).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Keynote-style Slides template to turn my content into Apple Keynote-quality slides with one card per screen and keyboard left/right navigation. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: resume-modern
|
|
3
|
-
description: Modern Resume (
|
|
3
|
+
description: Modern Resume (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:resume-modern` (Modern Resume).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Modern Resume template to turn my content into a modern minimal single-page A4 resume ready for print or PDF export. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: social-reddit-card
|
|
3
|
-
description: Reddit Post Card (
|
|
3
|
+
description: Reddit Post Card (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:social-reddit-card` (Reddit Post Card).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Reddit Post Card template to turn my content into a realistic Reddit post card with vote rail and comment count for a video overlay or story share. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: social-spotify-card
|
|
3
|
-
description: Spotify Now-Playing Card (
|
|
3
|
+
description: Spotify Now-Playing Card (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:social-spotify-card` (Spotify Now-Playing Card).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Spotify Now-Playing Card template to turn my content into a Spotify Now Playing-style card with album art, progress bar, and playback controls for a video overlay or personal homepage. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: social-x-post-card
|
|
3
|
-
description: X / Twitter Post Card (
|
|
3
|
+
description: X / Twitter Post Card (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:prototype:social-x-post-card` (X / Twitter Post Card).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the X / Twitter Post Card template to turn my content into a realistic X post card with engagement metrics for a video overlay or shareable image card. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: vfx-text-cursor
|
|
3
|
-
description: VFX Text Cursor (
|
|
3
|
+
description: VFX Text Cursor (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:vfx-text-cursor` (VFX Text Cursor).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the VFX Text Cursor template to turn my content into a video-intro quote reveal with cursor light trails, chromatic rays, and directional flares. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: video-hyperframes
|
|
3
|
-
description: Hyperframes Video (
|
|
3
|
+
description: Hyperframes Video (Open Design) — use only when explicitly invoked, not for general design requests
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- generated:open-design-agent-kit -->
|
|
7
7
|
|
|
8
|
-
Use the
|
|
8
|
+
Use the Open Design skill `od:video:video-hyperframes` (Hyperframes Video).
|
|
9
9
|
|
|
10
10
|
Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Hyperframes Video template to turn my content into a Hyperframes / Remotion-compatible continuous frame animation with autoplay support. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
|
|
11
11
|
|
package/out/index.js
CHANGED
|
@@ -80,10 +80,10 @@ async function runInit(targetPathArg, toolsFlag) {
|
|
|
80
80
|
console.log('\nDone.');
|
|
81
81
|
}
|
|
82
82
|
const program = new commander_1.Command();
|
|
83
|
-
program.name('open-design-agent-kit').description("Set up
|
|
83
|
+
program.name('open-design-agent-kit').description("Set up Open Design's Claude Code and/or Codex integration in your project");
|
|
84
84
|
program
|
|
85
85
|
.command('init [path]')
|
|
86
|
-
.description('Write
|
|
86
|
+
.description('Write Open Design skill files and MCP registration into the given project (default: current directory)')
|
|
87
87
|
.option('--tools <list>', `Comma-separated tool ids (${toolSelection_1.ALL_TOOL_IDS.join(', ')}) or "all"; omit to be prompted interactively`)
|
|
88
88
|
.action(async (targetPath = '.', options) => {
|
|
89
89
|
try {
|
package/out/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,yCAAoC;AACpC,gDAAkC;AAClC,+CAA6C;AAC7C,mDAAmH;AACnH,+BAA0E;AAC1E,+CAAwE;AACxE,6CAA4F;AAE5F,KAAK,UAAU,YAAY,CAAC,SAA6B;IACvD,IAAI,SAAS,KAAK,SAAS;QAAE,OAAO,IAAA,6BAAa,EAAC,SAAS,CAAC,CAAC;IAE7D,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CACb,uFAAuF,4BAAY,CAAC,IAAI,CAAC,GAAG,CAAC,iCAAiC,CAC/I,CAAC;IACJ,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,IAAA,kBAAQ,EAAS;QACtC,OAAO,EAAE,8BAA8B;QACvC,OAAO,EAAE,IAAA,gCAAgB,GAAE;KAC5B,CAAC,CAAC;IACH,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;IAClF,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,KAAK,UAAU,OAAO,CAAC,aAAqB,EAAE,SAA6B;IACzE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC;IAE5C,IAAI,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7B,MAAM,EAAE,YAAY,EAAE,GAAG,MAAM,IAAA,+BAAiB,EAAC,UAAU,EAAE,IAAA,8BAAwB,GAAE,CAAC,CAAC;QACzF,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,IAAA,kCAAoB,EAAC,UAAU,CAAC,CAAC;QAC3D,OAAO,CAAC,GAAG,CAAC,sBAAsB,YAAY,+BAA+B,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,YAAY,CAAC,CAAC;IAC5H,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;QAC5B,MAAM,EAAE,YAAY,EAAE,GAAG,MAAM,IAAA,6BAAgB,EAAC,UAAU,EAAE,IAAA,6BAAuB,GAAE,CAAC,CAAC;QACvF,OAAO,CAAC,GAAG,CAAC,gBAAgB,YAAY,4BAA4B,CAAC,CAAC;QAEtE,MAAM,MAAM,GAAG,MAAM,IAAA,iCAAoB,EAAC,UAAU,CAAC,CAAC;QACtD,IAAI,MAAM,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACjC,OAAO,CAAC,GAAG,CAAC,8EAA8E,CAAC,CAAC;QAC9F,CAAC;aAAM,IAAI,MAAM,CAAC,OAAO,KAAK,oBAAoB,EAAE,CAAC;YACnD,OAAO,CAAC,GAAG,CAAC,UAAU,MAAM,CAAC,UAAU,gDAAgD,CAAC,CAAC;QAC3F,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,GAAG,CACT,UAAU,MAAM,CAAC,UAAU,2GAA2G,iCAAoB,EAAE,CAC7J,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AACzB,CAAC;AAED,MAAM,OAAO,GAAG,IAAI,mBAAO,EAAE,CAAC;AAC9B,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@feimacode/open-design-agent-kit",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "npx @feimacode/open-design-agent-kit init — sets up
|
|
3
|
+
"version": "0.1.7",
|
|
4
|
+
"description": "npx @feimacode/open-design-agent-kit init — sets up Open Design's Claude Code and/or Codex integration directly in your own project, no marketplace or manual copying required.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
7
7
|
"node": ">=18"
|