{
  "$schema": "https://top-agent-skills.com/schemas/catalog.v1.json",
  "type": "vertical-category",
  "slug": "design",
  "title": "Design",
  "shortTitle": "Design",
  "description": "UI/UX systems, brand guidelines, distinctive frontends, design tokens, Figma workflows.",
  "canonical": "https://top-agent-skills.com/top-skills-for-design",
  "alternates": {
    "html": "https://top-agent-skills.com/top-skills-for-design",
    "markdown": "https://top-agent-skills.com/top-skills-for-design.md",
    "json": "https://top-agent-skills.com/top-skills-for-design.json"
  },
  "rubricVersion": "1.0",
  "methodology": "https://top-agent-skills.com/about/methodology",
  "contentLastUpdated": "2026-08-25",
  "count": 22,
  "topPick": {
    "slug": "frontend-design",
    "name": "frontend-design",
    "score": 92,
    "tagline": "Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.",
    "url": "https://top-agent-skills.com/skill/frontend-design"
  },
  "ranking": [
    {
      "rank": 1,
      "slug": "frontend-design",
      "name": "frontend-design",
      "score": 92,
      "tagline": "Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.",
      "bestFor": "Greenfield landing pages, marketing sites, and any UI that should feel intentional rather than templated.",
      "notIdealFor": "Ports of an existing design system — frontend-design pushes a bold direction that may overwrite established tokens.",
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "claude-api",
        "cursor",
        "codex",
        "gemini-cli",
        "antigravity"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill frontend-design",
      "url": "https://top-agent-skills.com/skill/frontend-design",
      "json": "https://top-agent-skills.com/skill/frontend-design.json"
    },
    {
      "rank": 2,
      "slug": "remotion-best-practices",
      "name": "remotion-best-practices",
      "score": 64,
      "tagline": "Programmatic video done right. Idiomatic Remotion patterns auto-activate when detected.",
      "bestFor": "Video demos, release announcements, explainer videos written in React.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Remotion",
      "license": "Proprietary",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "install": "npx skills add github.com/remotion-dev/skills --skill remotion-best-practices",
      "url": "https://top-agent-skills.com/skill/remotion-best-practices",
      "json": "https://top-agent-skills.com/skill/remotion-best-practices.json"
    },
    {
      "rank": 3,
      "slug": "drawio-diagram-generator",
      "name": "drawio",
      "score": 58,
      "tagline": "The only vendor-official skill from a major diagramming product — and it emits editable .drawio files rather than a throwaway image.",
      "bestFor": "Producing a diagram someone will later edit. Output is native .drawio XML (or an app.diagrams.net link), so the diagram stays maintainable instead of becoming a screenshot.",
      "notIdealFor": "Diagrams that must live inside Markdown. Mermaid stays in the file; .drawio is a separate artefact, which is the trade for editability.",
      "provenance": "verified-org",
      "publisher": "draw.io (JGraph)",
      "license": "Apache-2.0",
      "compatibility": [
        "claude-code",
        "codex"
      ],
      "install": "/plugin marketplace add jgraph/drawio-mcp",
      "url": "https://top-agent-skills.com/skill/drawio-diagram-generator",
      "json": "https://top-agent-skills.com/skill/drawio-diagram-generator.json"
    },
    {
      "rank": 4,
      "slug": "elevenlabs-text-to-speech",
      "name": "text-to-speech",
      "score": 56,
      "tagline": "Vendor-official voiceover generation across 70+ languages, from the company that defined the category. Ships with evals, which almost no skill does.",
      "bestFor": "Generating a voiceover or in-product speech where quality is the point — narration for video, accessibility audio, or a voice interface.",
      "notIdealFor": "Anything with no budget or no network. Every call is billable against an ElevenLabs key, so it is not a free local capability.",
      "provenance": "verified-org",
      "publisher": "ElevenLabs",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add elevenlabs/skills --skill text-to-speech",
      "url": "https://top-agent-skills.com/skill/elevenlabs-text-to-speech",
      "json": "https://top-agent-skills.com/skill/elevenlabs-text-to-speech.json"
    },
    {
      "rank": 5,
      "slug": "runway-api",
      "name": "use-runway-api",
      "score": 53,
      "tagline": "Generative video from the vendor developers name first, as a skill set rather than an SDK crawl.",
      "bestFor": "Producing generated video or image assets from prompts inside an agent workflow.",
      "notIdealFor": "Deterministic or template-driven render — a programmatic renderer is cheaper and repeatable. Requires paid API credits.",
      "provenance": "verified-org",
      "publisher": "RunwayML",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add runwayml/skills --skill use-runway-api",
      "url": "https://top-agent-skills.com/skill/runway-api",
      "json": "https://top-agent-skills.com/skill/runway-api.json"
    },
    {
      "rank": 6,
      "slug": "accessibility-review",
      "name": "accessibility-review",
      "score": 52,
      "tagline": "Pre-handoff a11y audit that catches what design QA misses.",
      "bestFor": "Reviewing a design or live page against WCAG 2.1 AA before engineering handoff or production deploy.",
      "notIdealFor": "Replacing manual screen-reader testing with assistive tech in real environments.",
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "claude-api",
        "cursor",
        "codex",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/accessibility-review",
      "json": "https://top-agent-skills.com/skill/accessibility-review.json"
    },
    {
      "rank": 7,
      "slug": "theme-factory",
      "name": "theme-factory",
      "score": 50,
      "tagline": "Single seed prompt → cohesive token system. Tokens that look intentional, not generated.",
      "bestFor": "Bootstrapping a design system from a vibe.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "cursor"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill theme-factory",
      "url": "https://top-agent-skills.com/skill/theme-factory",
      "json": "https://top-agent-skills.com/skill/theme-factory.json"
    },
    {
      "rank": 8,
      "slug": "vercel-web-design-guidelines",
      "name": "vercel-web-design-guidelines",
      "score": 49,
      "tagline": "100+ accessibility and UX rules from Vercel, applied as a structural audit on your UI code.",
      "bestFor": "Pre-PR audits, accessibility compliance, design system enforcement.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "Vercel",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "install": "npx skills add github.com/vercel-labs/agent-skills --skill web-design-guidelines",
      "url": "https://top-agent-skills.com/skill/vercel-web-design-guidelines",
      "json": "https://top-agent-skills.com/skill/vercel-web-design-guidelines.json"
    },
    {
      "rank": 9,
      "slug": "shadcn-context",
      "name": "shadcn-context",
      "score": 49,
      "tagline": "shadcn/ui context: components, patterns, and the right composition by default.",
      "bestFor": "Teams using shadcn/ui who want the agent to honor component conventions.",
      "notIdealFor": null,
      "provenance": "verified-org",
      "publisher": "shadcn",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor"
      ],
      "install": "npx skills add shadcn/ui",
      "url": "https://top-agent-skills.com/skill/shadcn-context",
      "json": "https://top-agent-skills.com/skill/shadcn-context.json"
    },
    {
      "rank": 10,
      "slug": "mapbox-data-visualization",
      "name": "mapbox-data-visualization-patterns",
      "score": 49,
      "tagline": "The geospatial gap, filled by the vendor that defines it: data on a map, done properly.",
      "bestFor": "Any visualization where location is the dimension that matters, and the dataset is large enough to need tuning.",
      "notIdealFor": "Charts and diagrams — this is cartography, not a plotting library.",
      "provenance": "verified-org",
      "publisher": "Mapbox",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "/plugin marketplace add mapbox/mapbox-agent-skills",
      "url": "https://top-agent-skills.com/skill/mapbox-data-visualization",
      "json": "https://top-agent-skills.com/skill/mapbox-data-visualization.json"
    },
    {
      "rank": 11,
      "slug": "design-critique",
      "name": "design-critique",
      "score": 49,
      "tagline": "Senior-designer feedback on demand. Hierarchy, usability, consistency, motion.",
      "bestFor": "Mid-process design review when you need a second pair of eyes before sharing with stakeholders.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "cursor",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/design-critique",
      "json": "https://top-agent-skills.com/skill/design-critique.json"
    },
    {
      "rank": 12,
      "slug": "design-handoff",
      "name": "design-handoff",
      "score": 49,
      "tagline": "Turn a final design into a spec engineers can implement directly.",
      "bestFor": "The moment a design is approved and engineering needs implementation-ready specs.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "cursor",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/design-handoff",
      "json": "https://top-agent-skills.com/skill/design-handoff.json"
    },
    {
      "rank": 13,
      "slug": "design-system",
      "name": "design-system",
      "score": 49,
      "tagline": "Design-system hygiene at speed. Audit, document, extend.",
      "bestFor": "Teams maintaining a real design system that has grown organically.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "cursor",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/design-system",
      "json": "https://top-agent-skills.com/skill/design-system.json"
    },
    {
      "rank": 14,
      "slug": "ux-copy",
      "name": "ux-copy",
      "score": 49,
      "tagline": "Microcopy that respects the user. Errors, empty states, CTAs, onboarding.",
      "bestFor": "Designers, PMs, and engineers writing the strings users actually read.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "cursor",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/ux-copy",
      "json": "https://top-agent-skills.com/skill/ux-copy.json"
    },
    {
      "rank": 15,
      "slug": "brand-guidelines",
      "name": "brand-guidelines",
      "score": 48,
      "tagline": "Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill.",
      "bestFor": "Internal branded artifacts, landing pages that need to match a brand exactly.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "claude-api"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill brand-guidelines",
      "url": "https://top-agent-skills.com/skill/brand-guidelines",
      "json": "https://top-agent-skills.com/skill/brand-guidelines.json"
    },
    {
      "rank": 16,
      "slug": "algorithmic-art",
      "name": "algorithmic-art",
      "score": 48,
      "tagline": "p5.js algorithmic art with particle systems and procedural geometry.",
      "bestFor": "Generative art, hero illustrations, procedural backgrounds.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill algorithmic-art",
      "url": "https://top-agent-skills.com/skill/algorithmic-art",
      "json": "https://top-agent-skills.com/skill/algorithmic-art.json"
    },
    {
      "rank": 17,
      "slug": "canvas-design",
      "name": "canvas-design",
      "score": 48,
      "tagline": "Visual art from prose. PNG and PDF outputs that look intentionally designed.",
      "bestFor": "Hero images, social posts, one-off marketing visuals.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai"
      ],
      "install": "npx skills add github.com/anthropics/skills --skill canvas-design",
      "url": "https://top-agent-skills.com/skill/canvas-design",
      "json": "https://top-agent-skills.com/skill/canvas-design.json"
    },
    {
      "rank": 18,
      "slug": "research-synthesis",
      "name": "research-synthesis",
      "score": 47,
      "tagline": "Turn raw research into themes, segments, and a prioritized next-steps list.",
      "bestFor": "Designers and researchers with a stack of transcripts and no time to cluster them by hand.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/research-synthesis",
      "json": "https://top-agent-skills.com/skill/research-synthesis.json"
    },
    {
      "rank": 19,
      "slug": "user-research",
      "name": "user-research",
      "score": 47,
      "tagline": "Research-ops in a skill. Plan the study, run it, synthesize the findings.",
      "bestFor": "Product and design teams that need to run research without a dedicated researcher.",
      "notIdealFor": null,
      "provenance": "anthropic",
      "publisher": "Anthropic",
      "license": "MIT",
      "compatibility": [
        "claude-code",
        "claude-ai",
        "antigravity"
      ],
      "install": "claude plugin install design",
      "url": "https://top-agent-skills.com/skill/user-research",
      "json": "https://top-agent-skills.com/skill/user-research.json"
    },
    {
      "rank": 20,
      "slug": "canva-skills",
      "name": "canva",
      "score": 46,
      "tagline": "Brand-checked design output at volume — the production half of design work.",
      "bestFor": "Generating many on-brand variants from data, or resizing one design across every social format.",
      "notIdealFor": "Original art direction, and anyone without a Canva account and Connector access.",
      "provenance": "verified-org",
      "publisher": "Canva",
      "license": "Apache-2.0",
      "compatibility": [
        "claude-code"
      ],
      "install": "/plugin marketplace add canva-sdks/canva-skills",
      "url": "https://top-agent-skills.com/skill/canva-skills",
      "json": "https://top-agent-skills.com/skill/canva-skills.json"
    },
    {
      "rank": 21,
      "slug": "tufte-charts",
      "name": "tufte",
      "score": 44,
      "tagline": "A named design canon for charts, not another plotting wrapper.",
      "bestFor": "Charts that will be published or presented, where the default library output looks like the default library output.",
      "notIdealFor": "Interactive dashboards and live data — this is about how a chart is designed, not how it is served.",
      "provenance": "community",
      "publisher": "aref-vc",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "git clone https://github.com/aref-vc/tufte-claude-skill.git ~/.claude/skills/tufte",
      "url": "https://top-agent-skills.com/skill/tufte-charts",
      "json": "https://top-agent-skills.com/skill/tufte-charts.json"
    },
    {
      "rank": 22,
      "slug": "web-asset-generator",
      "name": "web-asset-generator",
      "score": 41,
      "tagline": "Favicons, app icons, social cards — generated at all the right sizes.",
      "bestFor": "Pre-launch asset generation, social-card production at scale.",
      "notIdealFor": null,
      "provenance": "community",
      "publisher": "alonw0",
      "license": "MIT",
      "compatibility": [
        "claude-code"
      ],
      "install": "npx skills add alonw0/web-asset-generator",
      "url": "https://top-agent-skills.com/skill/web-asset-generator",
      "json": "https://top-agent-skills.com/skill/web-asset-generator.json"
    }
  ],
  "faqs": [
    {
      "question": "Do design Skills work with Figma?",
      "answer": "Yes — the official Figma plugin ships Skills (figma-generate-design, figma-code-connect) for design-to-code and code-to-design workflows. Several community Skills also wrap the Figma MCP."
    },
    {
      "question": "How rigorous is the accessibility-review Skill?",
      "answer": "It runs against WCAG 2.1 AA — color contrast, keyboard navigation, focus rings, touch targets, screen reader behavior. It is the standard pre-handoff check."
    },
    {
      "question": "Are these Skills useful for design systems?",
      "answer": "Yes — design-system Skills audit naming consistency, find hardcoded values, document component variants and states, and propose new patterns that fit the existing system."
    },
    {
      "question": "Can a Skill replace a real design critique?",
      "answer": "No — Skills catch the mechanical issues (hierarchy, spacing inconsistency, color-contrast). Real critique covers intent, brand fit, and tradeoffs that the Skill cannot judge."
    },
    {
      "question": "Do research-synthesis Skills handle interview transcripts?",
      "answer": "Yes — they cluster transcripts into themes, identify recurring patterns, and surface representative quotes. They work best with raw transcripts; pre-summarized notes lose signal."
    }
  ],
  "license": "https://creativecommons.org/licenses/by/4.0/",
  "attribution": "Top Agent Skills (https://top-agent-skills.com)"
}