카드 메타 · slug: design-from-claude-ai · track: design · B안 (웹사이트 없는 학생)

A안(웹사이트 있는 학생) → [A안] 웹사이트 스크린샷 → brand.md (3개 MD를 한 번에 추출)

이 모듈에서 본인 design.md를 만듭니다.

가져갈 것

• 본인 IG 캡처 3~5장. 피드 한 줄 흐름이 드러나는 것으로.
• 또는 핀터레스트 보드, 자료 사진, 인쇄물 사진. 분위기를 보여주는 것이면 무엇이든.
• 모듈 2에서 만든 brand.md.

절차

1. https://claude.ai/design 접속. Claude Pro 플랜 필요.
2. 좌측 chat 패널에 brand.md 내용을 붙여넣기.
3. 이미지 3~5장을 드래그&드롭으로 업로드.
4. 아래 프롬프트를 복사 후 붙여넣기.

첨부한 brand.md와 레퍼런스 이미지 모두 먼저 읽어줘.

이 브랜드의 design.md를 만들어줘.
색·타이포·간격·모서리를 CSS 변수 형식으로 출력해.

조건:
- 색은 배경 2개(밝은·어두운) + 텍스트 1개 + 포인트 1개. 그 이상 만들지 마.
- 폰트는 제목용 1개, 본문용 1개. 두 개를 넘기지 마.
- 간격 단위는 4px 또는 8px 배수만.
- HEX 값으로 끊어. "약간 어두운 회색" 같은 표현 금지.

다음 요소는 절대 쓰지 마:
- 그라디언트 배경
- 둥근 모서리 + 왼쪽 색 보더 카드
- AI가 그린 일러스트
- Inter / Roboto / Arial 폰트
- 의미 없는 장식 아이콘

먼저 내가 빠뜨린 정보가 있는지 5개 이내로 물어봐.
질문이 끝나면 design.md를 출력해.

1. Claude가 다섯 개 이내 질문을 던집니다. 답합니다.
2. design.md 초안이 출력됩니다.
3. 마음에 안 드는 토큰은 자연어로 고칩니다.

--accent를 더 따뜻한 톤으로. 빨강보다 주황 쪽으로 한 단계만.

1. 만족하면 출력된 CSS 블록을 통째로 복사합니다.

잘 쓰는 다섯 원리

Anthropic이 claude.ai/design을 움직이는 시스템 프롬프트에서 강조하는 다섯 가지입니다. 다른 AI 도구에도 그대로 적용됩니다.