--- title: Top Skills for Design slug: design type: vertical-category canonical: https://top-agent-skills.com/top-skills-for-design skills: 22 rubric: 1.0 updated: 2026-08-25 --- # Top Skills for Design **frontend-design** is the top-ranked design Skill at 92/100: Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written. UI/UX systems, brand guidelines, distinctive frontends, design tokens, Figma workflows. This page lists the Skills useful in this domain, including general-purpose tooling commonly used here — not only Skills built for it. Where a general-purpose Skill outranks the domain-native ones, the introduction below says so. 22 Skills indexed, ranked by a published composite score (https://top-agent-skills.com/about/methodology). Content last changed 2026-08-25. ## The ranking ### 1. frontend-design — score 92/100 (official-anthropic) Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written. - Best for: Greenfield landing pages, marketing sites, and any UI that should feel intentional rather than templated. - Not ideal for: Ports of an existing design system — frontend-design pushes a bold direction that may overwrite established tokens. - Publisher: Anthropic · MIT - Verified on: claude-code, claude-ai, claude-api, cursor, codex, gemini-cli, antigravity ```bash npx skills add github.com/anthropics/skills --skill frontend-design ``` Full entry: https://top-agent-skills.com/skill/frontend-design (https://top-agent-skills.com/skill/frontend-design.md) ### 2. remotion-best-practices — score 64/100 (verified-org) Programmatic video done right. Idiomatic Remotion patterns auto-activate when detected. - Best for: Video demos, release announcements, explainer videos written in React. - Publisher: Remotion · Proprietary - Verified on: claude-code, cursor, codex ```bash npx skills add github.com/remotion-dev/skills --skill remotion-best-practices ``` Full entry: https://top-agent-skills.com/skill/remotion-best-practices (https://top-agent-skills.com/skill/remotion-best-practices.md) ### 3. drawio — score 58/100 (verified-org) The only vendor-official skill from a major diagramming product — and it emits editable .drawio files rather than a throwaway image. - Best for: 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. - Not ideal for: Diagrams that must live inside Markdown. Mermaid stays in the file; .drawio is a separate artefact, which is the trade for editability. - Publisher: draw.io (JGraph) · Apache-2.0 - Verified on: claude-code, codex ```bash /plugin marketplace add jgraph/drawio-mcp ``` Full entry: https://top-agent-skills.com/skill/drawio-diagram-generator (https://top-agent-skills.com/skill/drawio-diagram-generator.md) ### 4. text-to-speech — score 56/100 (verified-org) Vendor-official voiceover generation across 70+ languages, from the company that defined the category. Ships with evals, which almost no skill does. - Best for: Generating a voiceover or in-product speech where quality is the point — narration for video, accessibility audio, or a voice interface. - Not ideal for: Anything with no budget or no network. Every call is billable against an ElevenLabs key, so it is not a free local capability. - Publisher: ElevenLabs · MIT - Verified on: claude-code ```bash npx skills add elevenlabs/skills --skill text-to-speech ``` Full entry: https://top-agent-skills.com/skill/elevenlabs-text-to-speech (https://top-agent-skills.com/skill/elevenlabs-text-to-speech.md) ### 5. use-runway-api — score 53/100 (verified-org) Generative video from the vendor developers name first, as a skill set rather than an SDK crawl. - Best for: Producing generated video or image assets from prompts inside an agent workflow. - Not ideal for: Deterministic or template-driven render — a programmatic renderer is cheaper and repeatable. Requires paid API credits. - Publisher: RunwayML · MIT - Verified on: claude-code ```bash npx skills add runwayml/skills --skill use-runway-api ``` Full entry: https://top-agent-skills.com/skill/runway-api (https://top-agent-skills.com/skill/runway-api.md) ### 6. accessibility-review — score 52/100 (official-anthropic) Pre-handoff a11y audit that catches what design QA misses. Full entry: https://top-agent-skills.com/skill/accessibility-review (https://top-agent-skills.com/skill/accessibility-review.md) ### 7. theme-factory — score 50/100 (official-anthropic) Single seed prompt → cohesive token system. Tokens that look intentional, not generated. Full entry: https://top-agent-skills.com/skill/theme-factory (https://top-agent-skills.com/skill/theme-factory.md) ### 8. vercel-web-design-guidelines — score 49/100 (verified-org) 100+ accessibility and UX rules from Vercel, applied as a structural audit on your UI code. Full entry: https://top-agent-skills.com/skill/vercel-web-design-guidelines (https://top-agent-skills.com/skill/vercel-web-design-guidelines.md) ### 9. shadcn-context — score 49/100 (verified-org) shadcn/ui context: components, patterns, and the right composition by default. Full entry: https://top-agent-skills.com/skill/shadcn-context (https://top-agent-skills.com/skill/shadcn-context.md) ### 10. mapbox-data-visualization-patterns — score 49/100 (verified-org) The geospatial gap, filled by the vendor that defines it: data on a map, done properly. Full entry: https://top-agent-skills.com/skill/mapbox-data-visualization (https://top-agent-skills.com/skill/mapbox-data-visualization.md) ### 11. design-critique — score 49/100 (official-anthropic) Senior-designer feedback on demand. Hierarchy, usability, consistency, motion. Full entry: https://top-agent-skills.com/skill/design-critique (https://top-agent-skills.com/skill/design-critique.md) ### 12. design-handoff — score 49/100 (official-anthropic) Turn a final design into a spec engineers can implement directly. Full entry: https://top-agent-skills.com/skill/design-handoff (https://top-agent-skills.com/skill/design-handoff.md) ### 13. design-system — score 49/100 (official-anthropic) Design-system hygiene at speed. Audit, document, extend. Full entry: https://top-agent-skills.com/skill/design-system (https://top-agent-skills.com/skill/design-system.md) ### 14. ux-copy — score 49/100 (official-anthropic) Microcopy that respects the user. Errors, empty states, CTAs, onboarding. Full entry: https://top-agent-skills.com/skill/ux-copy (https://top-agent-skills.com/skill/ux-copy.md) ### 15. brand-guidelines — score 48/100 (official-anthropic) Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill. Full entry: https://top-agent-skills.com/skill/brand-guidelines (https://top-agent-skills.com/skill/brand-guidelines.md) ### 16. algorithmic-art — score 48/100 (official-anthropic) p5.js algorithmic art with particle systems and procedural geometry. Full entry: https://top-agent-skills.com/skill/algorithmic-art (https://top-agent-skills.com/skill/algorithmic-art.md) ### 17. canvas-design — score 48/100 (official-anthropic) Visual art from prose. PNG and PDF outputs that look intentionally designed. Full entry: https://top-agent-skills.com/skill/canvas-design (https://top-agent-skills.com/skill/canvas-design.md) ### 18. research-synthesis — score 47/100 (official-anthropic) Turn raw research into themes, segments, and a prioritized next-steps list. Full entry: https://top-agent-skills.com/skill/research-synthesis (https://top-agent-skills.com/skill/research-synthesis.md) ### 19. user-research — score 47/100 (official-anthropic) Research-ops in a skill. Plan the study, run it, synthesize the findings. Full entry: https://top-agent-skills.com/skill/user-research (https://top-agent-skills.com/skill/user-research.md) ### 20. canva — score 46/100 (verified-org) Brand-checked design output at volume — the production half of design work. Full entry: https://top-agent-skills.com/skill/canva-skills (https://top-agent-skills.com/skill/canva-skills.md) ### 21. tufte — score 44/100 (community) A named design canon for charts, not another plotting wrapper. Full entry: https://top-agent-skills.com/skill/tufte-charts (https://top-agent-skills.com/skill/tufte-charts.md) ### 22. web-asset-generator — score 41/100 (community) Favicons, app icons, social cards — generated at all the right sizes. Full entry: https://top-agent-skills.com/skill/web-asset-generator (https://top-agent-skills.com/skill/web-asset-generator.md) ## About this category The best agent Skills for design in 2026 are Anthropic's frontend-design for turning a brief into a real interface, Vercel's vercel-web-design-guidelines for the 100+ accessibility and UX rules most designs quietly break, and design-system plus accessibility-review for the audit work before handoff. For charts specifically, tufte-charts is the only entry here ranked on a named design canon rather than a vendor SDK. Design vertical Skills are the toolkit for product designers, design engineers, UX writers and design leads — design-system audit, component documentation, accessibility review, design critique, UX copy, research synthesis. The category mirrors the primary frontend-design group but is organized by role and includes upstream research and downstream handoff work. The common workflows are familiar to any design team: review a mockup for usability and hierarchy, audit a design system for inconsistencies, generate developer handoff specs (layout, tokens, states, breakpoints), write microcopy for empty states and errors, run a WCAG accessibility audit, synthesize user research notes into themes. Several Skills pair with the Figma MCP server for live design context and round-tripping. Product designers, design system leads, design engineers, UX researchers, and design managers use these Skills. Composite scoring weights install count, provenance (design agencies, system maintainers), and how well the Skill respects design intent — Skills that auto-correct without flagging deviations lose to those that surface the tradeoff. ## Common questions **Do design Skills work with Figma?** 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. **How rigorous is the accessibility-review Skill?** 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. **Are these Skills useful for design systems?** Yes — design-system Skills audit naming consistency, find hardcoded values, document component variants and states, and propose new patterns that fit the existing system. **Can a Skill replace a real design critique?** No — Skills catch the mechanical issues (hierarchy, spacing inconsistency, color-contrast). Real critique covers intent, brand fit, and tradeoffs that the Skill cannot judge. **Do research-synthesis Skills handle interview transcripts?** Yes — they cluster transcripts into themes, identify recurring patterns, and surface representative quotes. They work best with raw transcripts; pre-summarized notes lose signal. --- _Top Agent Skills. Machine-readable twin of https://top-agent-skills.com/top-skills-for-design._ _JSON: https://top-agent-skills.com/top-skills-for-design.json · whole catalog: https://top-agent-skills.com/skills.json (CC BY 4.0)_