클로드 밤티 화면에서 탈출하는 법 4가지
하루 6시간 만에AI 기초부터 나만의
서비스까지 완성
Quick Start
밤티 화면은 클로드가 못해서 나오는 게 아니라, 따를 기준 없이 매번 새로 그려서 나옵니다. 기준을 파일로 주고, 그 파일대로 화면을 뽑는 순서입니다.
- STEP 1에서 마음에 드는 사이트를 규칙 파일로 추출합니다.
- STEP 2에서 브랜드 DESIGN.md 를 프로젝트에 넣습니다.
- STEP 3에서 파일을 지목해 요청합니다.
- STEP 4에서 클로드 코드 안에서 화면을 뽑습니다.
- STEP 5에서 Claude Design 으로 다듬고 코드로 넘깁니다.
STEP 1 · 2분designlang 으로 레퍼런스를 규칙으로 바꾼다
designlang 은 헤드리스 브라우저로 실제 페이지를 열어 DOM 에서 색·글꼴·간격·그림자·모션을 읽어 내는 CLI 입니다. Node 20 이상이 필요합니다. 빈 작업 폴더를 하나 만들고 그 안에서 실행합니다.
npx designlang https://stripe.com
성공하면 ✔ Extraction complete! 뒤에 파일 목록이 출력되고 design-extract-output/ 폴더가 생깁니다. 이 중 *-DESIGN.md(에이전트가 읽는 디자인 규칙)와 *-AGENT.md(붙여 넣는 시스템 프롬프트)를 씁니다.
자세한 순서는 designlang 추출 가이드에 있습니다.
STEP 2 · 1분브랜드 DESIGN.md 를 프로젝트에 넣는다
추출할 레퍼런스가 없다면 이미 만들어진 것을 고릅니다. VoltAgent 의 awesome-design-md 저장소에는 Claude·Stripe·Linear·Notion 등 브랜드별 DESIGN.md 가 70개 넘게 모여 있고, 각 파일에 Visual Theme, Color Palette & Roles, Typography Rules, Component Stylings, Do's and Don'ts 가 들어 있습니다.
npx getdesign@latest add claude
성공하면 폴더에 DESIGN.md 가 생깁니다. 파일 자체를 점검하려면 구글의 design.md lint 를 씁니다.
npx @google/design.md lint DESIGN.md
자세한 순서는 DESIGN.md 적용 가이드에 있습니다.
STEP 3 · 2분형용사 대신 파일을 지목해서 요청한다
"예쁘게"라고 말하면 매번 다른 게 나옵니다. 먼저 읽게 하고, 파일에 없는 값은 만들지 말라고 적고, 하지 말 것을 같이 씁니다.
프로젝트 루트의 DESIGN.md 를 먼저 끝까지 읽어줘. 색·글꼴·간격·버튼 모양은 이 파일에 적힌 값만 쓰고, Do's and Don'ts 절의 금지 항목은 지켜줘. 보라색 그라데이션과 똑같은 카드 세 개 배열은 쓰지 마. 만들 화면: 카페 원두 구독 랜딩 페이지. 첫 화면에 제목 한 줄, 원두 사진 자리, 구독 버튼 하나.
성공하면 보라 그라데이션 대신 파일에 적힌 색과 글꼴로 만든 화면이 나옵니다.
STEP 4 · 2분클로드 코드 안에서 시안·슬라이드를 뽑는다
huashu-design 은 Claude Code 같은 에이전트 안에서 HTML 로 시안·슬라이드·애니메이션을 만드는 스킬입니다. 새 디자인이면 반드시 서로 다른 방향 세 가지 초안을 먼저 보여 주고, 고른 뒤에 본작업을 합니다. MIT 라이선스입니다.
npx skills add alchaincyf/huashu-design
신규 고객 대상 서비스 소개 발표 슬라이드를 10장으로 만들어줘. 먼저 서로 다른 스타일 방향 세 가지를 초안으로 보여주고, 각 방향의 분위기와 어울리는 상황을 한 줄씩 적어줘. 내가 고른 방향으로만 끝까지 만들어줘.
자세한 순서는 huashu-design 시작 가이드에 있습니다.
STEP 5 · 5분Claude Design 으로 다듬고 코드로 넘긴다
Claude Design 은 앤트로픽 Anthropic Labs 가 낸 디자인 작업판입니다. Pro·Max·Team·Enterprise 요금제에서 쓸 수 있고 Free 에서는 쓸 수 없습니다. 들어가는 길은 대화 안, Artifacts 탭, 주소 claude.ai/design 세 가지입니다.
코드베이스나 디자인 파일을 지정하면 색·폰트·컴포넌트를 팀 디자인 시스템으로 정리해 이후 프로젝트에 자동으로 적용합니다. 고칠 때는 전체를 다시 요청하지 않고 인라인 댓글이나 조절 노브로 필요한 곳만 바꿉니다.
이 버튼만 지금보다 크게, 위쪽 여백은 두 배로.
완성한 디자인은 handoff bundle 로 Claude Code 에 넘기거나 .zip·PDF·PPTX·standalone HTML 로 내보냅니다.
자세한 순서는 Claude Design 사용법에 있습니다.
알아 둘 한계
- 이 글은 2026년 9월 22~23일 기준입니다. 네 도구 모두 공개 문서와 실행 결과를 대조해 썼고, 메뉴 이름과 기능은 바뀔 수 있습니다.
- 추출한 값은 공개된 CSS 값입니다. 로고·이미지·문구·상표는 원본 사이트의 것이므로 그대로 쓰지 않습니다.
- awesome-design-md 의 파일들은 해당 브랜드의 공식 디자인 시스템이 아닙니다.
- Claude Design 은 beta 이고 Free 요금제에서는 쓸 수 없습니다.
FAQ
네 개를 다 써야 하나요? 아닙니다. 레퍼런스가 있으면 STEP 1, 없으면 STEP 2 하나로도 밤티는 사라집니다.
한 프로젝트에 DESIGN.md 를 여러 개 둬도 되나요? 한 파일을 기준으로 두는 편이 일관됩니다. 바꾸고 싶은 값은 파일 안에서 직접 고칩니다.
Claude Code 없이도 되나요? Claude Design 은 PDF·PPTX·HTML 로 내보내거나 조직 내부 URL 로 공유할 수 있습니다.
공식 참고 자료
- designlang — Manavarya09/design-extract
- VoltAgent/awesome-design-md
- google-labs-code/design.md
- alchaincyf/huashu-design
- Anthropic 공식 발표 — Claude Design