Claude Code 프론트엔드 스킬 가이드 2026 — taste, 디자인 스킬, 이미지 투 코드, Playwright까지

크게 보기

Claude Code로 랜딩 페이지를 만들어 본 사람이라면 압니다. 보라색 그라데이션 히어로, 가운데 정렬된 세 개의 카드, rounded-lg가 붙은 모든 것. 소위 "AI 슬롭(slop)" — 어디서 본 듯한, 누가 만들어도 똑같은 UI입니다.

흥미로운 건 이게 모델 성능 문제가 아니라는 점입니다. 같은 모델에 어떤 지식을 얹어 주느냐에 따라 결과물이 완전히 달라집니다. 그 "얹어 주는 지식"의 표준 규격이 스킬(Agent Skills)이고, 2026년 들어 프론트엔드 영역에서 폭발적으로 성장했습니다. 디자인 취향을 주입하는 스킬은 GitHub 스타 8만 개를 넘겼고, Vercel의 skills.sh 레지스트리에는 수천 개의 스킬이 설치 수 리더보드로 경쟁 중입니다.

이 글은 그중 프론트엔드 개발자에게 실제로 도움이 되는 것만 골라, 무엇을 설치하고 언제 어떻게 쓰는지를 정리합니다.

0. 스킬이 뭔지 3분 만에

스킬은 마크다운 파일 하나로 패키징된 전문 지식입니다. 프로젝트나 홈 디렉터리의 skills/ 폴더에 SKILL.md 파일을 넣으면, Claude Code가 세션 시작 시 각 스킬의 이름과 한 줄 설명만 읽어 두었다가 작업이 그 스킬과 관련될 때만 본문을 로드합니다(점진적 로딩). 컨텍스트를 아끼면서 필요할 때만 전문 지식이 켜지는 구조입니다.

---
name: my-design-rules
description: UI 컴포넌트를 만들 때 우리 팀 디자인 규칙을 적용
---

# 우리 팀 디자인 규칙
- 색상은 src/styles/tokens.css의 변수만 사용한다
- 버튼 radius는 6px 고정...

CLAUDE.md와의 차이는 로딩 방식입니다. CLAUDE.md는 매 세션 전체가 항상 로드되는 "상시 규칙"이고, 스킬은 필요할 때만 로드되는 "전문 서적"입니다. 디자인 가이드처럼 길고 특정 작업에만 필요한 지식은 스킬로 빼는 것이 맞습니다.

설치는 세 가지 방법이 있고, 가장 쉬운 것은 skills.sh CLI입니다.

# ① skills.sh CLI (권장) — 프로젝트 루트에서
npx skills add <github-repo-주소>
npx skills find "design"        # 레지스트리 검색

# ② 공식 플러그인 마켓플레이스 — Claude Code 세션 안에서
/plugin install playwright@claude-plugins-official

# ③ 수동 — SKILL.md가 든 폴더를 직접 복사
#    ~/.claude/skills/       (모든 프로젝트 공용)
#    .claude/skills/         (이 프로젝트 전용, Git으로 팀 공유)

설치된 스킬은 세션에서 /스킬이름으로 명시적으로 부를 수도 있고, 관련 작업을 시키면 자동으로 발동됩니다. 어떤 스킬이 잡혀 있는지는 대화 중 "사용 가능한 스킬 목록 보여줘"로 확인할 수 있습니다.

1. taste-skill — 디자인 취향을 다이얼로 주입

Leonxlnx/taste-skill · GitHub 82.4K★ · skills.sh 설치 40만+

스스로 "The Anti-Slop Frontend Framework for AI Agents"라 부르는, 2026년 프론트엔드 스킬의 대표주자입니다. 1,200줄이 넘는 SKILL.md 하나에 레이아웃·타이포그래피·모션·간격에 대한 규칙을 담았는데, 핵심은 규칙이 "감성"이 아니라 grep 가능한 기계적 체크라는 점입니다. 보라색 그라데이션 금지, em-dash 금지, 특정 클리셰 패턴 금지 같은 것들이 명시적으로 박혀 있습니다.

npx skills add https://github.com/Leonxlnx/taste-skill
# 메인 스킬만 골라 설치하려면
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

