jiji262

Claude Design Skill — AI skill for Claude Code

AI community

A portable Claude Skill that turns Claude into an expert designer for HTML artifacts — decks, landing pages, prototypes, animations, posters.

How to install Claude Design Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open jiji262/claude-design-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Design Skill does

A portable Claude Skill that turns Claude into an expert designer for HTML artifacts — decks, landing pages, prototypes, animations, posters. Adapted from Claude.ai's internal Design system prompt.

Alternatives in AI

Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Guizang Ppt Skill — AI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts 24.9k ★
Qwen Code — A command-line AI workflow tool adapted from Gemini CLI, optimized for Qwen3-Coder models with enhanced parser 20.8k ★

README

🌐 English · 中文

Claude Design Skill

A portable Claude skill that turns Claude into an expert designer for HTML-based artifacts — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations.

Adapted from Claude.ai's internal *Design* product system prompt, restructured to follow the [Claude Skill specification](https://docs.claude.com/en/docs/claude-code/skills) with progressive disclosure (lean `SKILL.md` + on-demand references + copy-paste starter assets + real sample outputs).

**Available on skills.sh:** [skills.sh/jiji262/claude-design-skill/claude-design](https://skills.sh/jiji262/claude-design-skill/claude-design)

npx skills add jiji262/claude-design-skill -g

What it does
Skill architecture
Installation
Usage
When it triggers
Demos
Test prompts
Customization
License
中文 README

What it does

When you ask Claude to design something — a deck, a landing page, a prototype, an animation — this skill activates and gives Claude:

Fact Verification (Priority #0). Before assuming anything about a named product, the skill enforces a WebSearch. A 10-second search beats 1–2 hours of rework on wrong premises.
The Core Asset Protocol. For branded work, a 5-step hard flow for gathering assets — with logo / product shots / UI screenshots treated as first-class citizens, not colors-and-fonts-only. Writes findings to brand-spec.md.
Design Direction Advisor. When the brief is too vague ("design me something nice"), the skill switches into advisor mode, proposes 3 differentiated directions from a library of 10 design philosophies spanning 5 schools, and waits for the user to pick before committing.
Output-format playbooks — de