작은 스킬 창고
2026년 클로드 코드 디자인·UI 스킬 추천
디자인은 코딩 에이전트의 실패가 가장 눈에 띄는 분야이고, 그걸 고치겠다는 스킬도 가장 많은 분야입니다. 저희 색인에만 767개가 있습니다. 그중 설치 수, 파일 내용, 최종 갱신일이 모두 납득되는 8개를 골랐습니다. 숫자는 2026-09-03 수집 기준입니다.
추천 스킬
#1
- frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
추천 이유: 약 850K 설치. 코드를 쓰기 전에 시각적 방향을 정합니다. 새 화면을 만들 때 가장 먼저 설치할 스킬입니다.
#2
- web-design-guidelines
vercel-labs/agent-skills
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
추천 이유: 약 604K 설치. 만드는 스킬이 아니라 검토하는 스킬로, 완성된 마크업을 접근성·상호작용 규칙에 비추어 점검합니다.
#3
- design-taste-frontend
leonxlnx/taste-skill
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Not for dashboards or app screens.
추천 이유: 약 439K 설치. 랜딩페이지가 템플릿처럼 보이지 않게 가장 강하게 밀어붙이지만 SKILL.md가 87KB입니다.
#4
- ui-ux-pro-max
nextlevelbuilder/ui-ux-pro-max-skill
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.
추천 이유: 약 343K 설치. 스크립트가 딸린 디자인 지식 베이스로, 팔레트·글꼴·패턴을 지어내지 않고 찾아 쓰고 싶을 때 좋습니다.
#5
- high-end-visual-design
leonxlnx/taste-skill
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
추천 이유: 약 326K 설치. 고급스러운 느낌을 내는 글꼴·여백·그림자 값을 구체적으로 지정하며, 크기가 작아 늘 설치해 둘 만합니다.
#6
- redesign-existing-projects
leonxlnx/taste-skill
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
추천 이유: 약 322K 설치. 기존 코드를 위해 쓰인 유일한 선택으로, 먼저 진단한 뒤 동작을 깨지 않고 고칩니다.
#7
- impeccable
pbakaus/impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages, dashboards, product UI, components, forms, settings, onboarding, empty states, and native iOS or Android screens. Handles UX review, hierarchy, layout, typography, color, motion, UX copy, accessibility, responsive behavior, edge cases, and capturing or documenting design systems (DESIGN.md, tokens). Also for making bland UI bolder, loud UI quieter, or ambitious visual effects. Not for backend-only or non-UI tasks.
추천 이유: 약 261K 설치. 다듬기·비평·적응·색상 같은 디자인 명령을 모은 도구 모음으로, 파일 163개와 스크립트가 함께 옵니다.
#8
- emil-design-eng
emilkowalski/skills
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
추천 이유: 약 248K 설치. 현업 디자인 엔지니어가 쓴 컴포넌트 단위의 완성도와 상호작용 판단 기준입니다.
창고 사용 안내서
고른 기준
디자인 카테고리를 설치 많은 순으로 놓고 위에서부터 SKILL.md와 파일 목록을 읽었습니다. 디자이너가 실제 규칙이라고 인정할 만한 일을 하고, 저장소가 최근 한 달 안에 갱신되었고, 주의할 점을 솔직하게 적을 수 있는 스킬만 남겼습니다.
leonxlnx/taste-skill 저장소 하나에 스킬이 13개 있고 그중 3개가 이 목록에 들어갔습니다. 편애가 아니라, 형용사 대신 정확한 값을 에이전트에게 건네는 디자인 스킬이 여기밖에 없기 때문입니다. 한 사람의 카탈로그가 되지 않도록 3개로 제한했습니다.
1. frontend-design (anthropics/skills)
하는 일: UI를 쓰기 전에 에이전트가 미적 방향, 글꼴 조합, 색 체계를 먼저 정하고 그 결정에 맞춰 만듭니다. 약 850K 설치, 별 173.6K, 2026-09-03 갱신, 파일 2개, 스크립트 없음, 9.4KB.
쓰는 상황: 디자인 시스템이 아직 없는 새 화면이나 컴포넌트. 주의: 개성 있는 편집 디자인 쪽으로 기울어 있어서, 회사용 대시보드라면 "절제되게"라고 명시하지 않으면 큰 제목용 글꼴을 꺼내 듭니다.
npx skills add anthropics/skills@frontend-design -g -y2. web-design-guidelines (vercel-labs/agent-skills)
하는 일: 기존 UI 코드를 Vercel의 웹 인터페이스 지침에 비추어 검토하고 위반 사항을 파일·줄 번호와 함께 보고합니다. 약 604K 설치, 별 30.8K, 2026-08-28 갱신, 파일 1개, 1.2KB.
쓰는 상황: 페이지를 완료라고 선언하기 직전. 주의: SKILL.md가 작은 이유는 매번 저장소에서 최신 규칙 목록을 받아오라고 시키기 때문입니다. 네트워크가 필요하고, 재설치 없이도 동작이 바뀔 수 있습니다.
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y3. design-taste-frontend (leonxlnx/taste-skill)
하는 일: 브리프를 읽고 방향을 추론한 뒤, 가운데 정렬 히어로·보라색 그라데이션·똑같은 카드 세 개를 걸러내는 사전 점검표를 돌립니다. 약 439K 설치, 별 84K, 2026-08-24 갱신, 파일 1개.
쓰는 상황: 평범해 보이면 실패인 랜딩페이지, 포트폴리오, 재설계. 주의: SKILL.md가 87KB, 약 22,000토큰이고 발동할 때마다 통째로 올라갑니다. 전역보다 필요한 프로젝트에만 설치하세요.
npx skills add leonxlnx/taste-skill@design-taste-frontend -y4. ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)
하는 일: 스타일, 팔레트, 글꼴 조합, UX 규칙을 찾아 주는 조회 시스템으로, 에이전트가 제품 유형에 맞는 추천을 뽑아 오는 검색 스크립트가 있습니다. 약 343K 설치, 별 124.6K, 2026-09-03 갱신, 파일 72개, 스크립트 포함, 16KB.
쓰는 상황: 핀테크 팔레트나 SaaS 가격표 레이아웃처럼 근거 있는 선택을 목록에서 고르고 싶을 때. 주의: 스크립트가 있으니 설치 전에 읽어 보세요. 결과는 목록의 수준을 넘지 못하고, 목록은 관행적인 패턴 쪽에 가깝습니다.
npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max -g -y5. high-end-visual-design와 6. redesign-existing-projects (leonxlnx/taste-skill)
high-end-visual-design는 사이트를 비싸 보이게 하는 글꼴, 여백 단계, 그림자 조합, 카드 구조를 정확히 지정합니다. 약 326K 설치, 10.6KB, 2026-08-24 갱신. 브리프는 고급인데 에이전트가 기본 Tailwind만 내놓을 때 쓰세요. 주의: 취향 하나를 강제하므로 브랜드가 발랄하다면 계속 부딪힙니다.
redesign-existing-projects는 이미 있는 코드를 위한 짝입니다. 현재 디자인을 진단하고 흔한 패턴을 짚은 뒤 동작은 건드리지 않고 고칩니다. 약 322K 설치, 15KB. 잘 돌아가지만 낡아 보이는 앱에 쓰세요. 주의: 에이전트가 앱을 실행하고 볼 수 있다고 전제하므로 백엔드만 있는 저장소에서는 진단할 게 없습니다.
npx skills add leonxlnx/taste-skill@redesign-existing-projects -y7. impeccable (pbakaus/impeccable)
하는 일: 다듬기, 비평, 압축, 견고화, 적응, 애니메이션, 색상 같은 이름 붙은 디자인 작업을 에이전트가 화면에 적용하며, 작업마다 참고 문서가 붙어 있습니다. 약 261K 설치, 별 65.3K, 2026-09-03 갱신, 파일 163개, 스크립트 포함, 진입 파일 10.9KB.
쓰는 상황: 이미 있는 화면을 한 번에 작업 하나씩 다듬을 때. 주의: 저장소 안에 같은 SKILL.md 사본이 16개 있어서 검색 결과에 impeccable이 여러 번 보입니다. 접미사 없는 것을 설치하세요. 스크립트도 함께 옵니다.
npx skills add pbakaus/impeccable@impeccable -g -y8. emil-design-eng (emilkowalski/skills)
하는 일: 컴포넌트 완성도, 언제 움직일지, 좋은 소프트웨어와 그럭저럭인 소프트웨어를 가르는 작은 디테일(포커스 링, 시각적 정렬, 로딩 상태)에 대한 Emil Kowalski의 판단 기준을 담았습니다. 약 248K 설치, 별 35K, 2026-08-21 갱신, 27KB.
쓰는 상황: 페이지 전체보다 버튼, 입력창, 대화상자 같은 컴포넌트를 만들 때. 주의: 27KB라 에이전트에게는 긴 글이고 리액트 색채가 강합니다. Vue나 Svelte에서는 원칙은 맞지만 예시는 안 맞습니다.
npx skills add emilkowalski/skills@emil-design-eng -g -y뺀 것과 그 이유
obra/superpowers의 brainstorming은 약 350K 설치에 디자인 태그가 붙어 있지만 일반 기획 스킬입니다. 저희 태그 분류기가 "components"라는 단어를 읽는 방식 때문에 여기 나타납니다. minimalist-ui, industrial-brutalist-ui, gpt-taste(각 약 280K~300K 설치)는 같은 taste-skill 저장소의 스타일 프리셋이라 그 특정 룩이 브리프일 때만 고르세요. stitch-design-taste는 Google Stitch용이고, brandkit과 image-to-code는 화면이 아니라 이미지를 만듭니다.
조합하는 법
생성용 다섯 개보다 생성용 하나와 검토용 하나를 설치하세요. 전역으로는 frontend-design, web-design-guidelines, emil-design-eng 조합이 무난합니다. 랜딩페이지 작업이면 design-taste-frontend를, 낡은 앱이면 redesign-existing-projects를 프로젝트별로 더하세요. 취향이 반대인 생성용 두 개는 "히어로 섹션 만들어 줘"에 둘 다 반응해 충돌합니다.
자주 묻는 질문
커서와 코덱스에서도 되나요, 클로드 코드만 되나요?
8개 모두 일반 SKILL.md 폴더라 이 형식을 읽는 에이전트 어디서든 동작합니다. 설치 명령에 --agent cursor나 --agent codex를 붙이면 특정 에이전트만 대상으로 설치됩니다.
왜 설치 수를 주된 순위 기준으로 삼았나요?
스킬 페이지를 읽은 사람의 결정이 반영된 유일한 숫자이기 때문입니다. 별은 저장소 기준이라 유명 저장소의 작은 스킬도 큰 별 수를 물려받습니다. 설치 수로 후보를 추린 뒤 파일을 읽고 순서를 정했습니다.
하나만 먼저 설치한다면요?
frontend-design입니다. 작고, Anthropic이 관리하고, 스크립트가 없으며, 거의 모든 화면의 첫 초안을 좋아지게 합니다.
SKILL.md가 크면 문제가 되나요?
발동할 때마다 컨텍스트를 차지하고, 컨텍스트가 작은 모델에서는 내 코드를 밀어낼 수 있습니다. 15KB 이하면 편안하고, 87KB인 design-taste-frontend는 예외적인 경우라 페이지 자체가 제품일 때만 값을 합니다.
내용 최종 확인일: