Claude Code와 Refero DESIGN.md로 템플릿 같지 않은 웹사이트 만들기

Refero Styles 디자인 컨텍스트: DESIGN.md 구조, 시각 시스템 선택, CLAUDE.md에 가져오기, 페이지를 만드는 4단계, 흔히 하는 실수.

전체 글 읽기

핵심 요점

Claude Code가 기본 설정 그대로 만드는 웹사이트는 모두 비슷합니다. 어두운 배경, 보라색 그라데이션, 산세리프 글꼴, 기본 shadcn 카드가 들어갑니다. 아래에서는 Apple, Linear, Stripe 또는 ElevenLabs의 완성된 DESIGN.md(라이브러리에 2,000개 이상 시스템이 있습니다)를 가져와 프로젝트에 넣고, Claude가 해당 스타일로 작성하게 하는 방법을 보여줍니다. 완성된 사이트는 더 이상 AI 템플릿처럼 보이지 않습니다.

프로젝트와 모델을 다루는 실용 자료: Ailoot 문서.

Claude Code로 만든 웹사이트는 왜 Tailwind 템플릿처럼 보일까요?

핵심 요점

디자인 시스템이 없으면 Claude Code는 학습 데이터에서 평균적인 인터페이스를 그립니다. 그 학습 데이터는 Tailwind, shadcn/ui, 그리고 서로 똑같은 수천 개의 랜딩 페이지로 가득한 인터넷 전체입니다. 색상, 글꼴, 간격에 대한 명시적인 입력 컨텍스트가 없으면 에이전트는 “모든 템플릿의 산술 평균”을 만들어 냅니다.

설명된 1월의 사례에서는 소규모 사이드 프로젝트인 콜드 세일즈 전화 시스템을 만들고 있었습니다. 빈 저장소에서 Claude Code에 홈 페이지를 만들어 달라고 요청했습니다. 결과는 평범했습니다. 어두운 slate-950 배경, purple-500 포인트 색상, 굵은 산세리프 제목, 그리고 그 아래에 똑같은 그림자가 들어간 카드 세 개였습니다. ChatGPT 첫 출시 버전, Lovable 첫 출시 버전, v0 첫 출시 버전과 같은 레이아웃이었습니다. “modern”, “premium”, “not like everyone else”를 덧붙여 프롬프트를 다섯 번 수정했지만 아무것도 달라지지 않았습니다. 페이지는 여전히 Tailwind UI Templates 모음에서 가져온 것처럼 보였습니다.

즉, Claude가 아름다운 것을 만드는 방법을 “모르는” 것은 아닙니다. 대다수 사람이 무엇을 하는지 알고 그 다수를 재현합니다. 평균에서 벗어난 결과를 얻으려면 에이전트에 구체적인 제약 조건을 제공해야 합니다. 어떤 색을 사용할지, 어떤 글꼴을 쓸지, 간격은 어떻게 할지, 어떤 컴포넌트를 기준으로 삼을지 지정해야 합니다.

여기서 디자인 시스템이 컨텍스트로 쓰입니다. “아름답게 만들어”가 아니라 “이 구체적인 스타일로 만들어. 여기에 그 매개변수가 있어”라고 지시하는 것입니다.

Refero Styles는 실제 제품의 매개변수가 담긴 DESIGN.md 파일이라는 완성된 산출물로 이 차이를 메웁니다.

Refero Styles란 무엇인가요?

핵심 요점

Refero Styles는 실제 웹사이트에서 추출해 DESIGN.md 파일로 패키징한 2,000개 이상의 디자인 시스템 라이브러리입니다. 각 시스템은 하나의 브랜드를 나타냅니다. Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs, Cursor 등이 있습니다. styles.refero.design에서 브랜드를 선택하고, 해당 마크다운 파일을 복사해 Claude Code, Cursor, Codex, v0 또는 Lovable의 컨텍스트로 프로젝트에 추가하면 됩니다.

