클로드에 디자인 기준을 주는 Refero Styles 사용법

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

바로 시작하기

Refero Styles 열기

마음에 드는 디자인을 열고 DESIGN.md → Copy.md를 선택하세요. 복사한 내용을 프로젝트의 DESIGN.md 파일로 저장한 뒤, 클로드 코드에 이 파일을 읽고 작업하도록 요청하면 됩니다.

참고 화면의 색만 골라 전달하는 것보다 제목의 크기, 버튼의 역할, 요소 사이 간격까지 함께 설명할 수 있습니다. 결과가 마음에 들지 않으면 아래 수정 요청문으로 조정하세요.

1. 만들 화면과 가까운 디자인 고르기

갤러리에서 원하는 페이지와 비슷한 구성을 고르세요. 제품 소개 페이지라면 제품 이미지가 크게 보이는 화면, 글을 읽는 페이지라면 본문과 제목 구분이 선명한 화면이 출발점입니다.

영상에서는 Tesla 스타일을 예로 들었습니다. 제품을 크게 보여주고, 주 버튼에 파란색을 쓰며, 나머지 화면은 무채색으로 정리한 사례입니다.

이는 Refero가 정리한 스타일 참고 자료입니다. 해당 브랜드가 배포한 공식 디자인 문서라는 뜻은 아닙니다.

2. DESIGN.md 복사하기

상세 화면에서 DESIGN.md 탭을 선택하세요. 문서 영역의 Copy.md로 내용을 복사합니다.

프로젝트에 같은 이름의 파일이 없다면 DESIGN.md로 저장하세요. 이미 있다면 덮어쓰지 말고 references/refero-style.md처럼 다른 이름으로 저장한 뒤 그 경로를 알려주세요.

성공하면 파일 안에 색상, 글꼴, 간격 등의 기준이 들어 있습니다. 파일명만 저장되고 내용이 비어 있으면 다시 복사하세요.

3. 만들 페이지와 함께 요청하기

클로드 코드에서 해당 프로젝트를 연 다음 아래 요청문을 붙여넣으세요. 예시의 헤드폰은 본인의 제품으로 바꾸면 됩니다.

DESIGN.md를 먼저 읽어줘.

무선 헤드폰 소개 페이지를 만들어줘.
제품 이미지와 제목을 크게 보여주고, 주요 버튼 하나를 가장 눈에 띄게 배치해줘.
색상, 제목·본문 크기, 버튼 모양, 여백은 문서에서 기준을 골라 적용해줘.

참고 사이트의 로고, 사진, 문구는 복제하지 마.
기존 프로젝트의 기능은 유지해줘.
구현한 화면을 보여주고 적용한 기준을 짧게 알려줘.

성공하면 페이지 화면과 함께 어떤 기준을 적용했는지 확인할 수 있습니다. 설명만 나오고 파일이 바뀌지 않았다면, 작업 폴더가 연결되어 있는지 확인한 뒤 실제 구현을 요청하세요.

4. 결과에서 바꿀 부분만 짚기

제목, 제품 이미지, 주요 버튼 순서로 눈이 가는지 먼저 보세요. 휴대폰 너비에서도 글자가 잘리지 않는지 확인합니다.

방금 만든 화면에서 제목과 제품 이미지가 서로 경쟁하고 있어.
제목을 먼저 읽고 제품으로 시선이 이어지도록 크기와 여백을 조정해줘.
주 버튼의 강조색은 유지하고 보조 버튼은 한 단계 낮춰줘.
휴대폰 화면에서도 내용이 잘리지 않게 수정해줘.

자주 막히는 곳

클로드가 문서를 읽지 않습니다. 파일이 있는 경로를 정확히 알려주고, 수정 전에 파일에서 색상·서체·간격 기준을 먼저 읽어 달라고 요청하세요.

원본과 똑같은 폰트가 없습니다. 문서에 있는 대체 서체를 확인하세요. 상용 폰트를 임의로 복사하지 말고, 프로젝트에서 사용할 수 있는 폰트로 바꾸세요.

브랜드 사이트와 똑같이 나오나요? 완전한 복제를 보장하는 기능이 아닙니다. 디자인 기준을 AI에 전달하는 참고 문서이며, 결과는 요청 내용과 구현 환경에 따라 달라집니다.

클로드 전용인가요? Refero는 Cursor, Codex, v0, Lovable 등에서도 DESIGN.md를 활용할 수 있다고 안내합니다. 각 환경에서 파일을 읽을 수 있도록 전달해야 합니다.

영상과 자료의 범위

영상의 갤러리 이미지는 Refero Styles의 실제 자료를 사용했습니다. 입력 장면과 제품 페이지는 사용 흐름을 설명하기 위한 자체 HTML 구현 예시이며, 클로드의 실제 실행 화면을 녹화한 것은 아닙니다.

원문과 현재 기능은 Refero Styles에서 확인하세요. 서비스나 AI 사용에 필요한 계정·요금은 각 환경에 따라 달라집니다.