Best Claude Code Design skills
1,151Ranked by quality score. Browse all 1,151 Design skills
Design skills push Claude Code past the default look. Anthropic's own set is here: Frontend Design for distinctive, production-grade interfaces, Brand Guidelines, Canvas Design, Theme Factory, generative art with p5.js and a Slack GIF creator. Community entries add drop-in DESIGN.md files modelled on well-known design systems, and HTML-native prototyping skills for high-fidelity mockups and slides.
Reach for one when everything Claude builds looks like the same shadcn starter, or when a project has a real brand and you need typography, colour and spacing enforced rather than approximated. A DESIGN.md skill is the quickest way to give a codebase a visual constitution that survives across sessions. The art and GIF skills are narrower but do exactly what they say.
Install by placing the skill folder under ~/.claude/skills/ so ~/.claude/skills/<name>/SKILL.md exists; the entry page shows the command. Design skills are mostly instructions and reference files, so they are among the safest to install, but check the tools list: image-producing skills need Bash and will write files. Open a new session and describe the interface you want.
Top 20 Design skills
Algorithmic Art
79Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Brand Guidelines
79Apply Anthropic's official brand colors and typography to artifacts
Canvas Design
79Create beautiful visual art in PNG and PDF documents using design philosophy
Frontend Design
79Create distinctive, production-grade frontend interfaces with high design quality
Slack Gif Creator
79Create animated GIFs optimized for Slack's size constraints
Huashu Design
72Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic
Od Contribute
70Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too.
Weather Orchestrator Command
68Fetch the current temperature for Dubai, UAE and create a visual SVG weather card.
planning-with-files
67Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B acquisition.
Add Oas Support
64Add support for a new OpenAPI Specification version to Swagger UI
Kode Agent
64Kode Agent — Design for post-human workflows.
Design Review Workflow
63by Patrick Ellis - A tailored workflow for enabling automated UI/UX design review, including specialized sub agents, slash commands, CLAUDE.md excerpts, and…
NotebookLM Automation
62Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI.
Plannotator
62Interactive plan review UI for Claude Code with visual annotation, offline sharing, and Obsidian/Bear integration.
Brainstorming
60Transform rough ideas into fully-formed designs through structured questioning and alternative exploration
interface-design
60Design engineering for Claude Code. Craft, memory, and enforcement for consistent UI.
Claude Design Engineer
60Design engineering for Claude Code. Craft, memory, and enforcement for consistent UI.
Pipelines
60Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework
Designer Skills
60Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.
Deepclaude
60Use Claude Code's autonomous agent loop with DeepSeek V4 Pro, OpenRouter, or any Anthropic-compatible backend.
These are 20 of 1,151. See every Design skill, searchable and sortable by stars or name.