styles.refero.design의 홈 페이지는 이를 간결하게 설명합니다. “주요 제품 웹사이트에서 추출한 AI 에이전트가 읽을 수 있는 디자인 시스템 2,000개 이상을 찾아보세요.” 카탈로그에는 시각적 표준을 세우는 브랜드들이 포함됩니다. Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo입니다. 이 시스템은 수작업으로 추출되지 않습니다. Refero 팀이 사이트의 실제 CSS와 마크업을 분석해 결과를 구조화된 마크다운으로 패키징하는 스크립트를 실행합니다. styles.refero.design 라이브러리 자체는 무료입니다.

핵심 단어는 “구조화된”입니다. 파일에는 스크린샷이나 “미니멀한 스타일” 같은 설명이 없습니다. 구체적인 16진수 색상, pt 단위의 정확한 글꼴 크기, 간격 단위, 컴포넌트 규칙이 담긴 마크다운입니다. AI 에이전트는 이 파일을 읽고 취향을 말로 설명하려 하지 않고 구체적인 값에 따라 작업합니다.

Refero 팀은 ai-agents 페이지에서 지원 도구로 “Cursor, Claude Code, Codex, v0, and Lovable”을 나열합니다. 즉, DESIGN.md는 주요 AI 개발 에이전트 모두에 적합한 하나의 범용 산출물입니다.

DESIGN.md에는 무엇이 들어 있나요?

핵심 요점

파일 하나에 디자인 시스템의 기본 레이어가 모두 들어갑니다. 16진수 색상 팔레트(다크 및 라이트 모드), 타이포그래피(글꼴, 크기 단계, 굵기, 줄 높이), 간격 규칙(8px 그리드 또는 다른 리듬), 컴포넌트 설명(버튼, 카드, 양식), 모션 규칙(애니메이션, 이징), “브랜드 보이스”(메시지 어조)입니다. 파일은 마크다운 100~400줄 분량입니다.

Refero 팀은 design-md-template 페이지에서 파일 구조를 다음과 같이 설명합니다.

제품의 어조와 디자인 원칙부터 시작한 다음 색상, 타이포그래피, 간격, 컴포넌트, 레이아웃, 모션, 접근성, 사용하지 말아야 할 항목에 관한 규칙을 정의합니다.

— Refero Styles 팀, https://styles.refero.design/design-md/design-md-template

따라서 파일 구조는 보통 다음과 같습니다.

섹션	내용	에이전트에 필요한 이유
제품 어조	인터페이스가 어떤 느낌을 주는지 설명하는 2–3문장	마이크로카피의 방향을 정함
디자인 원칙	“가독성을 희생하지 않는 미니멀리즘” 같은 규칙 4–6개	똑같이 괜찮은 선택지 중 하나를 고를 때 에이전트를 안내함
색상	이름이 붙은 16진수 팔레트(primary, secondary, accent, surface, text) + 다크/라이트 모드	에이전트가 색을 지어내지 않고 정확한 코드를 사용함
타이포그래피	글꼴(이름과 대체 글꼴 스택), 크기 단계(10–12단계), 굵기(regular, medium, bold), 줄 높이	사이트 전체가 하나의 Inter 16px 스타일로 변하는 것을 방지함
간격	기본 단위(4px, 8px, 16px)와 배수 단계	패딩과 여백이 제각각 달라지는 것을 막음
컴포넌트	버튼, 카드, 양식, 내비게이션의 크기·상태·변형 규칙	에이전트가 새 변형을 지어내지 않도록 함
레이아웃	그리드, 브레이크포인트, 컨테이너 최대 너비	사이트의 모든 페이지가 하나의 그리드 기반으로 만들어짐
모션	지속 시간, 이징, 허용된 전환 효과	애니메이션이 절제된 느낌을 유지하며 Bootstrap-2010처럼 되지 않음
보이스와 어조	버튼, 제목, 오류 메시지의 문구 예시	사이트 문구가 브랜드의 목소리를 담음
사용하지 말 것	금지 항목 목록(“`box-shadow: 0 10px 30px`을 사용하지 말 것”)	에이전트가 템플릿식 해결책으로 돌아가지 않도록 함

