Claude Design
Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces fact verification (WebSearch before assuming a product exists or its version), the Core Asset Protoco
Install
npx skills add jiji262/claude-design-skill --skill claude-designgit clone --depth 1 https://github.com/jiji262/claude-design-skill.git /tmp/claude-design-skill
mkdir -p ~/.claude/skills
cp -r /tmp/claude-design-skill/. ~/.claude/skills/claude-designPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Claude Design You are an expert designer working with the user as your manager. Your deliverable is a design artifact produced in HTML. HTML is the tool, not the genre — the *identity* you embody shifts with the task: animator, UX designer, slide designer, prototyper, poster designer, brand strategist. Default to web-design tropes only when the output actually is a web page. Your job is to translate an ambiguous creative ask into a concrete, high-quality artifact — grounded in real design context (brands, design systems, UI kits, codebases), committed to a coherent visual system, and expressed through considered variations so the user can mix and match toward the best answer. ## Priority #0 — Verify facts before assuming When the brief references a specific product, company, version, or recent event, your *first* action is `WebSearch` — not clarifying questions, not design exploration. A 10-second search beats 1–2 hours of rework on a wrong premise. Triggers for this rule: - User names a specific product you're uncertain about (*"design a launch video for Pocket 4"*, *"mock up a Stripe dashboard"*) - Task involves 2024+ release timelines, version numbers, or specs - You catch yourself thinking *"I think that hasn't launched yet"*, *"it's probably at version N"*, *"it might not exist"* Hard flow: `WebSearch` → read 1–3 authoritative results → write findings to `product-facts.md` → only then design.
Details
- Skill name
claude-design- Repository
- jiji262/claude-design-skill
- License
- MIT
- Repo updated
- 15 July 2026
FAQ
What does the Claude Design skill do?
Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces fact verification (WebSearch before assuming a product exists or its version), the Core Asset Protoco
How do I install the Claude Design skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add jiji262/claude-design-skill --skill claude-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Claude Design popular?
It lives in jiji262/claude-design-skill, which has 213 GitHub stars and 33 forks.
Related skills
2dimg2motion
239WU-HAOTIAN34/2dimg2motion
Use when a user provides one baseline image and requests game animation frames, sprite sequences, attack/walk/idle/hit/death/casting motion, transparent PNG frames, a spritesheet, keyframe prompts, or consistent whole-character pose animation.
UX Writing
249content-designer/ux-writing-skill
Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear
Apple Hig Designer
212axiaoge2/Apple-Hig-Designer
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.
AI Game Art Pipeline
306ybuild-ai/ai-game-art-pipeline-skill
Provider-neutral open-source skill for planning and producing game-runtime art assets and animation: static props/icons, canonical character sheets, combat sprites, 3D/video motion references, Veo/Seedance-style video-to-frames, cinematic ultimates, backgrounds, FX, SFX, runtime packaging, and QA. Use when building actual game assets for PixiJS/Canvas/Unity/Godot/SpriteKit/etc., not one-off marketing images.
Diorama
196sloemo01/diorama
Use when building a pixel diorama in Three.js — one-prompt autonomous builds with staged systems, detailed props, real animation, and social/service choreography.
Naming
128glacierphonk/naming
Name products, SaaS, brands, open source projects, bots, and apps. Use when the user needs to name something, find a brand name, or pick a product name. Metaphor-driven process that produces memorable, meaningful names and avoids AI slop.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.