[Claude Code 스킬] frontend-design, 템플릿처럼 보이지 않게 화면 만들기

AI에게 화면을 맡기면 흰 배경에 둥근 카드, 파란 버튼이 나옵니다. 틀린 건 아닌데 어느 사이트인지 구분이 안 됩니다. 이 글에서는 이런 기본값을 피하도록 돕는 frontend-design 스킬과, 이 블로그에서 디자인 기준을 지킨 방법을 다룹니다.

1. 어떤 스킬인가

Claude Code용 example-skills 플러그인에 들어 있는 스킬입니다. 스킬 설명에는 새 UI를 만들거나 기존 UI를 고칠 때 미적 방향, 타이포그래피, 템플릿 같은 기본값을 피하는 선택을 돕는다고 적혀 있습니다.

2. 출처

항목	내용
AI 도구	Claude Code
종류	스킬 (example-skills 플러그인에 포함)
만든 곳	Anthropic
저장소	https://github.com/anthropics/skills
설치 경로	anthropics/skills 마켓플레이스(anthropic-agent-skills)
확인한 버전	저장소 커밋 683bc88e56f3 (2026년 10월 7일 설치본 기준)
라이선스	Apache License 2.0 (스킬 폴더의 LICENSE.txt)

3. 언제 쓰면 좋은가

랜딩, 소개, 로그인처럼 첫인상이 중요한 화면에 어울립니다. 이미 디자인 기준이 있는데 새 화면이 따로 노는 것 같을 때도 씁니다.

4. 사용법

화면을 요청할 때 "이 프로젝트의 디자인 기준을 먼저 읽고, 템플릿 같지 않게"라고 덧붙입니다. 기준이 이미 있다면 새로 만들지 말고 그 기준을 따르게 하는 것이 핵심입니다. 이 블로그에서는 STORYBOARD.md와 globals.css의 토큰(brutal, chip, btn-primary)이 그 기준입니다.

5. 적용 예시

이 블로그의 관리자 로그인 화면을 다듬은 변경입니다. 이 화면을 이 스킬로 만든 것은 아니고, 기준을 따르게 하는 방식의 예시로 가져왔습니다.

	이전	이후
카드	기본 테두리 상자	블로그 공통 brutal 카드
정체	제목 "Admin" 하나	자물쇠 아이콘, "관리자 전용" 칩, 안내 문구
출구	없음	"블로그로 돌아가기" 링크

새 색이나 새 스타일을 하나도 만들지 않고 이미 있는 토큰만 조합했습니다. 화면이 따로 놀지 않게 하는 가장 싼 방법이었습니다.

6. 써 본 소감

디자인 스킬은 새로 꾸미게 하는 것보다 기존 기준을 잘 따르게 하는 쪽에서 값어치가 큽니다. 기준 문서가 있는 프로젝트라면 스킬과 함께 그 문서를 같이 읽게 해 보시길 권합니다.