PlugWiki

Claude skills for design

Claude skills for design work beyond code: UI and UX rules, design systems, posters, banners, diagrams and brand assets.

Picks
7
ranked

UI UX Pro Max is the most installed Claude skill for general design work. It gives Claude a searchable database of styles, palettes and font pairings to choose from before it designs anything.

The rest cover jobs that UI-code skills skip: design systems and tokens, posters, banners and diagrams. Most skills here guide Claude and produce files such as HTML, PNG or PDF, so you still review the result. For building web pages in code, see Claude frontend design skills.

Good for

  • Founders and solo builders without a designer
  • Marketers who need banners and social images fast
  • Designers who want AI drafts and design tokens they can edit
  • Developers who need a design system or an architecture diagram

Top picks

Skills about visual and product design, ordered by installs on skills.sh as of November 2, 2026, with GitHub stars beside them. At most three skills per repo are listed, so banner-design (43,129 installs, from the same repo as ui-ux-pro-max, design-system and design) is left out.

  1. 1
    ui-ux-pro-maxSkill

    A searchable design database of styles, palettes, font pairings and UX rules. Claude picks them for your product before it designs. Needs Python 3.

    143,821 GitHub stars
  2. 2
    apple-designSkill

    Apple's rules for fluid, gesture-driven interfaces, translated for the web: springs, momentum and type details. Guidance only, no scripts.

    52,705 GitHub stars
  3. 3
    canvas-designSkill

    Anthropic's skill for posters and static art. Claude writes a short design philosophy, then makes a PNG or PDF from it.

    186,362 GitHub stars
  4. 4
    huashu-designSkill

    Designs in HTML: prototypes, decks, animation and design reviews. Shows three draft directions first. SKILL.md is in Chinese, and the repo has 439 files with scripts.

    28,396 GitHub stars
  5. 5
    design-systemSkill

    Builds design tokens in three layers, component specs and on-brand HTML slide decks. Part of the nextlevelbuilder set.

    143,821 GitHub stars
  6. 6
    designSkill

    One skill that routes logos, brand identity, banners, icons and social images. Its image scripts need a Gemini API key.

    143,821 GitHub stars
  7. 7
    diagram-designSkill

    Draws architecture diagrams, flowcharts and charts as one HTML file with inline SVG. Covers 45 diagram types.

    63,872 GitHub stars

Design a poster and keep its colors as tokens

Claude

  1. 1

    Pick the skill for the job

    Use canvas-design for posters and static art, and design-system for tokens and component specs.

    Uses canvas-design, design-system

  2. 2

    Install it

    npx skills add https://github.com/anthropics/skills --skill canvas-design

    canvas-design needs no other skills. design-system comes from the nextlevelbuilder set, so install that set before the last step.

    Uses canvas-design

  3. 3

    Brief it

    canvas-design first writes a short design philosophy for the piece, then makes a single-page PNG or PDF that is mostly visual.

    Prompt
    Design a poster for a data analytics studio. Calm blue palette, no stock photos, very little text.

    Tip: Example prompts are illustrations; swap in your own brand.

  4. 4

    Keep the winner as tokens

    design-system builds design tokens in three layers: raw values, purpose aliases and component tokens. It can generate CSS variables from a JSON token file.

    Prompt
    Turn the colors and fonts of the option I picked into design tokens.

    Uses design-system

Comparison

SkillOutputNeedsInstalls
UI UX Pro MaxThis pageDesign rulesPython 3428,860
apple-designDesign guidanceNothing extra263,654
canvas-designPNG or PDFNothing extra125,552
design-systemTokens, specsSibling skills46,324

Questions

What is the best Claude skill for design?

By installs on skills.sh, UI UX Pro Max leads, followed by apple-design and canvas-design. The right one depends on the job: canvas-design for posters and design-system for tokens.

Can Claude make logos and brand identity?

Yes, through the design skill from nextlevelbuilder. Its logo, mockup and icon scripts call an image model and need a Gemini API key; the logo script can use Atlas Cloud or MuAPI keys instead.

Can Claude design posters or art?

Yes. Anthropic's canvas-design skill has Claude write a short design philosophy, then make a single-page PNG or PDF that is mostly visual and uses very little text.

Can Claude draw diagrams?

Yes. diagram-design produces architecture diagrams, flowcharts and charts as one HTML file with inline SVG, across 45 diagram types. PNG export needs Playwright for Python, which the skill does not install for you.

Do design skills need API keys?

Most do not. The design skill needs a Gemini API key for its image scripts, and UI UX Pro Max needs Python 3.

How do I install a design skill?

Run the npx skills add command from the steps above with the skill's name, or use the install box on its page. Each page lists the route for Claude Code, Codex and other assistants.

Are Claude design skills free?

Yes. You pay only for your Claude plan or API use, plus any image API key a skill needs. Most are MIT or Apache-2.0; Anthropic's canvas-design points to a LICENSE.txt in its folder.

What is the difference between this list and frontend design skills?

This list covers brand, graphics, design systems and diagrams. For building web pages and screens in code, see Claude frontend design skills.

Sources

Docs, issue trackers and discussions this page is built from.

Show all 18
  1. skills.sh · skills.sh
  2. skills.sh: ui-ux-pro-max · skills.sh
  3. nextlevelbuilder/ui-ux-pro-max-skill · github.com
  4. skills.sh: canvas-design · skills.sh
  5. anthropics/skills · github.com
  6. skills.sh: banner-design · skills.sh
  7. skills.sh: design-system · skills.sh
  8. skills.sh: apple-design · skills.sh
  9. emilkowalski/skills · github.com
  10. skills.sh: extract-design-system · skills.sh
  11. arvindrk/extract-design-system · github.com
  12. skills.sh: design-md · skills.sh
  13. google-labs-code/stitch-skills · github.com
  14. skills.sh: huashu-design · skills.sh
  15. alchaincyf/huashu-design · github.com
  16. skills.sh: design · skills.sh
  17. skills.sh: diagram-design · skills.sh
  18. cathrynlavery/diagram-design · github.com

Updated Nov 3, 2026.