Английский язык · 中

Клод Дизайн Навык

Портативный навык Клода, который превращает Клода в экспертного дизайнера для артефактов на основе HTML — целевых страниц, слайд-палуб, интерактивных прототипов, анимированных видео, плакатов, каркасов и визуальных исследований.

Адаптировано из внутренней системы продуктов Claude.ai Design, реструктурировано в соответствии со спецификацией Claude Skill с прогрессивным раскрытием (бережливое SKILL.md + ссылки по требованию + стартовые активы копирования-вставки + реальные результаты выборки).

** Доступно на skills.sh:** skills.sh/jiji262/claude-design-kill/claude-design

Содержимое

• Что он делает?

• Архитектура навыков

• Установка

• Использование

• Когда это срабатывает

• Демо

• Тестовые подсказки

• Настройка

• Лицензия

• 中 README

Что он делает

Когда вы просите Клода что-то спроектировать — колоду, целевую страницу, прототип, анимацию — этот навык активизирует и дает Клоду:

Проверка фактов (приоритет #0) Прежде чем принимать что-либо о названном продукте, навык навязывает WebSearch. 10-секундный поиск превосходит 1-2 часа переделки в неправильных помещениях. **Протокол основных активов.

🌐 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 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

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

---

Contents

• 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 — design canvas, slide deck, interactive prototype, timeline animation, wireframe. Each with a skeleton and gotchas.
• Variation strategy — when to ship N side-by-side options vs. a single prototype with Tweaks (live in-design controls for colors, typography, variants).
• Anti-slop discipline — explicit rules against aggressive gradients, emoji bullets, rounded-cards-with-left-border, CSS-silhouettes-as-product-shots, gradient-orbs-representing-AI, and other machine-generated tells.
• React + Babel traps that silently break inline-JSX prototypes (style-object scope collisions, Babel scope isolation, integrity hashes).
• Starter templates you can copy-paste: a self-scaling deck stage, a design canvas, a prototype shell, a Tweaks-enabled page, a timeline animation engine, and device frames for iOS / Android / macOS / browser.
• 3 real demo artifacts you can open right now to see what the skill produces.