제작자들은 AI 디자인 문제의 80%를 해결하는 원칙도 강조합니다.

취향을 나타내는 형용사보다 구체적인 컨텍스트가 더 효과적입니다.

— Refero Styles 팀, https://styles.refero.design/ai-agents/design-md-examples

즉, 16진수 코드 #5E6AD2는 “Linear 같은 느낌”보다 더 효과적입니다. 정확한 값인 font-size: 13px / line-height: 18px는 “아담한 텍스트”보다 더 효과적입니다. 구체적인 값이 해석보다 낫습니다.

저장소의 DESIGN.md는 팀을 위한 이미지가 아닙니다. 프로젝트의 영구적인 컨텍스트를 구성하는 요소입니다. AI가 모든 요청에서 읽는 구조화된 지식입니다.

4단계로 Linear 스타일의 웹사이트 만들기

핵심 요점

작업 흐름은 간단합니다. Claude Code를 설치하고, styles.refero.design을 열고, 브랜드(예: Linear)를 선택하고, DESIGN.md를 docs/DESIGN.md 또는 .claude/DESIGN.md에 복사하고, CLAUDE.md에 이 파일을 언급하는 한 줄을 추가한 다음 Claude에 페이지를 만들어 달라고 요청합니다. 실제로는 빈 프로젝트에서 작동하는 홈 페이지까지 30분이면 됩니다.

이 네 단계는 새로운 웹사이트를 시작하는 절차를 구성합니다. 일반적인 “네 단계”가 아니라 각 단계마다 하나의 작업이 있는 구체적인 순서입니다.

Claude Code 설치
기본 설치 프로그램을 이용하면 한 줄 명령으로 설치할 수 있습니다. curl -fsSL https://claude.ai/install.sh | bash (공식 문서에서 권장하는 방법)입니다. macOS에서는 brew install --cask claude-code, Windows에서는 winget install Anthropic.ClaudeCode를 사용할 수 있습니다. 이미 설치되어 있다면 버전을 확인하세요. claude --version (2.1.178 이상이 필요합니다. 이 버전에서는 Tool(param:value) 권한과 자동 모드에서 위험한 git 명령을 차단하는 기능이 도입되었습니다.) 계정에 로그인하려면 claude를 실행해 설정 마법사를 시작합니다. Claude Code는 Pro 구독에 포함됩니다(연간 결제 시 월 $17, 월별 결제 시 월 $20).
Refero Styles를 열고 브랜드 선택
https://styles.refero.design에 접속해 카탈로그를 여세요. 가장 중요한 선택 기준은 “마음에 드는지”가 아니라 제품과 얼마나 잘 맞는지입니다. SaaS 대시보드를 만들고 있나요? Linear, Vercel, Notion을 살펴보세요. 핀테크 제품을 만들고 있나요? Stripe, Mercury, Column을 살펴보세요. 회원을 위한 제품을 만들고 있나요? Duolingo를 살펴보세요. 브랜드 카드를 열고 “Copy DESIGN.md”를 클릭하세요.
컨텍스트로 사용할 DESIGN.md를 프로젝트에 넣기
프로젝트 루트에 docs/DESIGN.md 파일을 만들고 복사한 내용을 붙여 넣으세요. 그런 다음 CLAUDE.md를 열고 한 줄을 추가합니다. @docs/DESIGN.md. 이는 가져오기 지시문으로, Claude Code가 세션을 시작할 때 내용을 컨텍스트에 불러옵니다. CLAUDE.md의 가져오기에 관한 자세한 내용은 Claude Code, Codex, Cursor에 사용할 하나의 지침 파일 가이드를 참조하세요.
구체적인 페이지를 요청하기
“아름답게 만들어”라고 하지 말고 구체적으로 요청하세요. “컨텍스트에 있는 DESIGN.md를 사용해 SaaS 작업 관리 제품의 홈 페이지를 만들어. 구조: 제목과 부제목이 있는 히어로 섹션, CTA 버튼 2개(기본 및 보조), 그 아래에 아이콘이 포함된 기능 3개 블록, 마지막으로 추천사 블록. DESIGN.md의 색상과 타이포그래피를 정확히 사용하고, 다른 값을 지어내지 마.”

