SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsclaude-design-brief

claude-design-brief

Design & creation

View repository

Updated 10-15 21:02

About this skill

claude-design-brief — Claude Design 6-element brief builder

Overview

The point where Claude Design users most often fail is throwing in a prompt with only a vague tone written. This skill automatically fills in the 6-element template organized in docs-site best practices, a prompt you can paste directly into the claude.ai/design chatand creates it.

Trigger keywords

Claude Design brief, Claude design prompt, design brief 6 elements, claude.ai/design prompt, design request organization, design mockup prompt, design brief

6-element template

[ROLE]      [구체적 직업·연차·소속 — 선택]
[GOAL]      [한 문장 목표 — 사용자가 무엇을 X초 안에 할 수 있게]
[AUDIENCE]  [구체적 사용자 — 직책·산업·맥락]
[PAGES]     [필요한 페이지·섹션 목록 + 각 목적]
[TONE]      [형용사 3-5개]
[REFERENCE] [URL·스크린샷]
[CONSTRAINTS] [디바이스·시스템·제외 항목]

[AI SLOP 회피]
진부한 폰트(Inter·Roboto·Arial)·보라 그라데이션·천편일률 3-카드 그리드 금지.
우리 브랜드의 고유 비주얼로.

Workflow

Step 1 — Receive a one-line natural language input

The user enters a line like the following.

예시 입력:
- "마케팅 자동화 SaaS 가격 페이지"
- "10슬라이드 시드 피치덱"
- "헬스케어 웨어러블 랜딩"
- "어드민 대시보드 - KPI 5개·차트 2개"
- "결제 플로우 3페이지 와이어프레임"

Step 2 — Fill in missing elements

Check the elements extracted from the input, and items missing among the 6 elementsare filled in one by one via AskUserQuestion.

  • Up to 4 questions per round
  • Include a "skipped (filled by guess)" option for every item
  • Items requiring a free-form response such as "Reference URL" are entered directly by the user
  • Elements the user has already specified are not asked again

Main question patterns

ROLE suggestions:

어떤 디자인 관점이 가장 중요한가요?
- 정보 구조·내비게이션 (IA 시니어 아키텍트)
- 사용성·휴리스틱 (Baymard Institute 컨설턴트)
- 카피·마이크로카피 (Dropbox UX 라이터)
- 온보딩·활성화 (Intercom 프로덕트 디자이너)
- 접근성 (Level Access 컨설턴트)
- 데이터 시각화 (Tableau 디자이너)
- 폼 컨버전 (CXL Institute 옵티마이저)
- 디자인 시스템 (Figma 디자인 시스템 엔지니어)
- 일반 — 역할 부여 없이

TONE suggestions:

다음 중 3-5개를 골라 주세요 (또는 직접 입력):
- 신뢰감 있는 · 데이터 중심 · 미니멀
- 활기찬 · 친근한 · 따뜻한
- 진중한 · 격식 있는 · 전문적
- 대범한 · 실험적 · 하이테크
- 부드러운 · 차분한 · 자연 친화적

REFERENCE guidance:

참고할 만한 사이트가 있나요? 다음을 적어 주세요:
- 자사 잘 만든 페이지 URL (가장 강한 시그널)
- 경쟁사 또는 동경하는 사이트 URL
- Dribbble · Behance 컬렉션
- 없으면 "건너뜀" 선택 — 추천 사이트를 제안해 드립니다

Step 3 — Fill in by guessing

Items marked "skipped" are filled with reasonable guesses.

Item Guess rule
ROLE Automatically selected to match the GOAL's domain (e.g.: pricing page → "12-year senior UX architect")
AUDIENCE Use the GOAL's industry context instead of "general users" (e.g.: "B2B SaaS decision-makers")
PAGES Only the pages specified by the GOAL (1-3)
TONE Minimal·trustworthy·data-driven (safe default)
REFERENCE linear.app · stripe.com · existing pages on your own domain
CONSTRAINTS Default to "desktop-first, responsive included"

Step 4 — Prompt synthesis

Combine the 6 elements to generate a copy-paste prompt.

다음 프롬프트를 claude.ai/design 채팅에 그대로 복사·붙여넣기 하세요:

---
[ROLE]      12년차 시니어 UX 아키텍트 IDEO 출신.

