日本語 English

クロードデザインスキル

ClaudeをHTMLベースのアーティファクトのエキスパートデザイナーに変えるポータブルクロードスキル - ランディングページ、スライドデッキ、インタラクティブなプロトタイプ、アニメーションビデオ、ポスター、ワイヤーフレーム、ビジュアル探査。

Claude.ai の内部 Design 製品システム プロンプトから適応し、Claude スキルの仕様に従って、プログレッシブ ディスク (lean [SKILL.md)] + オンデマンド リファレンス + コピーペースト スターター アセット + 実際のサンプル アウトプット。

スキル.sh: スキル.sh/jiji262/claude-design-skill/claude-design

お問い合わせ

コンテンツ

• それは何をするか
• スキルアーキテクチャ
• インストール
• 使用法
• トリガーすると
• デモ
• テストプロンプト
• カスタマイズ
• ライセンス
• ニュース

お問い合わせ

それが何をするか

デッキ、ランディングページ、プロトタイプ、アニメーション - 何かを設計するためにClaudeを依頼すると、このスキルはClaudeを活性化し、Claudeを与えます:

• 事実確認(優先度#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.