가장 실용적인 부분은 3개의 다이얼입니다. SKILL.md 상단의 1~10 값을 바꾸면 결과물의 성격이 바뀝니다.

기본값 8/6/4는 "아트워크에 가까운 키네틱 랜딩" 쪽으로 기울어 있으니, 관리자 대시보드나 SaaS 내부 화면을 만든다면 variance를 3~4로, density를 7~8로 내리고 올려서 쓰는 것이 좋습니다. 마케팅 랜딩이라면 기본값 그대로가 잘 맞습니다. GSAP 애니메이션의 "정답 코드 골격"과 기존 디자인을 뜯어고칠 때의 redesign-audit 프로토콜도 들어 있어, "이 페이지 촌스러운데 고쳐줘" 같은 요청에서 특히 차이가 납니다.

2. frontend-design — Anthropic 공식 디자인 스킬

anthropics/skills의 frontend-design · 설치 27만+

Anthropic이 직접 관리하는 공식 스킬 저장소에 포함된 디자인 스킬입니다. taste-skill이 "금지 목록과 다이얼"이라면, 이쪽은 디자인 프로세스 자체를 주입합니다. Claude를 "작은 스튜디오의 디자인 리드"로 설정하고, 코드를 쓰기 전에 팔레트·타이포그래피·레이아웃을 브리프에 맞춰 계획하게 하며, "정당화할 수 있는 미적 리스크 하나"를 반드시 감수하게 합니다.

npx skills add https://github.com/anthropics/skills --skill "frontend-design"

두 스킬 중 무엇을 쓸지 고민된다면:

이 계열의 끝판왕격 프로젝트로, 디자인 스킬 수십 개를 데몬-에이전트 아키텍처로 묶은 Open Design(nexu-io/open-design)도 있습니다. 아티팩트-퍼스트 워크플로우 전체를 오픈소스로 재현한 프로젝트인데, 구조가 궁금하다면 저희가 코드 레벨로 분해한 심층 분석 글을 참고하세요.

3. image-to-code — 시안을 디자인 시스템으로 재구성

image-to-code (plugin87/ux-ui-agent-skills) · screenshot-to-code (OneWave-AI)

"이 스크린샷이랑 똑같이 만들어줘"는 스킬 없이도 되지만, 결과물이 픽셀 흉내에 그칩니다. 하드코딩된 색상 값, 마법의 숫자 간격, 한 덩어리 컴포넌트. image-to-code 계열 스킬이 바꾸는 것이 바로 이 부분입니다. 스크린샷을 주면:

npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill "image-to-code"

사용은 간단합니다. Claude Code에 이미지를 드래그(또는 경로 붙여넣기)하고 "이 시안을 우리 프로젝트 스타일로 구현해줘"라고 하면 됩니다. 피그마 내보내기 PNG, 경쟁사 스크린샷, 손그림 와이어프레임 모두 동작합니다. 결과물이 토큰 기반이므로 "주 색상만 우리 브랜드 색으로 바꿔줘"가 한 줄 수정이 된다는 것이 하드코딩 방식과의 결정적 차이입니다.

4. Playwright 스킬 — Claude에게 눈을 달아주기

공식 플러그인 또는 @playwright/cli 스킬

프론트엔드에서 가장 저평가된 스킬입니다. 위의 디자인 스킬들이 "잘 만들게" 한다면, Playwright 스킬은 "만든 것을 직접 보고 고치게" 합니다. 이것이 없으면 Claude는 자기가 짠 CSS가 실제로 어떻게 렌더링됐는지 모른 채 코드를 씁니다.

# 방법 ① 공식 플러그인 — Claude Code 세션 안에서
/plugin install playwright@claude-plugins-official

# 방법 ② Playwright CLI + 스킬 파일 (Node 20+)
npm install -g @playwright/cli@latest
playwright-cli install --skills

②는 open, click, fill, screenshot 같은 압축 명령의 CLI와 함께 브라우저 세션 관리, 요청 모킹, 스토리지 상태, 테스트 생성·디버깅, 트레이싱 워크플로우 스킬 문서가 설치됩니다. 주의: E2E 테스트 러너인 @playwright/test와는 다른 패키지입니다.