네 번째 단계가 끝나면 Claude가 페이지를 만듭니다. 설명된 경험에서는 홈 페이지 하나를 만드는 데 평균 8–12분이 걸리며, 선택한 브랜드의 스타일과 실제로 비슷하게 나옵니다. 픽셀 단위까지 똑같은 복사본은 아니지만 같은 글꼴, 같은 팔레트, 같은 간격 리듬, 버튼의 세부적인 선택까지 갖춰 알아볼 수 있는 미적 특징이 생깁니다.

Refero 제작자들은 ai-agents/design-resources 페이지에서 같은 원칙을 세 단계로 조금 더 간략하게 설명합니다.

작업을 선택하고 관련 리소스를 연 다음 에이전트에 컨텍스트를 제공하세요. 에이전트의 컨텍스트에 DESIGN.md를 넣고, 제품을 설명하고, 구체적인 화면을 요청합니다.

— Refero Styles 팀, https://styles.refero.design/ai-agents/design-resources

이 4단계 절차는 같은 논리를 따르면서 Claude Code 설치와 CLAUDE.md에 파일을 가져오는 단계를 명시적으로 추가합니다.

제품에는 어떤 스타일을 선택해야 할까요?

핵심 요점

브랜드가 아니라 밀도와 어조를 기준으로 선택하세요. 팀용 SaaS 도구(밀도 높은 UI, 많은 데이터)라면 Linear 또는 Vercel. 금융 제품(신뢰, 정확성)이라면 Stripe, Mercury, Column. 소비자 제품(따뜻함, 감성)이라면 Duolingo, 팀용 Notion, Airbnb. AI/개발자 도구(미니멀리즘, 다크 테마)라면 ElevenLabs, xAI, Modal. 회원을 위한 제품(접근성, 가독성)이라면 Duolingo. 확신이 없다면 여러 용도에 두루 쓰기 안전한 Linear를 선택하세요.

Refero 제작자들은 가이드의 첫 단계에서 이 조언을 합니다. 브랜드 이름뿐 아니라 밀도, 어조, 대상을 고려해 참고할 스타일을 선택하라는 것입니다.

Apple에서 가져온 색, 타이포그래피, 계층, 절제된 움직임은 SaaS 대시보드에 적합할 수 있지만 특정 마케팅 페이지의 넓은 여백은 아닐 수 있습니다. 브랜드 이름보다 구체적인 참고 화면을 보세요. 회계 대시보드에는 숫자와 조작 요소를 읽기 쉽게 유지하며 작은 행 높이, 간격, 정보 밀도를 명시하세요. 넓은 발표용 배치를 그대로 복사하지 마세요.

제품 유형에 따른 간단한 선택 가이드입니다.

제품 유형	어울리는 Refero 스타일	공통점
팀용 SaaS 대시보드	Linear, Vercel, Notion, PostHog; 조밀한 배치에 맞춘 Apple 기반 토큰	읽기 쉬운 높은 밀도, 명확한 계층, 간결한 타이포그래피
금융 제품	Stripe, Mercury, Column	신뢰감을 주는 팔레트, 명확한 타이포그래피, 숫자용 고정폭 글꼴
AI/개발자 도구	ElevenLabs, xAI, Modal, Anthropic	다크 테마, 절제된 포인트 색상, 한 가지 밝은 색을 사용하는 단색 구성
소비자 제품	Duolingo, Airbnb, Notion	따뜻한 팔레트, 표현력 있는 일러스트, 친근한 목소리
마케팅 사이트	Linear, Vercel, Stripe(홈 페이지)	큰 제목, 명확한 계층 구조, 차분한 배경
미니멀리스트 포트폴리오	Apple, Mercury, Modal	넓은 여백, 산세리프, 절제된 포인트 색상

