@feimacode/open-design-agent-kit 0.1.4

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

@@ -0,0 +1,12 @@
+---
+name: frame-liquid-bg-hero
+description: Liquid Background Hero (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-liquid-bg-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/frame-liquid-bg-hero/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+name: frame-logo-outro
+description: Logo Outro Frame (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-logo-outro" 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/frame-logo-outro/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+name: frame-macos-notification
+description: macOS Notification Banner (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:frame-macos-notification" 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/frame-macos-notification/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+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
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Use the OpenDesign 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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:guizang-ppt" 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/guizang-ppt/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+name: mockup-device-3d
+description: Device 3D Showcase (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:mockup-device-3d" 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/mockup-device-3d/agents/openai.yaml

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

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

@@ -0,0 +1,31 @@
+---
+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.
+---
+
+<!-- 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.
+
+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.
+
+Follow this flow:
+
+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.
+4. Follow the returned `instructions` and author the artifact's entry file (plus any supporting files) yourself, using your own file-editing tools. Do not look for a separate tool to write the design content.
+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.
+
+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.

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

@@ -0,0 +1,191 @@
+# Remixable OpenDesign 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`.
+
+## prototype
+
+- **od:prototype:blog-post:example** — blog-post: A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
+- **od:prototype:clinical-case-report:example** — clinical-case-report: Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
+- **od:prototype:codex-interactive-capability-map** — Codex Interactive Capability Map: Turn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.
+- **od:prototype:critique:example** — critique: Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".
+- **od:prototype:dashboard:example** — dashboard: Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.
+- **od:prototype:data-report:example** — Data Visualization Report: Turns CSV, Excel, or JSON data into a polished visual report page.
+- **od:prototype:dating-web:example** — dating-web: A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained accent. Use when the brief asks for a "dating site", "matchmaking", "community dashboard", "social network dashboard", or any consumer product where the data is the story.
+- **od:prototype:mockup-device-3d:example** — Device 3D Showcase: Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
+- **od:prototype:digital-eguide:example** — digital-eguide: A two-spread digital e-guide preview — page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list). Lifestyle / creator brand tone. Use when the brief asks for an "e-guide", "digital guide", "lookbook", "lead magnet", "creator guide", "playbook", "PDF guide", or "电子指南".
+- **od:prototype:docs-page:example** — docs-page: A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".
+- **od:prototype:email-marketing:example** — email-marketing: A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".
+- **od:prototype:eng-runbook:example** — eng-runbook: An engineering runbook — service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist. Use when the brief mentions "runbook", "ops doc", "on-call guide", "SRE doc", or "运维手册".
+- **od:prototype:finance-report:example** — finance-report: Quarterly / monthly financial report — masthead with KPIs, revenue and burn charts, P&L summary table, top-line highlights, and an outlook paragraph. Use when the brief mentions "financial report", "Q3 report", "MRR review", "P&L", or "财报".
+- **od:prototype:flowai-live-dashboard-template:example** — flowai-live-dashboard-template: Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.
+- **od:prototype:gamified-app:example** — gamified-app: A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".
+- **od:prototype:github-dashboard:example** — github-dashboard: GitHub repository analytics dashboard — stars, forks, contributors, issues, pull requests, recent activity, and top contributors. Use when the brief asks for a GitHub repo dashboard, open-source growth report, repository health page, or GitHub analytics view.
+- **od:prototype:hr-onboarding:example** — hr-onboarding: A new-hire onboarding plan as a single page — first week schedule, buddy + manager intro, learning track, equipment checklist, and "you're set when…" outcomes. Use when the brief mentions "onboarding", "new hire", "first week plan", or "入职".
+- **od:prototype:invoice:example** — invoice: A printable invoice page — sender + recipient block, line items table, tax breakdown, totals, and payment instructions. Use when the brief mentions "invoice", "bill", "billing statement", or "发票".
+- **od:prototype:doc-kami-parchment:example** — Kami Parchment Document: Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.
+- **od:prototype:kami-landing:example** — kami-landing: Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.
+- **od:prototype:kanban-board:example** — kanban-board: Kanban / task board with columns (To do / In progress / In review / Done), draggable-looking cards, assignee avatars, swimlanes, and a top filter bar. Use when the brief mentions "kanban", "task board", "sprint board", "trello", "看板".
+- **od:prototype:live-dashboard:example** — live-dashboard: Notion-style team dashboard rendered as a Live Artifact. A single-page, self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time activity feed and a linked-database task table — wired to Notion via the Composio connector catalog. Refreshes on demand and when the artifact is opened. Falls back to seeded mock data when no connector is bound, so it works offline / in screenshots / in the picker preview.
+- **od:prototype:article-magazine:example** — Magazine Article: Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
+- **od:prototype:magazine-poster:example** — magazine-poster: An editorial-style poster — newsprint paper, dateline, oversized serif headline with a struck-through word and italic accent, a 2-column body block, and 6 numbered sections with annotated pull-quote captions. Reads like a Sunday-paper full-page essay or a thoughtful launch poster. Use when the brief asks for "magazine poster", "editorial poster", "newsprint", "essay layout", or "manifesto".
+- **od:prototype:poster-hero:example** — Marketing Poster: Vertical poster or Moments-style share image with strong visual impact.
+- **od:prototype:meeting-notes:example** — meeting-notes: Meeting notes page — title bar with attendees, agenda checklist, decisions block, action items table with owners + dates, and a "next meeting" footer. Use when the brief mentions "meeting notes", "minutes", "1:1 notes", "all-hands recap", or "会议纪要".
+- **od:prototype:mobile-app:example** — mobile-app: A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page. Built by copying the seed `assets/template.html` and pasting one screen archetype from `references/layouts.md`. Use when the brief asks for "mobile app", "iOS app", "Android app", "phone screen", or "app UI".
+- **od:prototype:mobile-onboarding:example** — mobile-onboarding: A multi-screen mobile onboarding flow rendered as three phone frames side by side — splash, value-prop, sign-in. Status bar, swipe dots, primary CTA. Use when the brief mentions "mobile onboarding", "iOS onboarding", "phone signup", or "移动端引导".
+- **od:prototype:resume-modern:example** — Modern Resume: Modern minimal resume, single A4 page, ready for print or PDF export.
+- **od:prototype:motion-frames:example** — motion-frames: A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.
+- **od:prototype:orbit-general:example** — orbit-general: Open Orbit briefing skill — selected by the Orbit pipeline when the user has two or more connectors connected. Pulls the past 24 hours of activity from every authenticated connector (GitHub, Linear, Notion, Slack, 飞书, Calendar, Gmail, Drive, Sentry, Vercel, …) and renders a single adaptive bento-grid dashboard at the top of "我的设计". Each connector module picks its own UI form (list, avatar stack, status ring, heatmap, file grid, alert card, …) based on the data shape it returns, so the layout scales as Orbit's connector ecosystem grows. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against the user's live connector data.
+- **od:prototype:orbit-github:example** — orbit-github: Open Orbit briefing skill — selected by the Orbit pipeline when GitHub is the user's only connected connector, or when the user explicitly scopes their daily digest to GitHub. Pulls the past 24 hours of PRs, review requests, issues, CI runs, and merges from the user's authenticated GitHub connection and renders them in a layout that mirrors GitHub's native Notifications + PR-diff visual language. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live GitHub data.
+- **od:prototype:orbit-gmail:example** — orbit-gmail: Open Orbit briefing skill — selected by the Orbit pipeline when Gmail is the user's only connected connector, or when the user explicitly scopes their daily digest to Gmail. Pulls the past 24 hours of inbox activity (replies awaited, mentions, cc, auto- categorized bulk) from the user's authenticated Gmail connection and renders the digest as the Orbit Daily Digest email opened inside Gmail's reading view. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Gmail data.
+- **od:prototype:orbit-linear:example** — orbit-linear: Open Orbit briefing skill — selected by the Orbit pipeline when Linear is the user's only connected connector, or when the user explicitly scopes their daily digest to Linear. Pulls the past 24 hours of issue movement, status changes, assignments, and cycle progress from the user's authenticated Linear connection and renders the digest in Linear's native Inbox + cycle-progress visual language. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Linear data.
+- **od:prototype:orbit-notion:example** — orbit-notion: Open Orbit briefing skill — selected by the Orbit pipeline when Notion is the user's only connected connector, or when the user explicitly scopes their daily digest to Notion. Pulls the past 24 hours of document edits, comments, mentions, and database row changes from the user's authenticated Notion connection and renders the digest as a native Notion page (callout / toggle / database table primitives). This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Notion data.
+- **od:prototype:pm-spec:example** — pm-spec: Product spec / PRD as a single page — problem, success metrics, scope, user stories, design notes, rollout plan, open questions. Use when the brief mentions "PRD", "spec", "product spec", "feature brief", or "需求文档".
+- **od:prototype:pricing-page:example** — pricing-page: A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.
+- **od:prototype:social-reddit-card:example** — Reddit Post Card: Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.
+- **od:prototype:saas-landing:example** — saas-landing: Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".
+- **od:prototype:social-carousel:example** — social-carousel: A three-card social-media carousel laid out as 1080×1080 squares — three cinematic, on-brand panels with display headlines that connect across the series ("onwards." → "to the next one." → "looking ahead."). Each card has a brand mark, a number / total, a caption, and a "loop" affordance. Use when the brief asks for a "carousel post", "social carousel", "Instagram carousel", "LinkedIn series", "X thread cards", or "三连发".
+- **od:prototype:social-media-dashboard:example** — social-media-dashboard: Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.
+- **od:prototype:social-spotify-card:example** — Spotify Now-Playing Card: Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
+- **od:prototype:sprite-animation:example** — sprite-animation: A pixel / sprite-style animated explainer slide — full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video — looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "精灵图动画", "像素动画", or "复古动画".
+- **od:prototype:team-okrs:example** — team-okrs: OKR tracker page — quarter banner, three objectives with their key results as progress bars, owner avatars, status pills, and a "this quarter at a glance" sidebar. Use when the brief mentions "OKRs", "key results", "objectives", or "目标".
+- **od:prototype:tweaks:example** — tweaks: Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "实时调参".
+- **od:prototype:card-twitter:example** — Twitter Share Card: Twitter quote or data card designed to pair with a post.
+- **od:prototype:velar-luxury-real-estate** — velar-luxury-real-estate: Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below and scales up while pinning to a dark statement section, a sticky dark stats band with count-up numbers, and a hover-expand video gallery that slides up over the dark section. Invoke for 'luxury real estate landing page', 'architecture brand site', 'scroll-driven hero with rising building', or when the user references the Velar template.
+- **od:prototype:waitlist-page:example** — waitlist-page: Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.
+- **od:prototype:web-prototype:example** — web-prototype: General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.
+- **od:prototype:webgl-aurora-veil** — webgl-aurora-veil: A self-contained WebGL2 hero: layered aurora light curtains warped over a night sky scattered with stars; move the cursor to sway the veil.
+- **od:prototype:webgl-caustic-pool** — webgl-caustic-pool: A self-contained WebGL2 hero: animated water caustics woven from domain-warped ripples; click the water to drop a ripple. No meshes, no textures.
+- **od:prototype:webgl-depth-gallery** — webgl-depth-gallery: A scroll-reactive 3D image gallery in Three.js: Z-stacked images crossfade over per-image mood backgrounds with velocity breath, a glowing cursor trail and an editorial CMYK/RGB/HEX/PMS color card.
+- **od:prototype:webgl-distortion-grain** — webgl-distortion-grain: A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.
+- **od:prototype:webgl-experience:example** — webgl-experience: A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.
+- **od:prototype:webgl-halftone-drift** — webgl-halftone-drift: A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.
+- **od:prototype:webgl-holographic-foil** — webgl-holographic-foil: A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
+- **od:prototype:webgl-horizontal-parallax** — webgl-horizontal-parallax: A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.
+- **od:prototype:webgl-liquid-iridescence** — webgl-liquid-iridescence: A self-contained WebGL2 hero: a living oil-on-water field brightened into iridescent caustic filaments; move the cursor to bend the flow.
+- **od:prototype:webgl-liquid-metal** — webgl-liquid-metal: A real-time liquid-metal shader — a domain-warped noise field shaded as molten chrome, with a sweeping specular highlight over an iridescent thin-film (cosine-palette) sheen. No textures. Rendered as a single self-contained `index.html`. Use when the brief asks for "liquid metal", "molten chrome", "iridescent", "holographic", "metallic", "thin-film", or a reflective flowing surface. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.
+- **od:prototype:webgl-neon-grid** — webgl-neon-grid: A real-time synthwave scene — a perspective floor grid scrolling toward a banded retro sun under a neon starfield, all from one fragment shader. No textures. Rendered as a single self-contained `index.html`. Use when the brief asks for "synthwave", "outrun", "retro 80s", "neon grid", "perspective grid", "vaporwave", or a retro-futuristic hero. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.
+- **od:prototype:webgl-particle-galaxy** — webgl-particle-galaxy: A real-time particle galaxy — tens of thousands of additive-blended GPU points spiraling around a bright core, their orbits solved entirely in the vertex shader (from gl_VertexID), so the whole cloud draws in one call. Rendered as a single self-contained `index.html`. Use when the brief asks for a "particle field", "particle galaxy", "point cloud", "instanced points", "starfield", "GPU particles", or a swirling generative point system. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.
+- **od:prototype:webgl-pixel-reveal-gallery** — webgl-pixel-reveal-gallery: A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel/grid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.
+- **od:prototype:webgl-raymarched-hero** — webgl-raymarched-hero: A real-time raymarched 3D hero — soft-shadowed morphing metaballs with a fresnel rim light, sphere-traced per pixel in a fragment shader with a slow camera orbit. No meshes, no textures. Rendered as a single self-contained `index.html`. Use when the brief asks for a "raymarch", "signed distance field", "SDF", "3D hero", "metaballs", "blobs", or a shader-based 3D scene. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.
+- **od:prototype:webgl-voronoi-cells** — webgl-voronoi-cells: A self-contained WebGL2 hero: a living Voronoi network with drifting feature points, palette-keyed cells and glowing boundaries; move the cursor to push the cells.
+- **od:prototype:wireframe-annotated:example** — wireframe-annotated: An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note. This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT hand-drawn. Use when the brief asks for "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity", "线框图", "标注线框", or "redline".
+- **od:prototype:wireframe-greybox:example** — wireframe-greybox: A crisp greybox / blueprint lo-fi wireframe — neutral grey blocks on a pale page, image placeholders drawn as a rectangle with a diagonal X, text shown as solid "lorem bars" of varying widths, sharp 1.5–2px borders, and a single monospace redline accent for annotations. Reads like a structural blueprint before any visual design is applied. Use when the brief asks for "greybox", "blueprint wireframe", "lo-fi dashboard", "low fidelity", "线框图", or "灰盒原型".
+- **od:prototype:wireframe-mobile-flow:example** — wireframe-mobile-flow: A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames laid out in a row on a board, showing a connected user flow (Onboarding → Home feed → Item detail → Confirm). Grey-box content inside each device, dashed connector arrows + numbered step labels between screens, and a couple of annotation callouts. Reads like an app flow pinned to a whiteboard before any pixels are committed. Use when the brief asks for "mobile wireframe", "app flow", "user flow wireframe", "lo-fi mobile", "low fidelity", "线框图", "移动端线框", or "App 流程".
+- **od:prototype:wireframe-sketch:example** — wireframe-sketch: A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "草稿", or "手绘原型".
+- **od:prototype:worker-visualizer:example** — worker-visualizer: A real-time data/particle/simulation visualizer whose heavy compute runs in a Web Worker (off the main thread), optionally sharing memory with the UI via SharedArrayBuffer, and renders to a canvas at 60fps. Produced as a single self-contained `index.html`. Use when the brief asks for a "web worker", "simulation", "particle system", "physics", "off-main-thread", "fractal", "real-time compute", or "audio/data visualizer". OpenDesign serves this in powered-preview mode so Workers and SharedArrayBuffer actually work.
+- **od:prototype:social-x-post-card:example** — X / Twitter Post Card: Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.
+- **od:prototype:card-xiaohongshu:example** — Xiaohongshu Card: Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
+
+## deck
+
+- **od:deck:fs-editorial-forest** — Art-Direct an Annual Report like a Magazine Creative Director: Art-directing a fashion house's annual report — the editorial system, the photography rhythm, and the data spreads. Built as a decision-grade design craft deck for brand stakeholders, exec audience.
+- **od:deck:html-ppt-testing-safety-alert:example** — Brief a Health-System Board on Data Governance like a Chief Compliance Officer: A hospital data-governance briefing: patient-data risk, the control framework, accountability, and the approval the board must give. Built as a decision-grade policy briefing deck for health-system board, regulators.
+- **od:deck:huashu-takram-soft-tech** — Build a Buyer-Committee Leave-Behind like an Enterprise Sales Lead: OpenDesign procurement & security leave-behind: the one-pager-plus a buying committee can forward and approve internally. Built as a decision-grade B2B sales deck for buying committee, security, procurement.
+- **od:deck:html-ppt-zhangzara-neo-grid-bold:example** — Build a Designer Portfolio Narrative like a Hiring Bar-Raiser: A designer's portfolio narrative for a senior interview — three case studies, the craft, and the judgment behind each. Built as a decision-grade career deck for hiring panel.
+- **od:deck:html-ppt-course-module:example** — Build a New-Hire Onboarding Module like a Top Enablement Lead: A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.
+- **od:deck:huashu-pentagram-grid** — Build a Positioning & Messaging System like a Brand Strategist: OpenDesign's positioning & messaging system: the one-line promise, the pillars, and the proof — the source of truth for all copy. Built as a decision-grade marketing & GTM deck for brand & marketing team.
+- **od:deck:html-ppt-zhangzara-studio:example** — Build a Studio Portfolio & Rate Deck like a Creative Studio Owner: A photography studio's portfolio-and-rate deck — the signature work, the process, and the packages that win the brief. Built as a decision-grade design craft deck for prospective clients.
+- **od:deck:html-ppt-zhangzara-editorial-tri-tone:example** — Build an Editorial Design System like a Magazine Art Director: A type-and-color system for a culture magazine relaunch — the grid, the tri-tone palette, and the layout kit. Built as a decision-grade design craft deck for editorial & design team.
+- **od:deck:html-ppt-zhangzara-biennale-yellow:example** — Curate an Art Biennale Deck like a Museum Exhibition Director: A curatorial deck for a contemporary art biennale — the thesis, the rooms, the works, and the visitor journey. Built as a decision-grade design craft deck for museum board, curators.
+- **od:deck:fs-notebook-tabs** — Defend a CS Capstone like a Top Thesis Advisor: A computer-science capstone: an on-device ML keyboard that predicts next words privately — problem, method, evaluation, and defense answers. Built as a decision-grade coursework defense deck for professor, defense committee.
+- **od:deck:html-ppt-zhangzara-soft-editorial:example** — Deliver a Digital-Transformation Roadmap like a Big-Four Partner: A digital-transformation roadmap for a legacy insurer — the diagnosis, the sequenced bets, and the operating rhythm to land them. Built as a decision-grade consulting deck for client executives.
+- **od:deck:html-ppt-zhangzara-vellum:example** — Deliver a Humanities Research Lecture like a Tenured Art Historian: A humanities lecture: how Renaissance linear perspective reshaped early cartography — sources, argument, and evidence. Built as a decision-grade academic research deck for faculty, graduate seminar.
+- **od:deck:html-ppt-zhangzara-retro-windows:example** — Deliver a Security-Awareness Training like a CISO Enablement Team: An IT security-awareness training on spotting phishing — the tells, the drill, and what to do in the first 60 seconds. Built as a decision-grade professional training deck for all employees.
+- **od:deck:html-ppt-tech-sharing:example** — Give an Engineering Tech Talk like a Staff Developer-Advocate: OpenDesign internals: how the agent stream, sandbox, and artifacts work — an engineering deep-dive talk. Built as a decision-grade AI literacy deck for engineers, dev community.
+- **od:deck:html-ppt-zhangzara-retro-zine:example** — Make a Neighborhood Zine Story like an Indie Photo Editor: A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close. Built as a decision-grade story deck for community, local readers.
+- **od:deck:html-ppt-zhangzara-peoples-platform:example** — Make a Public-Transit Funding Case like a Transportation Policy Lead: A public-transit funding proposal for a city council — ridership need, the plan, the risk controls, and the ask. Built as a decision-grade policy briefing deck for city council, public board.
+- **od:deck:html-ppt-zhangzara-scatterbrain:example** — Pitch a Graduation Design Project like a Portfolio-Ready Design Student: A design-school graduation project: a civic wayfinding system for a transit hub — the brief, the process, and the outcome. Built as a decision-grade coursework defense deck for crit panel, faculty.
+- **od:deck:html-ppt-product-launch:example** — Pitch a Team Rollout like a Strategic Account Executive: OpenDesign Teams: a launch-and-adoption proposal for a mid-market design team weighing a switch from closed cloud tools. Built as a decision-grade B2B sales deck for design team lead, IT.
+- **od:deck:html-ppt-zhangzara-coral:example** — Plan a Community-Growth Campaign like a Head of Growth: OpenDesign's community-growth campaign across GitHub, Discord, and X: the loops, the content calendar, and the pipeline math. Built as a decision-grade marketing & GTM deck for growth team, community lead.
+- **od:deck:huashu-golden-circle** — Present a Brand-Repositioning Strategy like a Top Consulting Principal: A brand-repositioning strategy for a heritage coffee chain — why, how, what — the governing idea and the moves to prove it. Built as a decision-grade consulting deck for client CMO, board.
+- **od:deck:ve-midnight-editorial** — Present a Financial Review like a Startup CFO: OpenDesign's financial review: runway, burn, and the sustainability plan that keeps the project independent. Built as a decision-grade data & finance deck for board, leadership.
+- **od:deck:html-ppt-zhangzara-raw-grid:example** — Present a Poster-Series Case Study like a Festival Art Director: A brutalist poster-series case study for a music festival — the concept, the system, and how it scaled across formats. Built as a decision-grade design craft deck for design peers, client.
+- **od:deck:html-ppt-zhangzara-blue-professional:example** — Present a Quarterly Business Review like a Chief of Staff: OpenDesign's QBR for the executive committee: what moved, what stalled, and the resource reallocation ask. Built as a decision-grade corporate strategy deck for executive committee.
+- **od:deck:html-ppt-zhangzara-cartesian:example** — Present a Senior Thesis Defense like a Distinction-Grade Economics Student: An economics senior thesis on the employment effects of local minimum-wage increases — identification strategy, evidence, and limitations. Built as a decision-grade coursework defense deck for thesis committee.
+- **od:deck:html-ppt-zhangzara-long-table:example** — Present a Unit-Economics Model like an FP&A Partner: OpenDesign's unit-economics and BYOK cost model: the assumptions, the sensitivity, and why it scales. Built as a decision-grade data & finance deck for CFO, investors.
+- **od:deck:html-ppt-zhangzara-creative-mode:example** — Present a Visual-Identity System like a Lead Brand Designer: A brand visual-identity system reveal for an outdoor label — logo, color, type, and the rules that keep it consistent. Built as a decision-grade design craft deck for brand team, client.
+- **od:deck:html-ppt-zhangzara-stencil-tablet:example** — Present a Workplace-Safety Compliance Review like a Senior Regulator: A workplace-safety compliance review for a manufacturing regulator — findings, the evidence chain, and the corrective mandate. Built as a decision-grade policy briefing deck for regulator, plant leadership.
+- **od:deck:hps-true-blueprint** — Present an Engineering Blueprint like a Principal Architect: OpenDesign's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Built as a decision-grade product management deck for engineering org.
+- **od:deck:ppt-keynote:example** — Present an Operating-Model Redesign like a Strategy Engagement Lead: An operating-model redesign for a scaling logistics firm — the diagnosis, the target model, and the transition roadmap. Built as a decision-grade consulting deck for client sponsor, ops leaders.
+- **od:deck:html-ppt-zhangzara-block-frame:example** — Rescue a Messy Deck to Board-Grade like an Executive Design Director: Rescuing a messy startup deck into a board-grade system — the diagnosis, the page grammar, and the rebuilt proof pages. Built as a decision-grade design craft deck for founders, exec presenter.
+- **od:deck:html-ppt-hermes-cyber-terminal:example** — Run a BYOK Model-Choice Session like an Applied-AI Engineer: OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
+- **od:deck:html-ppt-presenter-mode-reveal:example** — Run a Live AI Product Demo like a Founding DevRel Lead: OpenDesign live demo: from a one-line prompt to runnable design in a single session — the flow, live. Built as a decision-grade AI literacy deck for developers, prospects, community.
+- **od:deck:weekly-update:example** — Run a Metrics Standup like a Data-Driven Ops Lead: OpenDesign's weekly metrics standup: this week's numbers, the one anomaly, and the single decision it forces. Built as a decision-grade data & finance deck for ops & growth team.
+- **od:deck:html-ppt-zhangzara-playful:example** — Run a Sales-Floor Training like a Top Retail Coach: A retail sales-floor training on consultative selling — the flow, the role-plays, and the daily habit that lifts conversion. Built as a decision-grade professional training deck for store associates, floor managers.
+- **od:deck:huashu-keynote-black** — Run an All-Hands Town Hall like a World-Class Founder-CEO: OpenDesign's all-hands: the year in review, the three priorities, and what every team owns next quarter. Built as a decision-grade corporate strategy deck for whole company.
+- **od:deck:ve-terminal-mono** — Teach an AI CLI Workflow like a Developer-Tools Educator: OpenDesign from the CLI: driving the full design workflow with the `od` command — scripted, composable, agent-ready. Built as a decision-grade AI literacy deck for developers, power users.
+- **od:deck:hps-bauhaus** — Teach Design Fundamentals like a World-Class Studio Mentor: A visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Built as a decision-grade professional training deck for junior designers, new hires.
+- **od:deck:huashu-slides** — Tell a Career-Pivot Story like an Executive-Presence Coach: A career-pivot story from consultant to product leader — the arc, the proof, and why the next role is the right bet. Built as a decision-grade career deck for hiring manager, mentors.
+- **od:deck:html-ppt-zhangzara-sakura-chroma:example** — Turn a Cherry-Blossom Trip into a Photo Essay like a Travel Editorial Director: A cherry-blossom-season travel photo essay through Kyoto — the arrival, the peak bloom, and the moment that made the trip. Built as a decision-grade story deck for friends, travel readers.
+- **od:deck:html-ppt-zhangzara-pin-and-paper:example** — Turn a Field-Study Capstone into a Defense Deck like a Star Biology Major: A field-biology capstone on urban pollinator decline — the survey design, the data, the contribution, and the caveats. Built as a decision-grade coursework defense deck for faculty reviewers.
+- **od:deck:html-ppt-zhangzara-8-bit-orbit:example** — Turn a Hobby into a Story Deck like a Passion-Project Storyteller: A gamer's journey building a retro-arcade collection — the obsession, the hunt, and what the machines came to mean. Built as a decision-grade story deck for friends, hobby community.
+- **od:deck:hps-memphis-pop** — Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator: A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community.
+- **od:deck:kami-deck:example** — Turn a Study into a Lab Meeting Deck like a Senior Postdoc: A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Built as a decision-grade academic research deck for lab group, PI.
+- **od:deck:html-ppt-zhangzara-pink-script:example** — Turn an Anniversary into a Photo Essay like a Wedding Storyteller: A wedding-anniversary tribute photo essay — a decade in scenes, the turning points, and the quiet meaning of staying. Built as a decision-grade story deck for couple, family, friends.
+- **od:deck:html-ppt-knowledge-arch-blueprint:example** — Turn an Incident Retro into a Learning Deck like a Platform VP: OpenDesign's incident retro: the daemon-restart data bug, the root cause, the fix, and the systemic follow-ups. Built as a decision-grade product management deck for engineering, SRE, leadership.
+- **od:deck:hps-retro-tv** — Turn Home Movies into a Family-History Story like a Documentary Editor: A family history told through five decades of home movies — the opening question, the eras, and what the footage reveals. Built as a decision-grade story deck for family, close friends.
+- **od:deck:fs-electric-studio** — Write a B2B SaaS Sales Proposal like a Tier-1 Enterprise AE: OpenDesign as an enterprise design platform: a buyer-forwardable proposal for a design-org's economic buyer — pain, value, ROI, rollout. Built as a decision-grade B2B sales deck for economic buyer, design VP, procurement.
+- **od:deck:deck-swiss-international:example** — Write a Board Pre-Read like a Fortune-500 Board Chair: OpenDesign's FY26 board pre-read: the open-core bet, growth vs burn, and the one decision the board must approve. Built as a decision-grade corporate strategy deck for board, CEO, CFO.
+- **od:deck:fs-emerald-editorial** — Write a Brand-Launch Narrative like a Growth Strategy Lead: OpenDesign's 'design on your desk' brand-launch narrative: the market moment, the story, and the proof that converts. Built as a decision-grade marketing & GTM deck for marketing team, press.
+- **od:deck:open-design-landing-deck:example** — Write a Brand-Story Deck like a Founder Storyteller: OpenDesign's brand-story deck for partners and press: why it exists, what it believes, and where design is going. Built as a decision-grade marketing & GTM deck for partners, press, community.
+- **od:deck:huashu-bento-insight** — Write a Competitive Displacement Deck like a Top Sales Engineer: OpenDesign vs closed cloud design tools: a side-by-side displacement case on control, cost (BYOK), and lock-in. Built as a decision-grade B2B sales deck for evaluation committee.
+- **od:deck:html-ppt-zhangzara-daisy-days:example** — Write a Customer Onboarding Workshop like a Field Enablement Director: A customer-success workshop onboarding users to a project-management app — the first-value path and the habits that retain. Built as a decision-grade professional training deck for new customers, CS team.
+- **od:deck:html-ppt-pitch-deck:example** — Write a Demo Day Pitch like a Top Accelerator Partner: OpenDesign's demo-day pitch: hook, traction, moat, and the raise — built to make a partner sit up by page three. Built as a decision-grade fundraising pitch deck for accelerator partners, angels.
+- **od:deck:html-ppt-graphify-dark-graph:example** — Write a Feature Business Case like a Principal PM: OpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
+- **od:deck:html-ppt-zhangzara-monochrome:example** — Write a Grant Committee Brief like a Funded Principal Investigator: A grant proposal on CRISPR base-editing for sickle-cell disease — the hypothesis, the approach, the milestones, and the risk. Built as a decision-grade academic research deck for grant review committee.
+- **od:deck:hps-y2k-chrome** — Write a KPI Decision Brief like a CFO-Ready Analytics Lead: OpenDesign's KPI decision brief: activation and retention drivers, what's working, and the one metric to move next. Built as a decision-grade data & finance deck for CRO, RevOps, leadership.
+- **od:deck:huashu-luxe-whitespace** — Write a Luxury Market-Entry Deck like a Premium-Sector Strategy Partner: A market-entry study for a luxury skincare brand entering Asia — segmentation, positioning, channel, and the phased plan. Built as a decision-grade consulting deck for client leadership.
+- **od:deck:html-ppt-zhangzara-mat:example** — Write a Margin-Recovery Final Deck like a McKinsey Engagement Manager: A margin-recovery diagnosis for a regional grocery chain — the governing thought, the driver tree, the priorities, and the roadmap. Built as a decision-grade consulting deck for client sponsor, steering committee.
+- **od:deck:html-ppt-xhs-pastel-card:example** — Write a Personal Manifesto Talk like a Narrative Podcast Producer: A personal manifesto: a year of saying yes — the premise, the scenes, the turn, and the meaning that lands. Built as a decision-grade story deck for community, talk audience.
+- **od:deck:html-ppt-zhangzara-broadside:example** — Write a Product-Launch Announcement like a PR & Comms Director: OpenDesign's product-launch announcement and press narrative — the headline, the proof points, and the call to action. Built as a decision-grade marketing & GTM deck for press, community, prospects.
+- **od:deck:html-ppt-zhangzara-cobalt-grid:example** — Write a Renewal & Expansion Business Case like an Account Director: OpenDesign renewal + seat-expansion business case for a growing customer: realized value, usage proof, and the expansion ROI. Built as a decision-grade B2B sales deck for champion, finance approver.
+- **od:deck:huashu-sparkline-arc** — Write a Revenue-Driver Story like a Board-Level Finance Partner: OpenDesign's revenue-driver narrative: what actually moves ARR, the leverage points, and the forecast. Built as a decision-grade data & finance deck for board, finance leadership.
+- **od:deck:fs-creative-voltage** — Write a Seed Pitch like a Top Pre-Seed Founder: OpenDesign's seed pitch: the open, local alternative to closed AI design — why now, the wedge, and the ask. Built as a decision-grade fundraising pitch deck for pre-seed & seed VCs.
+- **od:deck:html-ppt-zhangzara-bold-poster:example** — Write a Series A Growth Story like a Tier-1 VC Partner: OpenDesign's Series A growth story: the traction curve, the expansion motion, and why it's venture-scale. Built as a decision-grade fundraising pitch deck for Series A partners.
+- **od:deck:html-ppt-xhs-white-editorial:example** — Write a Staff-Engineer Promotion Case like a Calibration-Committee Insider: A staff-engineer promotion packet — scope, the proof moments, the artifacts, and the impact that clears the bar. Built as a decision-grade career deck for manager, calibration committee.
+- **od:deck:html-ppt-zhangzara-signal:example** — Write a Strategy Decision Memo like a Corp-Dev Lead: OpenDesign's strategy memo: should it monetize the plugin registry now or hold — options, risks, and the recommendation. Built as a decision-grade corporate strategy deck for CEO, strategy team.
+- **od:deck:html-ppt-weekly-report:example** — Write a Weekly Growth Review like a Head of Analytics: OpenDesign's weekly growth review: stars, installs, activation — the number, the driver, and the recommended move. Built as a decision-grade data & finance deck for growth & product team.
+- **od:deck:html-ppt-zhangzara-capsule:example** — Write a Year-End Self-Review like a Promotion-Committee Insider: A year-end self-review for a product manager — the role, the outcomes, the learning, and the ask, all evidence-backed. Built as a decision-grade career deck for manager, review committee.
+- **od:deck:hps-academic-paper** — Write an Academic Review Deck like a Top-Journal Survey Author: A review deck on compositional generalization in large language models — the field map, the gap, the evidence, and open questions. Built as a decision-grade academic research deck for PI, lab group, reviewers.
+- **od:deck:frontend-slides:example** — Write an AI-Workflow 101 like a Top Technology Explainer: OpenDesign as a worked AI-workflow example: how local agents read your files and design on your desktop — concretely. Built as a decision-grade AI literacy deck for teams new to AI, leadership.
+- **od:deck:huashu-annual-letter** — Write an Annual Founder's Letter like a Mission-Driven CEO: OpenDesign's annual letter to its community: the year's story, what it learned, and where it's going next. Built as a decision-grade corporate strategy deck for community, contributors, investors.
+- **od:deck:deck-guizang-editorial:example** — Write an Annual Marketing Plan like a World-Class CMO: OpenDesign's FY26 marketing plan: brand-to-pipeline — audience, offer, channel mix, and the launch calendar that ties creative to growth. Built as a decision-grade marketing & GTM deck for CMO, growth lead, founder.
+- **od:deck:deck-open-slide-canvas:example** — Write an Architecture Review like a World-Class Staff Engineer: OpenDesign's architecture review: the local daemon + agent-runtime design, the tradeoffs, and the decision to lock. Built as a decision-grade product management deck for staff eng, tech leads, security.
+- **od:deck:html-ppt-obsidian-claude-gradient:example** — Write an Enterprise AI Adoption Brief like a Transformation Lead: OpenDesign's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Built as a decision-grade AI literacy deck for leadership, IT, security.
+- **od:deck:ib-pitch-book:example** — Write an Investor Pitch Book like a Growth-Equity Analyst: OpenDesign's investor pitch book: market map, moat, unit economics, and the ask — analyst-grade and diligence-ready. Built as a decision-grade fundraising pitch deck for growth-equity investors.
+- **od:deck:simple-deck:example** — Write an Operating Review like a Disciplined COO: OpenDesign's operating review: growth, burn, and the concrete path to sustainability without losing the open ethos. Built as a decision-grade corporate strategy deck for leadership team.
+- **od:deck:html-ppt-zhangzara-grove:example** — Write an Urban Green-Space Policy Brief like a City Sustainability Director: A municipal urban-tree-canopy policy proposal — the public need, the evidence, the options, and the funding decision. Built as a decision-grade policy briefing deck for city council, agency reviewers.
+
+## image
+
+- **od:image:image-poster:example** — image-poster: Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic — the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or more PNG/JPEG files saved to the project folder.
+
+## video
+
+- **od:video:frame-glitch-title:example** — Glitch Title Frame: Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.
+- **od:video:video-hyperframes:example** — Hyperframes Video: Hyperframes / Remotion-compatible continuous frame animation with autoplay support.
+- **od:video:frame-light-leak-cinema:example** — Light-Leak Cinematic Frame: Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
+- **od:video:frame-liquid-bg-hero:example** — Liquid Background Hero: WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
+- **od:video:frame-logo-outro:example** — Logo Outro Frame: Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
+- **od:video:frame-macos-notification:example** — macOS Notification Banner: Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.
+- **od:video:frame-data-chart-nyt:example** — NYT-Style Data Chart Frame: NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
+- **od:video:frame-flowchart-sticky:example** — Sticky Flowchart Frame: SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
+- **od:video:vfx-text-cursor:example** — VFX Text Cursor: Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.
+- **od:video:video-shortform:example** — video-shortform: Short-form video generation skill — 3-10 second clips for product reveals, motion teasers, ambient loops. Defaults to Seedance 2 but works the same with Kling 3 / 4, Veo 3 or Sora 2. Output is one MP4 saved to the project folder. When the workspace also ships an interactive-video / hyperframes skill, prefer composing several short shots into a single timeline rather than one long monolithic clip.
+
+## template
+
+- **od:template:social-media-matrix-tracker-template:example** — social-media-matrix-tracker-template: 社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.
+- **od:template:trading-analysis-dashboard-template:example** — trading-analysis-dashboard-template: Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, demo/live playback, and command palette behavior. Use when users ask for a Wall-Street-style analytics terminal, trading cockpit, or high-tech financial dashboard template with realistic data layout.
+
+## audio
+
+- **od:audio:audio-jingle:example** — audio-jingle: Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
+
+## other
+
+- **od:other:html-ppt-taste-brutalist:example** — html-ppt-taste-brutalist: 16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Tactical Telemetry mode).
+- **od:other:html-ppt-taste-editorial:example** — html-ppt-taste-editorial: 16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one accent. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
+- **od:other:web-prototype-taste-brutalist:example** — web-prototype-taste-brutalist: Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Swiss Industrial Print mode).
+- **od:other:web-prototype-taste-editorial:example** — web-prototype-taste-editorial: Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
+- **od:other:web-prototype-taste-soft:example** — web-prototype-taste-soft: Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4–8 of `taste-skill`.

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

@@ -0,0 +1,12 @@
+---
+name: ppt-keynote
+description: Keynote-style Slides (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:deck:ppt-keynote" 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/ppt-keynote/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+name: resume-modern
+description: Modern Resume (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:resume-modern" 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/resume-modern/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

@@ -0,0 +1,12 @@
+---
+name: social-reddit-card
+description: Reddit Post Card (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-reddit-card" 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-reddit-card/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+name: social-spotify-card
+description: Spotify Now-Playing Card (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-spotify-card" 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-spotify-card/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+name: social-x-post-card
+description: X / Twitter Post Card (OpenDesign) — 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).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:prototype:social-x-post-card" 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-x-post-card/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+name: vfx-text-cursor
+description: VFX Text Cursor (OpenDesign) — use only when explicitly invoked, not for general design requests
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Use the OpenDesign skill `od:video:vfx-text-cursor` (VFX Text Cursor).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:vfx-text-cursor" 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/vfx-text-cursor/agents/openai.yaml

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

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

@@ -0,0 +1,12 @@
+---
+name: video-hyperframes
+description: Hyperframes Video (OpenDesign) — use only when explicitly invoked, not for general design requests
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Use the OpenDesign skill `od:video:video-hyperframes` (Hyperframes Video).
+
+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."
+
+Call `prepare_open_design_brief` (the open-design MCP server's tool) with skillId "od:video:video-hyperframes" 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/video-hyperframes/agents/openai.yaml

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