Appendix
B
Skills, Brand Systems, and Plugins Index
A dated snapshot of what ships in OpenDesign, counts verified for release 0.21.1
This index provides a reference map of bundled components; counts were refreshed for the 0.21.1 line (September 2026). The ecosystem expands with each release. Consult od plugin list or inspect the project catalog for live entries beyond this initial list.
All catalog numbers and examples reflect Open Design v0.21.1 (September 2026). Verify current inventories against the main repository at github.com/nexu-io/open-design prior to external citation.
B.1 Skills by Artifact Type
Over 100 bundled skills define generation behavior across eight core modes. Each package uses YAML frontmatter to constrain layout, apply brand contracts, and lock output formats. At run time, agents discover skills via skills/protocol.md, picking the best match for the user's prompt and active brand rules.
The eight operational modes comprise prototype, deck, image, video, audio, template, design-system, and utility. Scenario tags refine selection. When prompts omit an explicit skill, the system defaults to the default_for entry --- delivering web-prototype for generic web landing requests.
The matrix below highlights key skills by artifact family. Additional entries reside within the skills/ directory. Review individual example_prompt fields to select exact target profiles.
Taxonomy matters more than raw totals. Reviewing the eight operational modes clarifies overall system capabilities. Prototype mode handles routine web UI generation, while utility mode covers document and review workflows. Start with standard packages before building custom extensions.
| Artifact type | Mode | Representative skills | Notes |
|---|---|---|---|
| Web prototype | prototype | web-prototype, saas-landing |
Generates responsive single-page HTML layouts across standard desktop and mobile viewports, serving as the default handler for general web prompts. |
| Dashboard | prototype | dashboard |
Configurable charts and KPI metrics. |
| Mobile app | prototype | mobile-app, mobile-onboarding |
Renders multi-screen mobile application flows within device frames, with onboarding variants guiding users through permission dialogs and setup steps. |
| Presentation deck | deck | magazine-poster, guizang-ppt, html-ppt |
Formats presentations for PPTX export. |
| Social and email | template | social-carousel, email-marketing |
Builds responsive social media tiles and client-compatible email templates engineered with inline CSS. |
| Motion and video | video | motion-frames, hyperframes, sprite-animation |
HyperFrames animation pipeline. |
| Document | utility | pm-spec, team-okrs, eng-runbook, finance-report, hr-onboarding |
Produces publication-ready technical specifications, runbooks, and executive summaries in structured Markdown and PDF formats. |
| Critique and iteration | utility | critique, tweaks |
Automated design critiques. |
B.2 Selected Brand Systems
The platform bundles 152 official preset design systems (the count shown in-app on the Design systems page), with slightly more directories within the local design-systems/ folder to account for plugin wrappers and regional variants in the 0.21 release series. Each specification encodes color palettes, typographic scales, spacing tokens, and component guidelines for agent execution. Domains span developer tooling, fintech, productivity, e-commerce, and creative software. Authoritative rules derive directly from local spec files within the codebase.
System directories follow lowercase hyphenated naming. Specify paths directly or apply pre-packaged plugins via od plugin apply <name>.
All third-party brand names in this section serve nominative reference purposes only. Bundled design specifications are original reference files created for research and prototyping. They do not reproduce proprietary assets, logos, or protected trademarks, which remain the property of their respective owners. This publication maintains no commercial affiliation with or endorsement from cited brand owners. Study reference files to understand token structure, then substitute custom brand specs for production work.
The eight style-archetype systems at the bottom of the table (Brutalism, Bold, Bento, and others) are not identity contracts 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 for developer-facing SaaS. |
| Fintech and payments | Stripe, Coinbase, Binance | Trust-forward spacing and typography. Widely studied B2B design references. |
| Productivity | Notion, Airtable, Cal | Information-dense layouts with neutral surface colors. Good starting points for internal tools. |
| Consumer and lifestyle | Airbnb, Arc, Canva, Apple | Warm, opinionated design voices. Useful for studying consumer whitespace balance. |
| Design and creative | Figma, Clay, Claymorphism | Component-forward systems. The Figma system is a useful UI reference. |
| AI and LLM | Claude, Agentic | Conversational UI patterns and message-thread layouts. Good starting points for AI prototypes. |
| Automotive and luxury | BMW, BMW M, Bugatti | High-fidelity editorial systems. Useful for studying luxury brand spacing and typography. |
| Style archetypes | Brutalism, Bold, Bento, Atelier Zero, Clean, Colorful | Non-brand aesthetic systems. Select these when seeking visual direction over brand voice. |
Use bundled specs to study design patterns rather than copying complete identities. Inspecting how reference systems handle token density, radii, and typographic weight informs custom house rules. Authoring bespoke brand specs avoids trademark overlap and establishes a distinct product voice.
B.3 Plugin Categories
The environment includes 261 official plugin packages, expanding to roughly 280 total catalog entries across the broader repository listing (about 277 under plugins/_official/ in the 0.21.x line); the in-app marketplace organizes the official set into Expert suites and Skills across eight artifact categories. While skills create initial artifacts, plugins execute specific operational jobs. Workflows include importing Figma frames, exporting Next.js component trees, and updating codebases against brand specifications.
Six functional categories structure the plugin ecosystem: generation scenarios, asset templates, brand applications, UI assembly atoms, and reference examples. Browse plugins/_official/examples/ to inspect sample projects illustrating skill and brand pairings.
| Category | Count | Phase of work | What it provides |
|---|---|---|---|
| Scenarios | 11 | Generation and transformation | Complete end-to-end design workflows. |
| Image templates | 45 | Asset creation | One-shot prompt configurations covering editorial, cinematic, product, and portrait aesthetics with multi-provider inference routing. |
| Video templates | 50 | Motion asset creation | Video generation templates. |
| Design systems | 142 | Brand application | Packages complete brand DESIGN.md specifications as installable system plugins applied across projects via od plugin apply. |
| UI atoms | 13 | UI assembly | UI assembly components. |
| Reference examples | ~140 | Learning and remixing | Comprehensive library of working example projects in plugins/_official/examples/ demonstrating diverse skill configurations and token combinations. |
The 11 Workflow Automation Plugins
Workflow automation extensions deliver substantial leverage across the pipeline. Each package coordinates multi-step agent sequences rather than single-artifact actions. For instance, od-figma-migration converts imported Figma layouts directly into brand-aligned workspace artifacts ready for export.
The eleven bundled workflow scenarios available in current distributions appear below. Verify current plugin identifiers against the local plugins/_official/scenarios/ path, as naming conventions evolve over time.
| Plugin ID | Job |
|---|---|
od-default |
Establishes the default generation baseline for turning text prompts into initial prototypes. |
od-design-refine |
Runs cyclical design refinement loops with critique, revision, and approval steps to elevate visual polish across multi-artifact workspaces. |
od-figma-migration |
Converts imported .fig archives into clean artifacts. |
od-code-migration |
Transforms existing codebases to match updated brand tokens, colors, and styling rules across frontend projects. |
od-react-export |
Generates typed React components. |
od-nextjs-export |
Compiles HTML prototypes into idiomatic Next.js routes, server components, and layout files. |
od-vue-export |
Produces scoped Vue components. |
od-media-generation |
Coordinates asset rendering across diverse image and video diffusion models, managing prompt dispatch, resolution settings, and download pipelines. |
od-new-generation |
Scaffolds projects from presets. |
od-tune-collab |
Synthesizes reviewer annotations and conflicting feedback into actionable design system rules. |
od-plugin-authoring |
Generates complete boilerplate for authoring new custom plugins, including directory structures, YAML metadata manifests, and execution handlers. |
HyperFrames Video Templates
Video template offerings include 11 HyperFrames packages that render local HTML animations directly to MP4 assets. Supported layouts feature SaaS product demos, brand reels, data charts, and UI walk-throughs. Additionally, 39 Seedance prompt templates manage external text-to-video and image-to-video rendering pipeline tasks. HyperFrames and Seedance are products of their respective owners; references here are nominative identification only, not affiliation or endorsement.
Category structures provide lasting architectural guidance. Run od plugin list --json to inspect live counts before writing team documentation. Next: Appendix C covers operational troubleshooting, daemon health checks, and connection remedies.