그래도 확신이 없다면 Linear를 선택하세요. 가장 다용도로 쓸 수 있는 기반을 제공합니다. 중립적인 팔레트, 읽기 쉬운 타이포그래피(Inter / Söhne), 절제된 간격이 특징입니다. Linear를 기반으로 한 웹사이트는 제품 유형 10개 중 9개에서 전문적으로 보일 것입니다.

AI 에이전트를 위해 DESIGN.md를 프로젝트의 영구적인 컨텍스트에 넣는 이유는 무엇인가요?

핵심 요점

DESIGN.md는 한 번만 쓰고 마는 산출물이 아닙니다. CLAUDE.md와 business/ 폴더처럼 프로젝트의 영구적인 컨텍스트에 속합니다. 파일이 저장소에 있으면 모든 Claude 세션, 모든 팀원, 그리고 새로운 AI 에이전트(Codex, Cursor, Gemini CLI)가 동일한 시각적 기준을 이용할 수 있습니다. 지식을 한 번 구조화하면 계속 사용할 수 있습니다.

설명된 실무에서는 AI 에이전트로 관리되는 모든 프로젝트에서 DESIGN.md를 CLAUDE.md 옆에 저장합니다. 이 파일을 “한 작업에만 쓰는 임시 자료”로 간주하지 않습니다. 모든 미래의 세션이 참조하는 영구적인 기준입니다. 한 달 뒤 Claude에 프로젝트의 새 페이지를 추가해 달라고 요청하면 같은 DESIGN.md를 열고 같은 스타일로 페이지를 만듭니다. 6개월 뒤 다른 팀원에게 프로젝트를 넘겨도 DESIGN.md가 저장소에 있으므로 그 팀원도 Claude를 실행해 일관된 결과를 얻을 수 있습니다.

디자인에서 이 원칙은 이렇게 작동합니다. 팔레트, 타이포그래피, 간격 리듬에 관한 결정을 한 번 내립니다. 그다음부터 모든 AI 에이전트는 그 결정을 주어진 기준으로 삼습니다.

즉, 디자인은 AI가 읽을 수 없는 Figma 파일이 아니라 코드(마크다운은 코드입니다)로 존재합니다. 디자인이 저장소 안의 파일이면 Claude Code도 읽고, Codex도 읽으며, 미래의 어떤 도구도 읽을 수 있습니다. 디자인이 Figma에 있으면 별도의 영역에 놓여 매 세션마다 수동으로 옮겨야 합니다.

설명된 사이드 프로젝트에서는 다음 구조를 사용했습니다.

project/
├── CLAUDE.md            (@docs/DESIGN.md를 가져옴)
├── docs/
│   ├── DESIGN.md        (시각적 기준, Refero에서 복사)
│   ├── ARCHITECTURE.md  (프로젝트 구조)
│   └── BRAND.md         (말투, 어휘)
└── ...

이 세 파일은 프로젝트의 영구적인 컨텍스트를 구성하는 한 가지 방법입니다. DESIGN.md는 시각적 요소, ARCHITECTURE.md는 구조, BRAND.md는 목소리를 담당합니다. 저장소에 접근할 수 있는 모든 AI 에이전트는 이 세 파일을 컨텍스트로 받습니다.

Refero MCP와 refero_skill은 무엇인가요?

핵심 요점

Refero MCP는 api.refero.design/mcp에 있는 서버로, Claude Code가 채팅에서 실제 앱의 화면 150,000개 이상과 사용자 흐름 6,000개 이상에 바로 접근하게 해줍니다. Refero_skill은 Claude Code용 공식 skill(npx skills add)로, MCP를 감싸고 코드 작성 전에 “디자인 리서치”를 필수 첫 단계로 만듭니다.

Refero Styles는 기본 계층입니다(DESIGN.md 파일). 다음 단계는 AI 에이전트가 라이브러리에 “기본적으로” 접근할 수 있게 해주는 통합 기능입니다.

