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.
- 001 ad-creative Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
- 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.
- 003 brainstorming Transform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work.
- 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.
- 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.
- 006 competitive-ads-extractor Extract and analyze competitors' ads from ad libraries to understand messaging and creative approaches that resonate.
- 007 copywriting Write and rewrite marketing copy for landing pages, homepages, and ads. Useful as a copy chief partner during launches.
- 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.
- 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".
- 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.
- 011 design-md Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.
- 012 design-review Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.
- 013 domain-name-brainstormer Generate creative domain name ideas and check availability across multiple TLDs including .com, .io, .dev, and .ai.
- 014 enhance-prompt Improve prompts with design specs and UI/UX vocabulary. Useful for design-to-code workflows and clarifying requests for visual output.
- 015 figma-code-connect-components Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 022 frontend-design Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.
- 023 frontend-skill Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.
- 024 marketing-psychology Apply psychological principles and behavioral science to copy and design. Useful for tightening hooks, framing, and pricing presentation.
- 025 paywall-upgrade-cro Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.
- 026 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.
- 027 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.
- 028 shadcn-ui Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.
- 029 stitch-loop Iterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI.
- 030 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.
- 031 taste-skill High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop.
- 032 theme-factory Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.
- 033 ui-skills Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces.
- 034 ui-ux-pro-max UI/UX design patterns and best practices. Pattern library + heuristic checks for shipping clean, usable interfaces.
- 035 web-design-guidelines Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
- 036 wpds WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.