설치 후 프론트엔드 작업의 표준 루프가 이렇게 바뀝니다.

말로 "아마 고쳐졌을 겁니다"가 아니라 스크린샷 증거를 보고 수렴할 때까지 도는 루프가 됩니다. "회원가입 폼 E2E 테스트 만들어줘"라고 하면 실제 브라우저로 동작을 확인해 가며 테스트 코드를 생성하는 것도 이 스킬의 몫입니다.

5. Three.js 스킬 — 3D·인터랙티브의 지식 격차 메우기

3D 영역은 Claude의 일반 지식과 실제 API 사이 격차가 가장 큰 곳입니다. Three.js는 릴리스마다 API가 바뀌는데(특히 WebGPU 전환기), 학습 데이터는 과거에 머물러 있기 때문입니다. 그래서 스킬의 효과가 극적입니다. 참고로 커뮤니티에서 "threeui"라는 이름으로 회자되기도 하는데, 정확히 그 이름의 단일 스킬은 없고 아래 스킬 팩들이 실체입니다.

# React Three Fiber 프로젝트라면
npx skills add https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package

스크롤 연동 3D 랜딩(GSAP ScrollTrigger + Three.js) 같은 유행 패턴도 전용 스킬이 있으니, 필요할 때 npx skills find "threejs"로 검색해 보세요.

6. 다 합치면: 실전 워크플로우

스킬은 하나씩 쓸 때보다 조합했을 때 진가가 나옵니다. 실제 프로젝트에서 저희가 권하는 구성입니다.

설치 (프로젝트 루트에서 한 번):

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill "image-to-code"
npm install -g @playwright/cli@latest && playwright-cli install --skills
# .claude/skills/를 커밋하면 팀원 전체가 같은 스킬을 공유

신규 페이지를 만들 때:

이 루프의 요점은 사람이 하는 일이 바뀐다는 것입니다. CSS를 직접 미세조정하는 대신, 다이얼을 정하고 → 시안을 고르고 → 스크린샷 증거를 보고 승인하는 역할이 됩니다.

7. 스킬을 잘 쓰기 위한 팁 다섯

1. 발동이 안 되면 이름을 부르세요. 스킬은 description 매칭으로 자동 발동되는데, 애매한 요청엔 안 잡힐 수 있습니다. "taste-skill 적용해서" 한마디면 확실합니다.
2. 프로젝트 스킬은 커밋하세요. .claude/skills/를 Git에 넣으면 팀원 모두가 같은 디자인 규칙으로 작업합니다. 개인 취향 스킬만 ~/.claude/skills/에.
3. 스킬을 고쳐 쓰세요. 오픈소스 스킬은 출발점입니다. taste-skill의 금지 목록에 우리 팀 금지 패턴을 추가하고, 다이얼 기본값을 우리 제품에 맞게 바꿔 두면 그게 팀의 디자인 시스템 문서가 됩니다.
4. 너무 많이 설치하지 마세요. 스킬 목록(이름+설명)은 매 세션 로드됩니다. 수십 개를 깔면 발동 정확도가 떨어집니다. 프로젝트당 5~7개가 적정선입니다.
5. 찾을 땐 리더보드부터. skills.sh의 설치 수 순위가 사실상의 검증입니다. npx skills find "키워드"로 터미널에서 바로 검색됩니다.

마치며

2026년의 프론트엔드 AI 코딩은 "어떤 모델을 쓰느냐"보다 "모델에게 어떤 스킬을 쥐여 주느냐"의 게임이 되어 가고 있습니다. 다행히 그 스킬들은 대부분 마크다운 파일 하나짜리 오픈소스이고, 설치는 명령 한 줄입니다. 오늘 소개한 다섯 계열 — 취향(taste), 프로세스(frontend-design), 시안 변환(image-to-code), 검증(Playwright), 3D(Three.js) — 만 갖춰도 "AI가 만든 티 나는" 결과물과는 확실히 결별할 수 있습니다.

Claude Code 자체가 처음이라면 맥 설치 가이드와 윈도우 가이드부터, 이 스킬 생태계의 아키텍처가 궁금하다면 Open Design 심층 분석을 이어서 읽어 보세요.