@feimacode/open-design-agent-kit 0.1.5 → 0.1.8

package/assets/claude-skills/social-reddit-card/SKILL.md

@@ -1,13 +1,13 @@
 ---
 name: "od-prototype-social-reddit-card"
-description: Reddit Post Card (OpenDesign) — use only when the user explicitly runs this skill
+description: Reddit Post Card (Open Design) — use only when the user explicitly runs this skill
 disable-model-invocation: true
 argument-hint: a brief describing what to build (optional — defaults to a starting example)
 ---
 
 <!-- generated:curated-entry -->
 
-Use the OpenDesign skill `od:prototype:social-reddit-card` (Reddit Post Card).
+Use the Open Design skill `od:prototype:social-reddit-card` (Reddit Post Card).
 
 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."
 

package/assets/claude-skills/social-spotify-card/SKILL.md

@@ -1,13 +1,13 @@
 ---
 name: "od-prototype-social-spotify-card"
-description: Spotify Now-Playing Card (OpenDesign) — use only when the user explicitly runs this skill
+description: Spotify Now-Playing Card (Open Design) — use only when the user explicitly runs this skill
 disable-model-invocation: true
 argument-hint: a brief describing what to build (optional — defaults to a starting example)
 ---
 
 <!-- generated:curated-entry -->
 
-Use the OpenDesign skill `od:prototype:social-spotify-card` (Spotify Now-Playing Card).
+Use the Open Design skill `od:prototype:social-spotify-card` (Spotify Now-Playing Card).
 
 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."
 

package/assets/claude-skills/social-x-post-card/SKILL.md

@@ -1,13 +1,13 @@
 ---
 name: "od-prototype-social-x-post-card"
-description: X / Twitter Post Card (OpenDesign) — use only when the user explicitly runs this skill
+description: X / Twitter Post Card (Open Design) — use only when the user explicitly runs this skill
 disable-model-invocation: true
 argument-hint: a brief describing what to build (optional — defaults to a starting example)
 ---
 
 <!-- generated:curated-entry -->
 
-Use the OpenDesign skill `od:prototype:social-x-post-card` (X / Twitter Post Card).
+Use the Open Design skill `od:prototype:social-x-post-card` (X / Twitter Post Card).
 
 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."
 

package/assets/claude-skills/social-youtube-thumbnail/SKILL.md

@@ -0,0 +1,14 @@
+---
+name: "od-prototype-social-youtube-thumbnail"
+description: YouTube Thumbnail (Open Design) — use only when the user explicitly runs this skill
+disable-model-invocation: true
+argument-hint: a brief describing what to build (optional — defaults to a starting example)
+---
+
+<!-- generated:curated-entry -->
+
+Use the Open Design skill `od:prototype:social-youtube-thumbnail` (YouTube Thumbnail).
+
+Brief: "$ARGUMENTS", or if empty: "Use the YouTube Thumbnail template to design a thumbnail for my video. Make the promise of the video readable in under a second: one short hook line, one strong focal subject, high contrast. Use real content from my brief and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-youtube-thumbnail" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/claude-skills/vfx-text-cursor/SKILL.md

@@ -1,13 +1,13 @@
 ---
 name: "od-video-vfx-text-cursor"
-description: VFX Text Cursor (OpenDesign) — use only when the user explicitly runs this skill
+description: VFX Text Cursor (Open Design) — use only when the user explicitly runs this skill
 disable-model-invocation: true
 argument-hint: a brief describing what to build (optional — defaults to a starting example)
 ---
 
 <!-- generated:curated-entry -->
 
-Use the OpenDesign skill `od:video:vfx-text-cursor` (VFX Text Cursor).
+Use the Open Design skill `od:video:vfx-text-cursor` (VFX Text Cursor).
 
 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."
 

package/assets/claude-skills/video-hyperframes/SKILL.md

@@ -1,13 +1,13 @@
 ---
 name: "od-video-video-hyperframes"
-description: Hyperframes Video (OpenDesign) — use only when the user explicitly runs this skill
+description: Hyperframes Video (Open Design) — use only when the user explicitly runs this skill
 disable-model-invocation: true
 argument-hint: a brief describing what to build (optional — defaults to a starting example)
 ---
 
 <!-- generated:curated-entry -->
 
-Use the OpenDesign skill `od:video:video-hyperframes` (Hyperframes Video).
+Use the Open Design skill `od:video:video-hyperframes` (Hyperframes Video).
 
 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."
 

package/assets/codex-skills/article-magazine/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: article-magazine
-description: Magazine Article (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Magazine Article (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:article-magazine` (Magazine Article).
+Use the Open Design skill `od:prototype:article-magazine` (Magazine Article).
 
 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."
 

package/assets/codex-skills/card-twitter/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: card-twitter
+description: Twitter Share Card (Open Design) — use only when explicitly invoked, not for general design requests
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Use the Open Design skill `od:prototype:card-twitter` (Twitter Share Card).
+
+Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Twitter Share Card template to turn my content into a Twitter quote or data card designed to pair with a post. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:card-twitter" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/codex-skills/card-twitter/agents/openai.yaml

@@ -0,0 +1,3 @@
+# generated:open-design-agent-kit
+policy:
+  allow_implicit_invocation: false

package/assets/codex-skills/card-xiaohongshu/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: card-xiaohongshu
-description: Xiaohongshu Card (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Xiaohongshu Card (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:card-xiaohongshu` (Xiaohongshu Card).
+Use the Open Design skill `od:prototype:card-xiaohongshu` (Xiaohongshu Card).
 
 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."
 

package/assets/codex-skills/data-report/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: data-report
-description: Data Visualization Report (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Data Visualization Report (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:data-report` (Data Visualization Report).
+Use the Open Design skill `od:prototype:data-report` (Data Visualization Report).
 
 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."
 

package/assets/codex-skills/deck-guizang-editorial/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: deck-guizang-editorial
-description: Guizang Editorial E-Ink Deck (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Guizang Editorial E-Ink Deck (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:deck:deck-guizang-editorial` (Guizang Editorial E-Ink Deck).
+Use the Open Design skill `od:deck:deck-guizang-editorial` (Guizang Editorial E-Ink Deck).
 
 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."
 

package/assets/codex-skills/deck-open-slide-canvas/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: deck-open-slide-canvas
-description: Open-Slide 1920 Canvas Deck (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Open-Slide 1920 Canvas Deck (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:deck:deck-open-slide-canvas` (Open-Slide 1920 Canvas Deck).
+Use the Open Design skill `od:deck:deck-open-slide-canvas` (Open-Slide 1920 Canvas Deck).
 
 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."
 

package/assets/codex-skills/deck-swiss-international/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: deck-swiss-international
-description: Swiss International Deck (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Swiss International Deck (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:deck:deck-swiss-international` (Swiss International Deck).
+Use the Open Design skill `od:deck:deck-swiss-international` (Swiss International Deck).
 
 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."
 

package/assets/codex-skills/doc-kami-parchment/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: doc-kami-parchment
-description: Kami Parchment Document (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Kami Parchment Document (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:doc-kami-parchment` (Kami Parchment Document).
+Use the Open Design skill `od:prototype:doc-kami-parchment` (Kami Parchment Document).
 
 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."
 

package/assets/codex-skills/frame-data-chart-nyt/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: frame-data-chart-nyt
-description: NYT-Style Data Chart Frame (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: NYT-Style Data Chart Frame (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:video:frame-data-chart-nyt` (NYT-Style Data Chart Frame).
+Use the Open Design skill `od:video:frame-data-chart-nyt` (NYT-Style Data Chart Frame).
 
 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."
 

package/assets/codex-skills/frame-flowchart-sticky/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: frame-flowchart-sticky
-description: Sticky Flowchart Frame (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Sticky Flowchart Frame (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:video:frame-flowchart-sticky` (Sticky Flowchart Frame).
+Use the Open Design skill `od:video:frame-flowchart-sticky` (Sticky Flowchart Frame).
 
 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."
 

package/assets/codex-skills/frame-glitch-title/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: frame-glitch-title
-description: Glitch Title Frame (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Glitch Title Frame (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:video:frame-glitch-title` (Glitch Title Frame).
+Use the Open Design skill `od:video:frame-glitch-title` (Glitch Title Frame).
 
 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."
 

package/assets/codex-skills/frame-light-leak-cinema/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: frame-light-leak-cinema
-description: Light-Leak Cinematic Frame (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Light-Leak Cinematic Frame (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:video:frame-light-leak-cinema` (Light-Leak Cinematic Frame).
+Use the Open Design skill `od:video:frame-light-leak-cinema` (Light-Leak Cinematic Frame).
 
 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."
 

package/assets/codex-skills/frame-liquid-bg-hero/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: frame-liquid-bg-hero
-description: Liquid Background Hero (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Liquid Background Hero (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:video:frame-liquid-bg-hero` (Liquid Background Hero).
+Use the Open Design skill `od:video:frame-liquid-bg-hero` (Liquid Background Hero).
 
 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."
 

package/assets/codex-skills/frame-logo-outro/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: frame-logo-outro
-description: Logo Outro Frame (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Logo Outro Frame (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:video:frame-logo-outro` (Logo Outro Frame).
+Use the Open Design skill `od:video:frame-logo-outro` (Logo Outro Frame).
 
 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."
 

package/assets/codex-skills/frame-macos-notification/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: frame-macos-notification
-description: macOS Notification Banner (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: macOS Notification Banner (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:video:frame-macos-notification` (macOS Notification Banner).
+Use the Open Design skill `od:video:frame-macos-notification` (macOS Notification Banner).
 
 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."
 

package/assets/codex-skills/guizang-ppt/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: guizang-ppt
-description: Write a Brand-to-Revenue Story like a Growth Strategy Lead (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Write a Brand-to-Revenue Story like a Growth Strategy Lead (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:deck:guizang-ppt` (Write a Brand-to-Revenue Story like a Growth Strategy Lead).
+Use the Open Design skill `od:deck:guizang-ppt` (Write a Brand-to-Revenue Story like a Growth Strategy Lead).
 
 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."
 

package/assets/codex-skills/mockup-device-3d/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: mockup-device-3d
-description: Device 3D Showcase (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Device 3D Showcase (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:mockup-device-3d` (Device 3D Showcase).
+Use the Open Design skill `od:prototype:mockup-device-3d` (Device 3D Showcase).
 
 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."
 

package/assets/codex-skills/open-design/SKILL.md

@@ -1,20 +1,26 @@
 ---
 name: open-design
-description: Generate design artifacts (landing pages, decks, prototypes, dashboards, components) using OpenDesign'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 "OpenDesign" explicitly.
+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.
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-OpenDesign 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.
+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.
 
 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).
 
 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.
 
-All OpenDesign 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 OpenDesign's own files anywhere on disk; `list_open_design_skills` and `prepare_open_design_brief` already return everything you need as plain text.
+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.
 
 Follow this flow:
 
+0. **Check the tools are wired up.** This skill does nothing on its own — every step below calls a tool the `open-design` MCP server provides. If `list_open_design_skills` (or any other tool named below) isn't available to you right now, the server hasn't been registered in this project yet. Set it up, then retry from step 1:
+   - **Claude Code:** run `npx @feimacode/open-design-agent-kit init --tools claude` in the project root, or `claude mcp add open-design -- npx -y @feimacode/open-design-agent-kit-mcp`.
+   - **Codex CLI:** run `npx @feimacode/open-design-agent-kit init --tools codex` in the project root.
+   - **Any other MCP-capable agent** (Cursor, etc.): register `npx -y @feimacode/open-design-agent-kit-mcp` as a stdio MCP server using this agent's own MCP config mechanism.
+
+   Run the command yourself if you have shell access; otherwise tell the user the exact command to run and wait for their confirmation before continuing. Skip this step entirely once the tools are available.
 1. Call `list_open_design_skills` (optionally with a `query` and/or an exact `mode`) to find a skill or design template that matches what the user wants. Pick the best match by name/description/triggers, and prefer a result's `examplePrompt` (adapted to the user's specifics) over inventing your own brief when one is present and closely fits.
 2. There is an **active design system**, persisted per project (a local `.open-design/config.json` file). If the user mentions a brand, company, industry, or visual style that differs from what's active, call `list_open_design_design_systems` (optionally with a `query` and/or an exact `category` — call with no arguments first to see categories, and check each result's `active` flag) to find the right one, and pass its id explicitly to `prepare_open_design_brief` — doing so also makes it the new active one going forward, so you don't need to re-specify it on later requests in this project. If the user hasn't mentioned any direction, just omit `designSystemId` from `prepare_open_design_brief` and it will silently use whatever is currently active (or none). Only call `set_active_design_system` directly when the user wants to pin a look before generating anything ("let's use the Starbucks look from now on").
 3. Call `prepare_open_design_brief` with the chosen `skillId`, optional `designSystemId` (per step 2), and the user's `brief` (their request, in their own words). This returns `instructions` to follow, a `suggestedEntryPath`, and the `designSystemId`/`designSystemName` actually used (whether explicit or defaulted from active) — mention which one it was if it wasn't obvious from the conversation. It does NOT write any files.
@@ -22,10 +28,22 @@ Follow this flow:
 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.
 6. Optionally call `get_open_design_artifact` to confirm what was written before telling the user it's done.
 
-Generated artifacts land under the project's OpenDesign 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.
+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.
 
 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.
 
 If the user wants a brand/style that isn't one of the ~150 bundled design systems ("use our own brand colors", "match our website", "set up a custom design system for..."), call `create_open_design_design_system` with a `name`, a `brief` describing the brand, and an optional `sourceUrl` if they gave you a website to match. It returns `instructions` for writing a new `DESIGN.md` yourself (same file shape as every bundled design system) plus, when a `sourceUrl` was given, a best-effort extracted starting palette/font list to incorporate — treat that as a rough starting point, not ground truth. It does NOT write any files. After writing the file, call `set_active_design_system` with the returned `id` — there's no separate "register" step for design systems; a written `DESIGN.md` is immediately selectable, the same way generated artifacts are immediately visible once written.
 
 Once the user is happy with a generated or refined artifact and wants it turned into real, working code in this app ("turn this into a real component", "add this to the app", "wire this into my codebase"), call `port_open_design_artifact_to_app` with the artifact's `entryPath`. It returns `instructions` for reproducing the artifact's design as idiomatic code in this project's actual application — read the returned instructions carefully: they'll tell you to find and follow a real existing component in this codebase as your pattern reference (its styling approach, conventions, file organization) rather than copying the artifact's HTML/CSS verbatim, and to leave routing/navigation wiring as a separate step for the user. It does NOT write any files itself.
+
+When the artifact is meant to be posted or uploaded as an image (an X/Twitter post, Instagram or LinkedIn image, Xiaohongshu cards, a YouTube thumbnail, a poster), call `export_open_design_artifact` with its `entryPath` after registering it. It renders the artifact in a headless browser and writes PNG/JPEG file(s) under the artifact's own `exports/` folder, sized from the source skill automatically unless you pass `width`/`height`. For multi-card designs, give each card a `data-od-card` attribute and pass `selector: "[data-od-card]"` to get one numbered image per card. Pass `maxBytes` with the platform's upload limit (X 5000000, YouTube thumbnail 2000000, Instagram 8000000). Tell the user the exported file paths. For any social-post request ("make an X post…", "an Instagram carousel…", "a YouTube thumbnail…"), load the `open-design-social-post` skill first. It maps each platform and format to the right canvas size, skillId and export arguments (and asks the user which platform when that's unclear), then walks through generate → register → export. Videos (HyperFrames) aren't exported with this tool: the brief's own instructions say how to render them to MP4 with the HyperFrames CLI. After registering a slide deck, offer to export it as PowerPoint or PDF, and when the user wants that, call `export_open_design_artifact` with `format: "pptx"` or `"pdf"` (one full-bleed image per slide; not editable text). `format: "pdf"` on an ordinary page prints it as a vector PDF.
+
+## Help
+
+When the user asks how something works, or a tool reports an error, point them to the relevant page:
+
+- Documentation index: https://github.com/feimacode/open-design-agent-kit/blob/main/docs/README.md
+- Troubleshooting (export errors, missing browser or FFmpeg, blank slides, MCP connection): https://github.com/feimacode/open-design-agent-kit/blob/main/docs/troubleshooting.md
+- Social media posts: https://github.com/feimacode/open-design-agent-kit/blob/main/docs/guides/social-posts.md
+- Export images: https://github.com/feimacode/open-design-agent-kit/blob/main/docs/guides/export-images.md · Export decks and PDFs: https://github.com/feimacode/open-design-agent-kit/blob/main/docs/guides/export-decks.md
+- Tools reference: https://github.com/feimacode/open-design-agent-kit/blob/main/docs/reference/tools.md

package/assets/codex-skills/open-design/references/remixable-examples.md

@@ -1,4 +1,4 @@
-# Remixable OpenDesign examples
+# Remixable Open Design examples
 
 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`.
 

package/assets/codex-skills/open-design-social-post/SKILL.md

@@ -0,0 +1,51 @@
+---
+name: open-design-social-post
+description: Design a social media post (X, Instagram, LinkedIn, Xiaohongshu, Stories/Reels, YouTube thumbnail or video) and export upload-ready files — use whenever the user wants something to post on social media (an X/Twitter image, Instagram or LinkedIn post or carousel, Xiaohongshu cards, a Story/Reels cover, a YouTube thumbnail or video), even if they don't mention Open Design
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Design a social media post with Open Design and export files that are ready to upload.
+
+Brief: the rest of the user's message (if there is none, ask the user: "What should the post say, and for which platform?")
+
+## 1. Pick the platform and format
+
+If the brief names a platform or format, use it. Otherwise ask the user to pick one of the rows below before doing anything else. Don't guess.
+
+| Format | Canvas | skillId | Export |
+|---|---|---|---|
+| X single image | 1600×900 | `od:prototype:card-twitter` | `selector: "[data-od-card]"`, `maxBytes: 5000000` |
+| X post mock (for a video overlay or quote) | card element | `od:prototype:social-x-post-card` | `selector: "[data-od-card]"`, `maxBytes: 5000000` |
+| Square carousel (Instagram / LinkedIn) | 1080×1080 per card | `od:prototype:social-carousel` | `selector: "[data-od-card]"`, `maxBytes: 8000000` |
+| Instagram portrait | 1080×1350 | `od:prototype:poster-hero` | `width: 1080, height: 1350`, `selector: "[data-od-card]"`, `maxBytes: 8000000` |
+| Story / Reels / TikTok cover | 1080×1920 | `od:prototype:poster-hero` | `width: 1080, height: 1920`, `selector: "[data-od-card]"`, `maxBytes: 8000000` |
+| Xiaohongshu cards | 1080×1440 per card | `od:prototype:card-xiaohongshu` | `selector: "[data-od-card]"` |
+| YouTube thumbnail | 1280×720 | `od:prototype:social-youtube-thumbnail` | `width: 1280, height: 720`, `selector: "[data-od-card]"`, `maxBytes: 2000000` |
+| YouTube video | 1920×1080 MP4 | `od:video:hyperframes` | MP4 via the HyperFrames CLI (see step 4) |
+
+For several platforms at once, run steps 2–4 once per format and keep each one as its own artifact.
+
+## 2. Generate
+
+Call `prepare_open_design_brief` with the row's `skillId` and the brief. Call `list_open_design_design_systems` first only if the user names a brand or visual direction. In the brief you pass, say the exact canvas size from the table.
+
+Author the files yourself with your own file-editing tools, following the returned instructions, and add these rules for social posts:
+
+- Each card or canvas is a fixed-size element at exactly the table's size with `overflow: hidden`, and carries a `data-od-card` attribute. For multi-card formats, stack the cards vertically in one HTML file, one `data-od-card` element per card.
+- Use real copy from the brief, with no lorem ipsum. Keep text inside a 48px safe margin, and make the hook readable at thumbnail size.
+- No external image URLs unless the user supplied them.
+- No emoji as key visuals. They render from the exporting machine's fonts and can come out as empty boxes. Draw icons and subjects as inline SVG.
+
+## 3. Register
+
+Call `register_open_design_artifact` with the entry path, kind `html`, a title, and `sourceSkillId` set to the row's `skillId`, so the export can find the right size.
+
+## 4. Export
+
+- **Image formats**: call `export_open_design_artifact` with the entry path and the row's export arguments. If it returns warnings (failed fonts or images, over budget), fix the artifact and export again.
+- **YouTube video**: follow the brief's "Host override" section. Render with `npx hyperframes render … --output <artifact-dir>/exports/<name>.mp4`, and check `ffmpeg -version` first.
+
+## 5. Report
+
+List each exported file's path, pixel size, and file size, and remind the user of the post's copy (caption and hashtags) if you wrote any. Don't post anything anywhere yourself.

package/assets/codex-skills/poster-hero/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: poster-hero
+description: Marketing Poster (Open Design) — use only when explicitly invoked, not for general design requests
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Use the Open Design skill `od:prototype:poster-hero` (Marketing Poster).
+
+Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Use the Marketing Poster template to turn my content into a vertical poster or Moments-style share image with strong visual impact. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:poster-hero" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/codex-skills/poster-hero/agents/openai.yaml

@@ -0,0 +1,3 @@
+# generated:open-design-agent-kit
+policy:
+  allow_implicit_invocation: false

package/assets/codex-skills/ppt-keynote/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: ppt-keynote
-description: Keynote-style Slides (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Keynote-style Slides (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:deck:ppt-keynote` (Keynote-style Slides).
+Use the Open Design skill `od:deck:ppt-keynote` (Keynote-style Slides).
 
 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."
 

package/assets/codex-skills/resume-modern/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: resume-modern
-description: Modern Resume (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Modern Resume (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:resume-modern` (Modern Resume).
+Use the Open Design skill `od:prototype:resume-modern` (Modern Resume).
 
 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."
 

package/assets/codex-skills/social-carousel/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: social-carousel
+description: social-carousel (Open Design) — use only when explicitly invoked, not for general design requests
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Use the Open Design skill `od:prototype:social-carousel` (social-carousel).
+
+Treat the rest of the user's message as the brief. If nothing more specific was given, use: "Design a 3-card cinematic social carousel — ‘onwards.’, ‘to the next one.’, ‘looking ahead.’. 1080×1080 squares, drop-into-Instagram ready."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-carousel" and this brief — call `list_open_design_design_systems` first only if the user names a brand or visual direction. Author the files yourself with your own file-editing tools per the returned instructions, then call `register_open_design_artifact`.

package/assets/codex-skills/social-carousel/agents/openai.yaml

@@ -0,0 +1,3 @@
+# generated:open-design-agent-kit
+policy:
+  allow_implicit_invocation: false

package/assets/codex-skills/social-reddit-card/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: social-reddit-card
-description: Reddit Post Card (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Reddit Post Card (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:social-reddit-card` (Reddit Post Card).
+Use the Open Design skill `od:prototype:social-reddit-card` (Reddit Post Card).
 
 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."
 

package/assets/codex-skills/social-spotify-card/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: social-spotify-card
-description: Spotify Now-Playing Card (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: Spotify Now-Playing Card (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:social-spotify-card` (Spotify Now-Playing Card).
+Use the Open Design skill `od:prototype:social-spotify-card` (Spotify Now-Playing Card).
 
 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."
 

package/assets/codex-skills/social-x-post-card/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: social-x-post-card
-description: X / Twitter Post Card (OpenDesign) — use only when explicitly invoked, not for general design requests
+description: X / Twitter Post Card (Open Design) — use only when explicitly invoked, not for general design requests
 ---
 
 <!-- generated:open-design-agent-kit -->
 
-Use the OpenDesign skill `od:prototype:social-x-post-card` (X / Twitter Post Card).
+Use the Open Design skill `od:prototype:social-x-post-card` (X / Twitter Post Card).
 
 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."