Refero MCP(공식). Claude Code가 bearer token을 사용해 연결하는 https://api.refero.design/mcp 서버 API입니다. 그러면 에이전트가 실제 제품의 화면 150,000개 이상과 사용자 흐름 6,000개 이상에 접근할 수 있습니다. skill을 사용해 설치할 수 있습니다.

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

설치한 뒤 Claude는 매 세션을 시작할 때 “디자인 리서치”를 필수 첫 단계로 수행합니다. 작업에 어떤 시각적 선택이 적합한지 살펴보고, 필요하면 선택한 참고 스타일과 연결된 방향을 세 가지 제안합니다. 2026년 6월 23일 기준, refero_skill 저장소에는 커밋 67개와 별 135개가 있습니다. 활발하게 개발 중인 신제품입니다.

설명된 실무에서는 간단한 방법을 사용합니다. 사이트를 직접 열고 DESIGN.md를 복사해 파일에 넣습니다. 디자인 시스템 작업이 일상화될 때는 MCP가 유용합니다. 예를 들어 여러 고객 프로젝트를 관리하며 매일 시각적 기준을 바꾸는 경우입니다. Claude Code에 MCP 서버를 연결하는 방법은 NotebookLM과 MCP 가이드를 참조하세요.

어떤 4가지 실수가 작업 흐름을 망칠까요?

핵심 요점

첫째, DESIGN.md를 첨부하지 않고 “modern하게 만들어”라는 프롬프트를 사용하면 에이전트는 학습 데이터의 평균으로 돌아갑니다. 둘째, DESIGN.md를 저장소에 넣지 않고 채팅 메시지로 붙여 넣으면 세션 간 컨텍스트가 유지되지 않습니다. 셋째, 구체적 화면과 밀도보다 브랜드만 보고 고르면 넓은 마케팅 배치를 회계 대시보드에 그대로 복사하게 됩니다. 넷째, 프롬프트에서 DESIGN.md를 명시적으로 언급하지 않으면 파일이 컨텍스트에 있어도 에이전트가 무시할 수 있습니다.

디자인 컨텍스트를 사용한 경험에서 이 네 가지 실수가 반복해서 나타납니다. 각각은 사소해 보이지만 결과를 다시 일반적인 Tailwind 템플릿으로 되돌립니다.

실수 1. “modern하게 만들어”라는 프롬프트. 가장 흔한 실수입니다. 사람들은 Claude Code를 열고 “SaaS 웹사이트를 만들어 줘. 현대적인 스타일에 프리미엄 느낌으로”라고 씁니다. 그러면 어두운 배경에 보라색 포인트가 적용됩니다. 학습 데이터에서 “modern”이라는 단어는 동일한 템플릿으로 만든 2022–2024년의 랜딩 페이지들과 연관되어 있습니다. DESIGN.md의 정확한 매개변수가 없으면 “modern”은 “평균적”이라는 뜻이 됩니다.

실수 2. DESIGN.md를 채팅 메시지로 붙여 넣기. 어떤 사람들은 DESIGN.md를 Claude Code 채팅 창에 복사하고 “여기 스타일이 있어. 이걸 사용해”라고 말합니다. 한 번은 작동하지만 세션이 끝나면 그뿐입니다. 새 세션을 열거나 다른 작업으로 전환하면(/clear) 컨텍스트가 사라집니다. 스타일을 유지하려면 파일을 저장소에 넣고 CLAUDE.md에서 가져와야 합니다. CLAUDE.md가 영구적인 컨텍스트의 중심인 이유는 Claude 메모리 가이드를 참조하세요.

실수 3. “마음에 든다”는 이유로 스타일을 선택하기. Apple의 넓은 마케팅 화면을 매물 30개가 필요한 부동산 대시보드에 그대로 복사하면 맞지 않을 수 있습니다. 그렇다고 Apple 기반 글꼴, 색, 계층을 배제할 필요는 없습니다. 작업에 맞춰 간격과 행 밀도를 조정하고 대상 화면 크기에서 실제 보이는 정보를 확인하세요. 브랜드뿐 아니라 밀도, 어조, 대상을 기준으로 특정 참고 화면을 선택하세요.

