Catalog · Nº 01

design-system — 36 brand-grade design-system agents.

Filtered to od.mode: design-system. Every skill below reads the active DESIGN.md as a system prompt, so it inherits colors, type, and spacing from any portable system you pair it with.

← All skills (36 of total)

  1. 001 ad-creative Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration. design-system
  2. 002 apple-hig Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS. design-system
  3. 003 brainstorming Transform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work. design-system
  4. 004 brand-guidelines Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own. design-system
  5. 005 color-expert Color science expert skill with 286K words of reference material covering OKLCH/OKLAB, palette generation, accessibility/contrast, color naming, pigment mixing, and historical color theory. design-system
  6. 006 competitive-ads-extractor Extract and analyze competitors' ads from ad libraries to understand messaging and creative approaches that resonate. design-system
  7. 007 copywriting Write and rewrite marketing copy for landing pages, homepages, and ads. Useful as a copy chief partner during launches. design-system
  8. 008 creative-director AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation. design-system
  9. 009 design-brief Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief". design-system planning desktop
  10. 010 design-consultation Build a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work. design-system
  11. 011 design-md Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth. design-system
  12. 012 design-review Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch. design-system
  13. 013 domain-name-brainstormer Generate creative domain name ideas and check availability across multiple TLDs including .com, .io, .dev, and .ai. design-system
  14. 014 enhance-prompt Improve prompts with design specs and UI/UX vocabulary. Useful for design-to-code workflows and clarifying requests for visual output. design-system
  15. 015 figma-code-connect-components Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically. design-system
  16. 016 figma-create-design-system-rules Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source. design-system
  17. 017 figma-create-new-file Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows. design-system
  18. 018 figma-generate-design Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens. design-system
  19. 019 figma-generate-library Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components. design-system
  20. 020 figma-implement-design Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent. design-system
  21. 021 figma-use Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue. design-system
  22. 022 frontend-skill Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook. design-system
  23. 023 marketing-psychology Apply psychological principles and behavioral science to copy and design. Useful for tightening hooks, framing, and pricing presentation. design-system
  24. 024 paywall-upgrade-cro Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments. design-system
  25. 025 plan-design-review Senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work. design-system
  26. 026 platform-design 300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web. design-system
  27. 027 reference-design-contract Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff. Use it before prototypes, decks, redesigns, or image remix work when the user needs a reusable visual direction rather than a one-off prompt. design-system planning desktop
  28. 028 shadcn-ui Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly. design-system
  29. 029 stitch-design-taste Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. design-system design desktop
  30. 030 stitch-loop Iterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI. design-system
  31. 031 swiftui-design SwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode. design-system
  32. 032 theme-factory Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes. design-system
  33. 033 ui-skills Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces. design-system
  34. 034 ui-ux-pro-max Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in OpenDesign. design-system
  35. 035 web-design-guidelines Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI. design-system desktop
  36. 036 wpds WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites. design-system

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows