Best Design & Creative Skills for Claude Code
Skills for diagrams, infographics, image generation, and visual content. Every skill is evaluated on six dimensions with a public scorecard on its detail page.
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, se…
Well-built SVG diagram generator: type-routing table, per-type layout references, strict layering/spacing rules and a clean bun script for PNG conversion; description lacks a When-Not clause.
Designs cloud architectures, creates migration plans, generates cost optimization recommendations…
Excellent cloud architecture skill: six-step workflow with concrete validation checkpoints (peering state, target health, RTO/RPO confirmation), least-privilege IAM examples, five load-when references; only lacks When-Not boundary.
Optimizes database queries and improves performance across PostgreSQL and MySQL systems. Use when…
Outstanding database tuning skill: baseline-first EXPLAIN ANALYZE workflow, before/after measurement loop, non-production guard, pattern-remedy table and concrete PostgreSQL/MySQL SQL across five references; only lacks When-Not boundary.
AI image generation with OpenAI GPT Image 2, Azure OpenAI, Google, OpenRouter, DashScope, Z.AI GL…
Excellent multi-provider image generation skill: 291-line SKILL.md, per-provider references, batch pipeline with retries and failure reports, tests included. Only gap is a missing When-Not trigger boundary.
Generate professional infographics with 21 layout types and 22 visual styles. Analyzes content, r…
Excellent layout-x-style generator with 21 layouts and 22 styles offloaded to per-file references, hard confirmation gate, keyword shortcuts, backup rules and secret stripping; lacks explicit When-Not boundary.
Create, extract, and apply portable visual design systems via visual-style.md files. Use when: (1…
Elegant four-mode design-system skill (create/extract/apply/gallery) with connectors, extractors and gallery references all load-conditioned; schema-first templates and validation step; only minor lack of explicit When-Not.
Builds security-focused full-stack web applications by implementing integrated frontend and backe…
Top-tier full-stack skill: description explicitly differentiates from frontend/backend-only skills, security checklist gate before coding, ten scoped references, and a three-perspective annotated example.
Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining…
Excellent generator with 5-dimension options, blocking preference setup, hard confirmation gate, multi-backend fallback and per-file offloaded references; only missing explicit When-Not triggers.
Analyzes article structure, identifies positions requiring visual aids, generates illustrations w…
Well-gated illustration pipeline with Type x Style x Palette dimensions, blocking confirmations and reproducible prompt files; a system prompt line urging stylistic workarounds for sensitive figures raises a mild compliance concern.
Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "…
Excellent tool-wrapper skill: four-tool fallback chain, runtime resolution, strict arg validation, atomic temp-file rename, JSON mode, layered EXTEND.md preferences; only minor gaps are missing When-Not and npm-based runtime install.
FAQ
What is a design skill for Claude Code?
A package that teaches your agent to generate visual output — SVG diagrams, infographics, styled images, cover art. It triggers when your request involves visual creation.
Do I need an image-generation API?
Some skills call external image APIs (you bring your own key); others draw everything in code — SVG, HTML, Canvas — and need nothing extra. Each detail page states which.
Are the outputs free to use?
Check each skill's license on its repo page. Most are MIT; generated content is yours.
Every skill here was scored on the same six-dimension rubric — the full scorecard with written rationale is on each skill's page. Browse all Design & Creative skills.