실수 4. 프롬프트 자체에서 DESIGN.md를 언급하지 않기. DESIGN.md가 저장소에 있고 CLAUDE.md를 통해 가져와 에이전트가 볼 수 있어도, 프롬프트에 “웹사이트를 만들어”라고만 쓰면 Claude는 해당 파일을 명시적으로 참조하지 않고 일반적인 방식으로 작업할 수 있습니다. 디자인 프롬프트마다 다음 문장을 넣으면 유용합니다. “docs/DESIGN.md의 색상, 글꼴, 간격을 정확히 사용해. 값을 지어내지 말고 파일에서 가져와.” 이렇게 하면 에이전트가 DESIGN.md를 우회하지 않고 사용하게 됩니다.

정확한 토큰은 16진수 코드, pt 단위 글꼴 크기, DESIGN.md의 간격 단위입니다. 자연어 표현은 “modern”, “premium”, “clean”, “Apple처럼” 같은 말입니다. 정확한 토큰은 효과가 있지만 자유로운 표현은 그렇지 않습니다.

다음에는 무엇을 해야 할까요?

핵심 요점

DESIGN.md는 시각적 기준의 첫 번째 구성 요소이지 유일한 요소는 아닙니다. 더 발전시킬 방향은 세 가지입니다. 스크린샷을 통한 시각적 피드백을 제공하는 Claude Code의 Frontend Design Skill, 여러 스타일을 정기적으로 다루는 Refero MCP, 그리고 DESIGN.md를 컨텍스트 엔지니어링과 결합해 에이전트가 먼저 시각적 기준을 읽고 페이지를 만든 다음 스크린샷으로 결과를 직접 확인하도록 하는 방법입니다.

이제 기본 작업 흐름을 알게 되었습니다. Claude Code + Refero의 DESIGN.md + 4단계 = 템플릿 같지 않은 웹사이트. 이것으로 필요의 70%를 해결할 수 있습니다. 나머지 30%는 더 높은 정밀도, 더 빠른 속도 또는 검증이 필요한 경우입니다.

기본을 익힌 뒤 시도할 세 가지 방향입니다.

Frontend Design Skill. 시각적 피드백을 추가하는 Claude Code용 공식 skill입니다. 에이전트가 Puppeteer로 조립된 페이지의 스크린샷을 찍고, “눈”(비전 모델)으로 살펴보고, DESIGN.md와 비교한 다음 수정 사항을 직접 제안합니다. “프롬프트 → 코드 → 스크린샷 → 검토 → 프롬프트” 과정을 자동화하는 것입니다. 페이지가 복잡해서 한 번의 반복으로 제대로 만들기 어려울 때 유용합니다.
프로덕션 모드의 Refero MCP. 3–5개 프로젝트를 동시에 관리하면 각 프로젝트에 DESIGN.md를 수동으로 추가하는 일이 번거로워집니다. Refero MCP는 프로젝트 설명을 바탕으로 적합한 스타일 3개를 찾아 선택할 수 있게 해 줍니다. 새 프로젝트를 시작하는 데 걸리는 시간을 30분에서 3분으로 줄여 줍니다.
Context Engineering과 결합하기. DESIGN.md는 컨텍스트를 구성하는 산출물 중 하나입니다. 그와 함께 보통 ARCHITECTURE.md(프로젝트 구조), BRAND.md(말투), business/audience.md(대상 고객)가 있습니다. 이 파일들은 모두 CLAUDE.md에서 가져옵니다. Claude가 페이지를 만들 때 시각 요소, 대상 고객, 제품 구조를 참고합니다. 본질적으로 이는 context engineering, 즉 요청 전에 에이전트에 무엇을 제공할지 체계적으로 다루는 작업입니다.

실용 자료: Ailoot 문서.

출처

실용 자료: Ailoot 문서.

더 많은 자료와 도구: Ailoot.