Appendix
B
Skills, Brand Systems, and Plugins Index
A dated snapshot of what ships in Open Design as of v0.9.0
This is a dated snapshot of what ships in Open Design as of v0.9.0 (released June 2, 2026). The catalog grows with every release --- treat this as a starting map, not source of truth. For the live catalog, run od plugin list or browse the repository directly. Use this appendix to locate the skill, brand system, or plugin category you need, then check the repository for anything added since publication.
Every count and named example here reflects the June 2026 snapshot. Open Design is under active development and the catalog grows with every release. This appendix is a snapshot, not source of truth --- verify counts and names against the live repository at github.com/nexu-io/open-design before citing them externally.
B.1 Skills by Artifact Type
As of June 2026, Open Design ships over 100 skills organized by mode. Each skill is a YAML-frontmatted instruction package that constrains structure, applies a brand system, and fixes output format. Skills are discovered through the daemon's skills/protocol.md convention and selected by the agent at generation time based on the prompt, the active brand system, and any explicit od: scenario override in the skill file.
Skills are grouped into eight modes: prototype, deck, image, video, audio, template, design-system, and utility. Within those modes, scenario tags (such as design, market, code, doc) narrow the agent's selection further. A skill's default_for field marks it as the fallback when no explicit skill is named in the prompt --- so web-prototype is what you get when you ask for "a landing page" without specifying anything further.
The table below lists representative skills from each major artifact family. It is not exhaustive; the full list is in the skills/ directory. When a skill is listed with multiple names, each name is a distinct file with a slightly different fidelity, viewport, or constraint profile. Choose by reading the skill's example_prompt field, which describes the exact artifact type it is designed to produce.
My take: The skill count headline is less useful than the mode taxonomy. When you want to know what Open Design can generate, read the eight modes --- not the number. If you can't find a mode that fits your artifact, that's where a custom skill earns its place. In practice, the prototype mode covers the majority of daily generation tasks; the utility mode covers the document and document-review workflows that product teams constantly need but rarely think to automate. Start with a bundled skill, run it against a few prompts, and customize only the fields that drift.
| Artifact type | Mode | Representative skills | Notes |
|---|---|---|---|
| Web prototype | prototype | web-prototype, saas-landing |
Single-page HTML; all viewports; web-prototype is the default_for most web generation prompts |
| Dashboard | prototype | dashboard |
Tweakable parameters; KPI cards and chart layouts; pairs well with Stripe and Linear brand systems |
| Mobile app | prototype | mobile-app, mobile-onboarding |
Device-framed multi-screen flows; onboarding variant adds step-by-step permission UX |
| Presentation deck | deck | magazine-poster, guizang-ppt, html-ppt |
Multiple deck styles; PPTX export available; guizang-ppt targets Chinese layout conventions |
| Social and email | template | social-carousel, email-marketing |
Aspect-ratio-aware layouts; email skill produces inline-safe HTML compatible with major clients |
| Motion and video | video | motion-frames, hyperframes, sprite-animation |
HyperFrames HTML-to-MP4 path; motion-frames is the starting point; render time is CPU-bound |
| Document | utility | pm-spec, team-okrs, eng-runbook, finance-report, hr-onboarding |
Structured Markdown and PDF outputs; these are branded document templates, not UI prototypes |
| Critique and iteration | utility | critique, tweaks |
Agent-directed review and micro-iteration; use after initial generation to tighten output quality |
B.2 Selected Brand Systems
As of June 2026, Open Design ships approximately 150 brand-grade DESIGN.md systems, per the project README at github.com/nexu-io/open-design. Each system is a machine-readable brand contract --- authored and maintained by the Open Design project and stored in the design-systems/ directory --- encoding colors, type scale, spacing rules, voice guidelines, and component conventions that the agent applies during generation. Systems are organized across more than a dozen domains: AI and LLM tools, developer tools, productivity, fintech, e-commerce, media, education, crypto and Web3, enterprise, design, travel, fashion, and gaming. The source of record for each system is its own DESIGN.md file in the Open Design repository, not any third-party brand guidelines document.
The naming convention is lowercase with hyphens. To use a system, reference it by folder name in the daemon: design-systems/stripe/DESIGN.md. A matching plugin is available for 142 of the approximately 150 systems, which means you can also apply them via od plugin apply stripe.
All brand and product names listed in the table below are used nominatively for identification purposes only. Open Design bundles design-language reference files to support prototyping and learning; the bundled DESIGN.md files are Open Design's own authored documents and are not reproductions of, nor derived from, any third party's proprietary brand guidelines. No logos, wordmarks, exact color or token tables, typography specimens, or other protected brand assets are reproduced here or in the bundled files. All trademarks remain the property of their respective owners. This book and Open Design are independent and are not affiliated with, sponsored by, or endorsed by any of the named brand or product owners, including but not limited to Linear, Vercel, GitHub, ClickHouse, Cohere, Stripe, Coinbase, Binance, Notion, Airtable, Airbnb, Canva, Apple, Figma, Clay, BMW, Bugatti, Anthropic (Claude), Seedance, Suno, Lyria, and HyperFrames/HeyGen. The intended use is studying how design languages encode their rules and applying those insights to your own house DESIGN.md. When building for production, replace any reference system with your own house DESIGN.md.
The eight style-archetype systems at the bottom of the table (Brutalism, Bold, Bento, and others) are not brand systems for real organizations; they are aesthetic direction systems. Use them when a project needs a visual style without a specific brand voice.
| Domain | Notable systems (nominative reference only) | Characteristic worth studying |
|---|---|---|
| Developer tools | Linear, Vercel, GitHub, ClickHouse, Cohere | High-contrast dark defaults; mono-weight UI type; minimal color palette --- useful baseline for developer-facing SaaS |
| Fintech and payments | Stripe, Coinbase, Binance | Trust-forward spacing and typography; widely studied as clean B2B design references |
| Productivity | Notion, Airtable, Cal | Information-dense layouts with neutral surface colors; good starting points for internal-tool prototypes |
| Consumer and lifestyle | Airbnb, Arc, Canva, Apple | Warm, opinionated design voices; useful for studying how consumer apps balance information and whitespace |
| Design and creative | Figma, Clay, Claymorphism | Component-forward systems; the Figma system is a useful reference for product UI convention |
| AI and LLM | Claude, Agentic | Conversational UI patterns; message-thread layouts; good starting points for AI product prototypes |
| Automotive and luxury | BMW, BMW M, Bugatti | High-fidelity editorial systems; useful for studying luxury brand spacing, image treatment, and typographic hierarchy |
| Style archetypes | Brutalism, Bold, Bento, Atelier Zero, Clean, Colorful | Non-brand aesthetic systems; use these when you want a visual direction rather than an existing brand voice |
My take: The approximately 150 systems are most useful as vocabulary, not blueprints. I pull up a reference system to study one decision --- how it handles information density, what its button radius implies about the brand's confidence level, how it uses secondary type weight --- and then write that single decision into my house DESIGN.md. Applying a full bundled system verbatim in production output means shipping someone else's brand voice, which is rarely correct and can create trademark exposure. Build one good house system; use the catalog to learn what good looks like in different contexts.
B.3 Plugin Categories
As of June 2026, Open Design ships 261 official plugins in plugins/_official/, per the project README. The rule of thumb: skills make artifacts; plugins do jobs. A skill generates a dashboard from a blank prompt. A plugin migrates an existing Figma file, exports a generated artifact as a Next.js component tree, or refreshes a live codebase to a new brand spec. Plugins are the design-engineer's primary interface with Open Design after initial prototyping.
The six plugin categories below map to distinct phases of design work: generation (scenarios), asset creation (image and video templates), brand application (design systems wrapped as plugins), UI assembly (atoms), and learning (reference examples). Total plugin count as of June 2026: 261. The examples folder alone contains approximately 140 complete reference artifacts demonstrating skill and brand combinations; verify current count and format by inspecting plugins/_official/examples/ in the live repository.
| Category | Count | Phase of work | What it provides |
|---|---|---|---|
| Scenarios | 11 | Generation and transformation | Complete design workflows: new generation, design refinement, Figma migration, code migration, framework export, media generation, scaffolding, collaborative tuning, and plugin authoring |
| Image templates | 45 | Asset creation | One-shot image prompt templates covering editorial, cinematic, product, and portrait styles; each bundles provider routing and a ready-to-use prompt for the configured image API |
| Video templates | 50 | Motion asset creation | HyperFrames HTML-to-MP4 templates (11 animations) plus Seedance text-to-video and image-to-video routes (39 prompts); Suno and Lyria audio layer integrations are included. HyperFrames, Seedance, Suno, and Lyria are third-party products used nominatively; all trademarks remain the property of their respective owners. |
| Design systems | 142 | Brand application | 142 of the approximately 150 brand DESIGN.md systems wrapped as installable plugins; apply via od plugin apply <name> rather than referencing the DESIGN.md file path manually |
| UI atoms | 13 | UI assembly | Reusable fragment plugins: buttons, hero sections, KPI cards, and other composable UI units; intended as building blocks for larger artifact assembly |
| Reference examples | ~140 | Learning and remixing | Complete remixable artifacts in plugins/_official/examples/ demonstrating skill and brand combinations; study these to understand what a given skill produces at full fidelity. Verify current count against the live repository. |
The 11 Scenario Plugins
Scenario plugins are the highest-leverage entry in the catalog. Each one encodes a complete design workflow --- not just a single artifact, but the full sequence of agent actions needed to accomplish a job. The od-figma-migration scenario, for example, doesn't just import a Figma file; it aligns the imported components to a selected brand system and outputs an artifact that fits the Open Design preview and export pipeline.
The eleven scenario plugins shipping as of June 2026 are listed below. Verify current plugin IDs against the plugins/_official/scenarios/ directory in the live repository, as names may change between releases.
| Plugin ID | Job |
|---|---|
od-default |
Standard generation --- the baseline workflow for new artifact creation from a brief or prompt |
od-design-refine |
Iterative design refinement over an existing artifact; routes the agent through critique, revision, and approval loops |
od-figma-migration |
Imports a Figma file and converts it to an Open Design artifact with brand-system alignment applied |
od-code-migration |
Migrates an existing codebase component into an Open Design-managed, brand-aligned artifact |
od-react-export |
Exports a generated artifact as a React component tree with typed props |
od-nextjs-export |
Exports a generated artifact as a Next.js page or layout component |
od-vue-export |
Exports a generated artifact as a Vue single-file component |
od-media-generation |
Orchestrates image and video generation within a larger design workflow; handles provider routing |
od-new-generation |
Scaffolds a new project with brand, skill, and plugin configuration pre-wired to a starting brief |
od-tune-collab |
Collaborative brand tuning --- adjusts a DESIGN.md across multiple reviewers' inputs into a reconciled contract |
od-plugin-authoring |
Bootstraps the folder structure, frontmatter, and SKILL.md template for a new custom plugin |
HyperFrames Video Templates
The 11 HyperFrames templates in the video-templates category are worth calling out separately because they represent a distinct capability: HTML animations rendered to MP4 on your local machine. As of June 2026, the catalog includes templates for a SaaS product promo, a TikTok-style karaoke loop, a brand sizzle reel, a bar chart race, a flight path map, a logo outro, a money counter, and a website-to-video converter. The remaining three templates are documented in the repository; verify current names against the video-templates/ directory. HyperFrames is a third-party product used nominatively; all trademarks remain the property of their respective owners. The 39 Seedance prompts cover text-to-video and image-to-video routes for longer-form video generation outside the HyperFrames HTML render path.
The counts in this appendix are June 2026 figures --- a snapshot, not source of truth. Categories are more durable than numbers. Use the tables to orient yourself, then run od plugin list --json and inspect the skills/ directory to confirm live totals before citing them in team documentation or presentations. Next: Appendix C covers the operational failures you'll hit in practice --- install errors, daemon health, and MCP connection issues, with a symptom-cause-fix table for each.