[GOAL]      B2B 마케팅 자동화 SaaS의 가격 페이지에서 3티어 비교를
            10초 안에 의사결정 가능하게.

[AUDIENCE]  20-100명 스타트업의 그로스 리드·마케팅 매니저.

[PAGES]     Hero(가치 제안) · 3티어 가격 카드 · 비교표 · FAQ ·
            Sticky CTA.

[TONE]      신뢰감 있는, 데이터 중심, 미니멀, 약간의 활기.

[REFERENCE] linear.app/pricing, stripe.com/pricing 톤 참고.

[CONSTRAINTS] 데스크톱 우선, 기존 React 시스템, 결제 정보 입력 X.

[AI 슬롭 회피] 진부한 폰트(Inter·Roboto·Arial)·보라 그라데이션·
              천편일률 3-카드 그리드 금지. 우리 브랜드 고유 비주얼로.

[OUTPUTS]   1) Hero 시안, 2) 3티어 카드 시안, 3) 비교표,
            4) 의사결정 지원 마이크로카피.
---

내보낼 형식 권장: PPTX(발표용) · PDF(외부 발송) · Claude Code 핸드오프(코드 구현).

Step 5 — Follow-up guidance

다음 단계 추천:
- 디자인 시스템 셋업이 안 됐다면 → moai-design:claude-design-system-prep
- 특정 영역(IA·접근성·온보딩)에 집중 → moai-design:claude-design-prompt-builder
- 결과 카피 검수 → moai-design:claude-design-slop-check
- 핸드오프 번들 분석 → moai-design:claude-design-handoff-reader

Output format

## Claude Design 브리프

### 입력 분석
- GOAL: [감지된 목표]
- 누락 요소: [보완한 항목 목록]

### 완성된 프롬프트 (복붙 가능)

[Prompt body]


### 다음 단계
- [후속 스킬·내보내기 형식 제안]

Usage examples

Example 1 — Pricing page (Pro user, abundant material)

사용자: "B2B 마케팅 자동화 SaaS 가격 페이지. 우리는 14-day trial,
         경쟁사는 30-day."

→ 누락 요소 보완: AUDIENCE만 보완 (나머지는 GOAL에서 추출)
→ AUDIENCE: "20-100명 스타트업의 그로스 리드" (보완)
→ 완성된 프롬프트 출력

Example 2 — Pitch deck (founder, little material)

사용자: "10슬라이드 시드 피치덱"

→ 보완 필요: AUDIENCE · TONE · REFERENCE · CONSTRAINTS
→ AskUserQuestion 1라운드: AUDIENCE·TONE
→ AskUserQuestion 2라운드: REFERENCE·CONSTRAINTS
→ 완성된 프롬프트 출력

Example 3 — Wireframe (PM, with a clear PRD)

사용자: "결제 플로우 3페이지 와이어프레임 - Cart, Address, Payment"

→ 보완 필요: AUDIENCE · TONE
→ ROLE 자동: "Baymard Institute UX 컨설턴트" (결제 영역 권장)
→ 완성된 프롬프트 출력

Notes

Do

  • Fills in all 6 elements at once — so users don't get lost again in Claude Design
  • The AI slop avoidance block is always included
  • ROLE is recommended according to the GOAL area — specific occupations reduce result variance by 30-40% compared to general roles
  • REFERENCE URL은 One real object is better than three spec sheets strong signal

Don't

  • Do not ask again about elements the user has already specified
  • Do not automatically use vague tone words like "pretty" or "nice"
  • Do not force the introduction of design tool names the user does not know (Figma, Sketch, etc.)
  • Do not ask more than 5 questions in one round (AskUserQuestion limit is 4)

Related skills

Skills When to use
moai-design:claude-design-system-prep Prerequisite: when the design system has not yet been set up
moai-design:claude-design-prompt-builder Alternative: when you want to focus on a specific UX area (IA, accessibility, onboarding, etc.)
moai-design:claude-design-slop-check Follow-up: copy review of mockup results
moai-design:claude-design-handoff-reader Follow-up: Claude Code handoff bundle analysis
moai-content:landing-page Alternative: directly build a code-based landing page
moai-marketing:brand-identity Auxiliary: first clarify when brand identity is ambiguous