16 Claude Code & Codex skills for design.

Skills the agent loads mid-task — copywriting, color theory, creative direction, brainstorming. There’s no static demo because the outcome depends on your input, so each detail page reads like a brief: title, description, triggers, attribution.

  1. 001 Code migration (default scenario) Default reference pipeline for the code-migration taskKind, with patch-edit ↔ build-test devloop and diff-review handoff. scenario code-migration
  2. 002 Contribute Plugin to Open Design Opens a pull request that adds a local Open Design plugin to the Open Design community catalog using the GitHub CLI. utility plugin-sharing
  3. 003 Default design router Hidden fallback scenario for free-form Home prompts. It infers the task type and asks only when the brief cannot be routed reliably. scenario default-router
  4. 004 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
  5. 005 Design refine Baseline Refine plugin for improving an existing Open Design artifact with a focused critique, small patch, and handoff summary. refine design-refine
  6. 006 Export to Next.js Starter downstream export plugin for turning an accepted Open Design artifact into a Next.js App Router handoff. export downstream-export
  7. 007 Export to React Starter downstream export plugin for turning an accepted Open Design artifact into a React component handoff. export downstream-export
  8. 008 Export to Vue Starter downstream export plugin for turning an accepted Open Design artifact into a Vue 3 single-file component handoff. export downstream-export
  9. 009 Figma migration (default scenario) Default reference pipeline for the figma-migration taskKind. scenario figma-migration
  10. 010 Media generation (default scenario) Default scenario plugin for image, video, and audio projects. Routes through the media-* atoms based on the project kind and wraps the result in a live artifact. scenario media-generation
  11. 011 New generation (default scenario) Default reference pipeline for the new-generation taskKind. scenario new-generation
  12. 012 Plugin authoring Guided scenario for creating a local Open Design plugin folder that can be added to My plugins. scenario plugin-authoring
  13. 013 Pptx Html Fidelity Audit Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences. utility engineering
  14. 014 Publish Plugin to GitHub Creates a public GitHub repository for a local Open Design plugin using the GitHub CLI. utility plugin-sharing
  15. 015 Share to community Package the work the user just finished into an Open Design plugin and route them to the existing Add-to-My-plugins / Open-Design-PR buttons. Triggered by the post-completion 'Share to Open Design' submission action. scenario plugin-sharing
  16. 016 Tune & collaborate (default scenario) Default reference pipeline for the tune-collab taskKind. scenario tune-collab

Open Design 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, Windows, and Linux