클로드 코드로 화면을 만들면 결과가 어딘가 비슷비슷하다는 느낌을 받을 때가 있습니다. 보라색 그라데이션, 똑같은 카드 배치처럼 이른바 AI 티가 나는 화면입니다. 이 글은 그 밋밋함을 줄이려고 붙여 쓰는 디자인 도구 7곳을 스타일, 부품, 움직임, 마감 네 가지 역할로 나눠 정리하고, 클로드 코드에 알려 줄 규칙까지 적었습니다.
목차
먼저 밝힙니다. 이 글은 각 사이트의 소개글과 깃허브 README를 2026년 9월 29일에 읽고 정리한 분석입니다. 제가 직접 확인한 것은 스타 수와 라이선스, 사이트에 적힌 규모 표기까지이고 7곳을 모두 써 본 것은 아닙니다. 규모 수치는 전부 각 사이트가 스스로 밝힌 값입니다.
디자인 도구는 어떤 역할로 나눠서 보면 되나요?
한 곳이 모든 것을 해 주지는 않습니다. 화면을 만드는 과정을 네 갈래로 나누면 도구를 고르기 쉬워집니다.
| 역할 | 도구 | 규모 (자체 표기) |
|---|---|---|
| 스타일 | styles.refero.design | AI가 읽는 DESIGN.md 2,000개 이상, 매주 추가, 베타 |
| 스타일 | awesome-design-md | 스타 약 11.9만, MIT |
| 스타일 | taste-skill | 스타 약 9.1만, MIT |
| 부품 | 21st.dev | React·Tailwind 컴포넌트 1.2만 개 이상 |
| 부품 | component.gallery | 컴포넌트 60종, 디자인 시스템 95개, 예시 2,671개 |
| 움직임 | kinetics.colorion.co | 스프링 물리 애니메이션 153개 |
| 마감 | impeccable | 스타 약 7.2만, Apache-2.0, 탐지 규칙 61개 |
스타일은 어디서 가져오나요?
스타일은 화면의 색과 글꼴, 간격 같은 분위기를 정하는 일입니다. styles.refero.design은 AI가 읽을 수 있는 DESIGN.md 파일을 2,000개 이상 모아 둔 사이트로, 매주 늘어나며 베타 표시가 붙어 있습니다.
awesome-design-md는 실제 사이트의 디자인 규칙을 DESIGN.md 형태로 모은 목록입니다. DESIGN.md는 색상과 글꼴, 여백 규칙을 글로 적어 둔 파일이라, 클로드 코드가 읽고 그 규칙대로 화면을 만들도록 돕습니다. 이 방식으로 브랜드 화면을 만든 과정은 브랜드 홈페이지 제작 글에 정리해 두었습니다.
taste-skill은 AI 티가 나는 프런트엔드를 막으려는 스킬 모음입니다.
부품과 움직임은 어떻게 채우나요?
부품은 버튼과 카드, 표처럼 화면을 이루는 조각입니다. 21st.dev는 React와 Tailwind 기반 컴포넌트를 1.2만 개 이상 모아 두었고, shadcn CLI나 MCP로 가져올 수 있다고 안내합니다. 무료로는 하루 두 번까지 복사할 수 있고 멤버십은 제한이 없다고 표기되어 있습니다.
component.gallery는 컴포넌트 60종과 디자인 시스템 95개, 예시 2,671개를 모아 둔 참고용 모음입니다. 어떤 부품을 다른 서비스들은 어떻게 만들었는지 볼 때 유용합니다.
움직임은 kinetics.colorion.co가 153개의 스프링 물리 애니메이션을 모아 두었고, CSS나 리액트 코드, AI 프롬프트 중 원하는 형태로 복사할 수 있다고 소개합니다.
마감은 어떤 도구가 맡나요?
impeccable은 스킬 1개에 명령 24개, 탐지 규칙 61개를 담아 만든 화면을 점검하고 다듬게 하는 도구입니다. README의 설치 방법은 터미널에서 npx impeccable install을 실행한 뒤 클로드 코드 안에서 /impeccable init을 입력하는 순서입니다. 화면을 다 만든 뒤 마지막에 손보는 단계에 쓰라고 만든 도구로 이해하시면 됩니다.
디자인 도구는 어떤 순서로 붙이면 되나요?
한 번에 다 붙이면 무엇이 효과를 냈는지 알 수 없습니다. 만들려는 화면이 하나 있다고 가정하고 이 순서로 하나씩 더해 보세요.
- 스타일부터 정합니다. 마음에 드는 사이트의 DESIGN.md를 하나 골라 프로젝트에 두고 클로드 코드가 참조하게 합니다.
- 화면을 한 번 만들게 한 뒤 부품이 아쉬운 곳만 21st.dev나 component.gallery에서 찾아 바꿉니다.
- 움직임은 꼭 필요한 곳에만 넣습니다. 버튼 하나, 카드 하나처럼 범위를 좁혀 시작하세요.
- 마지막에 마감 도구로 점검하고, 지적된 항목 중 실제로 어색한 것만 고칩니다.
각 단계 뒤에 화면을 열어 전후를 눈으로 비교하는 것이 이 순서의 핵심입니다.
클로드 코드에는 어떤 규칙을 적어 두면 되나요?
도구를 많이 붙여도 클로드 코드가 언제 쓸지 모르면 소용이 없습니다. 프로젝트의 CLAUDE.md에 아래 정도만 적어 두면 길잡이가 됩니다.
- 새 페이지를 만들 때, 디자인이 별로일 때, 내가 이 사이트를 말할 때만 참고한다.
- 프로젝트에 이미 있는 디자인 시스템이 항상 먼저다.
- 스타일은 DESIGN.md를 @로 참조하고, 부품은 21st.dev에서 찾은 뒤 component.gallery로 확인한다.
- 움직임은 kinetics를, 마감은 impeccable을 쓴다.
- 도구를 설치하기 전에는 나에게 먼저 물어본다.
- 페이지 내용을 읽지 못하면 멈추고 묻는다.
- 바꿀 때마다 무엇을 어디서 가져왔는지 보고한다.
이 규칙은 제가 정리한 예시라서 작업 성격에 맞게 고쳐 쓰셔야 합니다. 특히 설치 전에 물어보라는 줄은 남겨 두시는 편이 안전합니다.
자주 묻는 질문
디자인 도구는 전부 설치해야 하나요?
그렇지 않습니다. 지금 화면에서 가장 아쉬운 지점 하나를 고르고, 그 역할의 도구부터 시험해 보세요. 스타일이 문제라면 DESIGN.md, 마감이 문제라면 impeccable 같은 식입니다.
무료로 쓸 수 있나요?
깃허브 레포 세 곳은 각각 MIT나 Apache-2.0 라이선스로 공개되어 있습니다. 21st.dev는 무료 복사 횟수가 하루 두 번으로 제한되고 그 이상은 멤버십이 필요하다고 표기되어 있습니다. 나머지 사이트의 이용 조건은 각 사이트에서 확인하세요.
이 글에 나온 규모는 직접 센 건가요?
아닙니다. 각 사이트와 README가 스스로 밝힌 수치를 옮긴 것이고, 개수를 세어 검증하지 않았습니다.
오늘 다룬 디자인 도구 바로가기
- DESIGN.md 모음 저장소 페이지 — MIT
- 마감 점검 도구 저장소 페이지 — Apache-2.0
- 화면 스타일 스킬 저장소 페이지 — MIT
- PPT 디자인 시스템 프롬프트 글 — DESIGN.md를 슬라이드에 적용한 기록
- 홈페이지 무료 리뉴얼 글 — 클로드 코드로 홈페이지를 고친 과정
출처
| 항목 | 출처 |
|---|---|
| 스타 수·라이선스 | GitHub 저장소 화면 (2026-09-29 확인) |
| 사이트 규모·무료 조건 | 각 사이트 소개글의 자체 표기 |
| impeccable 설치와 규칙 수 | impeccable README |
*2026년 9월 29일 기준으로 각 사이트와 README를 읽고 정리한 글입니다. 규모 수치는 각 사이트가 밝힌 값이며 제가 직접 재현하거나 세어 본 값이 아닙니다. 언급한 곳들과는 제휴 관계가 없습니다.*
작성자 소개
