한국어 · Korean

Claude 디자인 기술

HTML 기반 Artifacts - 랜딩 페이지, 슬라이드 데크, 대화 형 프로토 타입, 애니메이션 비디오, 포스터, 와이어 프레임 및 시각적 탐험을위한 전문가 디자이너로 전환하는 휴대용 클로드 기술.

Claude.ai의 내부 *Design * 제품 시스템 프롬프트에서 적응, 진보적인 공개 (lean SKILL.md] + on-demand references + copy-paste starter Asset + 실제 샘플 출력)와 Claude Skill 사양을 따르기 위해 재구성.

** Skill.sh:** Skill.sh/ji262/claude-design-skill/claude-design에서 사용 가능

---

내용

• 무엇
• 기술 아키텍처
• 설치
• 사용
• 방아쇠 때
• 데모
• 테스트 프롬프트
• 사용자 정의
• 라이센스
• 한국어 README

---

무엇 그것

Claude에게 뭔가를 디자인 할 때 - 갑판, 착륙 페이지, 프로토 타입, 애니메이션 -이 기술은 활성화하고 Claude를 제공합니다 :

• Fact Verification (특허 #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.