🌐 英语 ·中文

克劳德设计技能

这是一项便携式的Claude技能，使他成为HTML文物设计专家——包括着陆页、幻灯片、互动原型、动画视频、海报、线框图和视觉探索。

改编自 Claude.ai 内部的 Design 产品系统提示，重组以遵循 Claude Skill 规范，并实现渐进披露（精简 SKILL.md + 按需参考 + 复制粘贴起始资产 + 真实样本输出）。

可于《skills.sh》获取： skills.sh/jiji262/claude-design-skill/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.