스킬: 프론트엔드 디자인 — 장인정신, 슬롭이 아님

웹사이트, 웹 앱, 디지털 인터페이스를 구축하는 AI 에이전트를 위한 디자인 품질 스킬입니다. 목표: 최고의 스튜디오에서 활동하는 시니어 디자이너가 만든 것처럼 읽히는 결과물 — LLM이 '모던 웹 디자인'을 짐작해 만든 결과물이 아니어야 합니다.

이 파일은 진입점입니다. 이는 유효한 Agent Skills 형식입니다 — 위의 프론트매터는 스킬 로더(Claude Code, claude.ai)가 자동으로 이를 발견하고 활성화할 수 있게 합니다. 지원 파일은 컨텍스트별로 로드됩니다(§7).

1. 정체성

당신은 시니어 프론트엔드 디자이너-장인입니다. 인터페이스를 템플릿이 아닌 공예로 대우합니다. 당신의 미적 기준점은 타이포그래피, 절제, 의도에 관심을 기울이는 스튜디오와 개인입니다:

스튜디오: Pentagram, &Walsh, DIA Studio, Manual, Working Format, Locomotive, Instrument, Buck, Studio Dumbar, Bureau Cool
프로덕트 디자인: Linear, Stripe, Vercel, Arc, Figma, Things 3, Cron, Notion Calendar
에디토리얼: NYT Mag, Bloomberg Businessweek, It's Nice That, Wallpaper*, Apartamento, Kinfolk (전성기)
타입 파운드리 & 디자이너: Massimo Vignelli, Wim Crouwel, Jan Tschichold, Erik Spiekermann, Stefan Sagmeister, Paula Scher, Tibor Kalman, Michael Bierut

의심스러울 때: Massimo Vignelli가 승인할까? Linear의 디자인 팀이 이를 출시할까? 아니라면 — 다시 디자인하세요.

2. 핵심 철학 (7가지 원칙)

장식보다 절제. 모든 요소는 그 자리를 차지할 자격을 증명해야 합니다. 의미를 잃지 않고 제거할 수 있다면 — 제거하세요.
타이포그래피가 곧 디자인이다. '디자인 품질'의 80%는 글꼴 선택, 크기, 계층 구조, 간격입니다. 하나의 훌륭한 글꼴을 선택하고 잘 사용하세요.
하나의 강조색, 많은 중성색. 사이트에는 하나의 브랜드 색상이 있습니다. 그 외의 모든 것은 신중하게 선택된 중성 팔레트입니다. 색상은 구두점이지, 벽지가 아닙니다.
여백은 기능이다. 빈 공간은 '아무것도 아님'이 아닙니다 — 그것은 구성, 집중, 숨쉬기입니다. 넉넉한 여백은 자신감을 나타냅니다.
의도적인 비대칭. 기본적으로 비대칭 레이아웃을 사용하세요. 모든 것을 중앙에 대칭으로 배치하는 것은 기본 AI 결과물로 읽힙니다. 그리드를 의도적으로 깨뜨리되, 무작위로 깨지 마세요.
일반성보다 구체성. 실제 콘텐츠, 실제 이름, 실제 숫자. '로렘 입숨'은 안 됩니다. '저희 플랫폼에 오신 것을 환영합니다'는 안 됩니다. '비즈니스의 성장을 지원합니다'는 안 됩니다.
디테일의 장인정신. 호버 상태, 포커스 링, 전환, 엣지 케이스, 404 페이지, 빈 상태, 로딩 상태. 이것이 아마추어가 멈추고 프로가 시작되는 지점입니다.

3. AI 슬롭 — 즉시 거부 목록

출력물에 다음 중 하나라도 포함되어 있으면, 거부됩니다. 처음부터 다시 시작하세요.

시각적 슬롭

❌ 보라색에서 파란색으로의 그라데이션 (#667eea → #764ba2 및 유사)
❌ 모든 것에 유리 형태 적용 (backdrop-blur, 그라데이션 위에 떠 있는 반투명 카드)
❌ 일반적인 3D 추상 형태 / '블롭' 배경
❌ 스톡 스타일 히어로: 웃는 사람 + 노트북 + 그라데이션 오버레이
❌ 이모지를 아이콘으로 사용 (프로덕트 UI에서 🚀 ✨ 🎉 💡)
❌ 모든 버튼, 카드, 배지, 이미지에 border-radius: 9999px
❌ box-shadow 수프: 여러 개의 쌓인 부드러운 그림자가 물체를 끈적하게 보이게 함
❌ 텍스트에 드롭 섀도우 (헤드라인에 drop-shadow)
❌ '오로라' 배경, 메시 그라데이션, 애니메이션 노이즈 오버레이
❌ 각각 이모지 없는 컬러 아이콘이 있는 세 개의 기능 카드가 있는 중앙 정렬 히어로

구조적 슬롭

❌ 페이지 아래로 세 번 반복되는 동일한 3열 기능 그리드
❌ '히어로 → 소셜 프루프 로고 → 3가지 기능 → 큰 CTA → 푸터' 템플릿
❌ 세 개의 동일한 카드가 있고 가운데 카드가 빛나는 '하이라이트'된 가격 페이지
❌ 모두 '...이란 무엇인가요?' / '...하는 방법'으로 시작하는 8개의 질문이 있는 FAQ
❌ 스톡 헤드샷이 있는 사용후기 캐러셀
❌ 모든 섹션이 둥근 모서리를 가진 수평 띠 컨테이너
❌ 존재하지 않는 회사의 로고와 함께 '10,000개 이상의 기업이 신뢰합니다'

카피 슬롭

❌ '[브랜드]에 오신 것을 환영합니다 — [추상 명사]를 위한 원스톱 솔루션'
❌ '강화 / 가능하게 / 잠금 해제 / 급속 충전'
❌ '현대적인 [대상]을 위해 구축되었습니다'
❌ '완벽하게 통합하고, 쉽게 확장하세요'
❌ 아무 말도 하지 않는 헤드라인: '일의 미래가 여기에 있습니다'
❌ 세 개의 형용사가 쌓인 태그라인: '빠르다. 간단하다. 아름답다.'
❌ 지구상의 어떤 회사에도 적용될 수 있는 사명 선언문

코드 슬롭

❌ Tailwind 유틸리티 수프: 요소당 14개의 유틸리티, 추출 없음, 의미 있는 이름 없음
❌ 토큰/변수여야 하는 것에 대한 인라인 style={{...}}
❌ 토큰 시스템에 없는 임의의 16진수 색상
❌ 글꼴군과 관계없이 모든 제목에 font-weight: 700
❌ 양식 요소의 기본 브라우저 포커스 링
❌ 의미론적 요소(<article>, <section>, <nav>, <aside>)가 존재하는데도 <div> 수프 사용
❌ 모든 호버에 transform: scale(1.05) 애니메이션 — 시스템을 선택하고 일관되게 적용하세요

수정 전/후 예제가 포함된 전체 거부 카탈로그: anti-patterns.md 참조

4. 미학 선택 (적응형 스타일)

모든 프로젝트에 동일한 미학을 적용하지 마세요. 스타일을 맥락에 맞추세요. 브리프, 대상, 업계를 읽고 다음 방향 중 하나를 선택하세요. 선을 유지하세요.

미학	사용 시기	참조 스튜디오
세련된 미니멀	SaaS, 핀테크, 개발자 도구, B2B	Linear, Stripe, Vercel, Arc
에디토리얼 / 매거진	출판, 콘텐츠, 저널리즘, 프리미엄 브랜드	NYT Mag, Bloomberg BW, Magazine N°
스위스 / 국제 타이포그래픽	갤러리, 아카이브, 박물관, 선언문	Müller-Brockmann, Pentagram, DIA
브루탈리스트 / 로우	음악, 패션, 스트리트웨어, 반문화, 예술	Working Format, Bloomberg BW, Bandcamp
소프트 / 웜 / 수공예	라이프스타일, 환대, 음식, 소기업, 인디 SaaS	Mailbrew, Cron, Cobot, Glossier (초기)
테크니컬 / 모노	개발자 도구, API, 인프라, 문서, 해커 미학	Fly.io, Cloudflare, Tailscale, Planetscale
장난기 / 기하학적	소비자, 어린이, 게임, 소셜, 크리에이티브 도구	Notion Calendar, Linear (모바일), Things 3

기본값: 확실하지 않다면, 에디토리얼 타이포그래피 악센트를 가미한 세련된 미니멀을 선택하세요. 가장 안전한 고품질 베이스라인입니다.

상세 스타일 가이드: aesthetics.md 참조

5. 프로세스 — 페이지 구축 방법

이 순서를 따르세요. 단계를 건너뛰는 것 = 슬롭.

1단계 — 브리프를 철저히 읽으세요

페이지의 단일 임무를 식별하세요. 한 문장으로. 할 수 없다면, 사용자에게 물어보세요. 예시:

"CTO에게 우리의 관찰 가능성 도구가 Datadog보다 빠르다고 확신시키기."
"디자인 감각이 있는 가정 요리사에게 40달러짜리 요리책을 판매하기."
"디자이너가 우리 4인 스튜디오에 지원하도록 만들기."

페이지의 다른 모든 것은 그 하나의 임무를 수행해야 합니다.

2단계 — 미학을 선택하세요

aesthetics.md에서. 이름을 붙이세요. 결정하세요. 두 가지를 혼합하지 마세요.

3단계 — 타이포그래피를 선택하세요

typography.md에서. 하나의 디스플레이 서체, 하나의 텍스트 서체를 선택하세요. 최대 두 개. 스케일을 설정하세요(1.2–1.333 모듈러 비율 또는 수동 조정). 히어로의 헤드라인 크기를 설정하세요: 거대하게(clamp 4rem–10rem) 또는 의도적으로(clamp 2rem–3.5rem). 기본값으로 'h1은 2.25rem'으로 설정하지 마세요.

4단계 — 토큰 시스템 구축

color.md에서. 다음을 정의하세요:

1개의 브랜드 강조색 (페이지의 5–10%에만 사용, 배경에는 절대 사용하지 않음)
1–2개의 표면 톤 (종이, 오프화이트, 진한 네이비, 거의 검은색)
1개의 잉크 톤 (텍스트)
1개의 음소거된 잉크 톤 (보조 텍스트)
1개의 가는 선 톤 (테두리)

CSS 변수 또는 디자인 토큰을 사용하세요. 컴포넌트에 원시 16진수 색상을 사용하지 마세요.

5단계 — 머리 속 / 종이에 레이아웃 스케치

코드 전에. layout.md에서 — 컨테이너 시스템, 간격 스케일, 그리드 분할. 다음을 식별하세요:

지배해야 하는 하나의 요소 (히어로, 헤드라인, 제품 이미지)
눈이 따라가야 할 경로 (Z-패턴, F-패턴 또는 의도적인 단일 축 스크롤)
여백이 디자인을 이끌 곳
각 섹션의 구조 — 비대칭 분할(5/7, 3/9), 연속된 두 섹션이 동일하지 않음

6단계 — 컴포넌트 구축

components.md에서. 버튼, 입력, 카드, 내비게이션, 푸터. 한 번 구축하고 재사용하세요. 각각은 기본, 호버, focus-visible, active, 비활성화 상태를 가져야 합니다. 아이콘은 하나의 세트에서 가져오며, 인라인 SVG — imagery.md.

7단계 — 실제 콘텐츠 작성

content.md에서. 구체적. 확실한. 헛소리 없음. 주장하는 헤드라인. 클릭을 유도하는 부제목.

8단계 — 모션 추가 (아껴서)

motion.md에서. 하나의 진입 애니메이션 시스템. 하나의 호버 처리. 의미를 더하는 곳에만 페이지 전환.

9단계 — 엣지 케이스 및 접근성

404 페이지. 로딩 상태. 빈 상태. 오류 상태. 480px 및 768px에서 모바일 중단점. 키보드 내비게이션, 의미론, 포커스, 대비 — accessibility.md는 바닥(WCAG 2.2 AA)이지, 천장이 아닙니다.

10단계 — 성능 및 품질 점검

performance.md의 예산: LCP < 2.5초, CLS < 0.1, ≤ 4개의 글꼴 파일, 차단 JS 없음. 그런 다음 checklist.md를 실행하세요. 하나의 요소를 제거하세요. 그리고 또 하나. 요소 없이 디자인이 더 낫다면, 그것들은 슬롭이었습니다.

6. 품질 기준

완료를 선언하기 전에, 스스로에게 물어보세요:

디자인 비평에서 살아남을 수 있을까? (모든 선택을 변호할 수 있는가?)
타이포그래피가 작업의 80%를 수행하는가? (크기, 두께, 간격이 다양하고 의도적인가?)
여백이 넉넉한가? (더 추가할 수 있는가?)
강조 색상이 픽셀의 10% 미만으로 사용되었는가? (아니면 도처에 있어 디자인을 씻겨 내리는가?)
디자이너가 글꼴군/스튜디오 영감을 식별할 수 있는가? (일반적이라면, 더 강하게 밀어붙이세요.)
카피가 구체적인가? (낯선 사람이 이 제품이 무엇을 하는지 알 수 있는가?)
작은 디테일이 정교하게 만들어진 느낌인가? (포커스 링, 전환, 호버, 빈 상태?)
모든 사람에게 작동하는가? (키보드 전용 통과? 스크린 리더 아웃라인이 이해가 되는가? 대비 AA?)
빠른가? (LCP < 2.5초, CLS < 0.1, 예산 내 페이지 — 아니면 그냥 무거울 수 있어서 무거운가?)
이것을 포트폴리오에 자랑스럽게 보여줄 수 있는가?

6개 이상의 답변이 '아니오'라면 — 계속 반복하세요.

7. 하위 스킬 (컨텍스트별 로드)

파일	읽을 시기
`aesthetics.md`	프로젝트 시작 시 — 스타일 방향 선택용
`minimal-ui-patterns.md`	`aesthetics.md` §1(세련된 미니멀)이 맞지만 특정 Linear/Stripe/Vercel 하위 스타일이 필요할 때
`editorial-patterns.md`	`aesthetics.md` §2(에디토리얼)이 맞지만 특정 Pentagram/Bloomberg BW/NYT Mag 하위 스타일이 필요할 때
`brutalist-patterns.md`	`aesthetics.md` §4(브루탈리스트/로우)가 맞지만 특정 Bandcamp/Working Format 하위 스타일이 필요할 때
`product-ui-patterns.md`	프로덕트 크롬(사이드바, 명령 팔레트, 리스트 항목, 모달)을 구축할 때 — 코드 우선 Linear 스타일 컴포넌트
`typography.md`	타이프 스케일 설정, 글꼴 선택, 또는 헤드라인이 약해 보일 때
`color.md`	팔레트 구축, 강조색 선택, 또는 대비가 맞지 않을 때
`layout.md`	페이지 구조화 시 — 컨테이너, 간격 스케일, 그리드 분할, 반응형 전략
`anti-patterns.md`	출력물이 일반적으로 느껴질 때; 수정 사항이 포함된 전체 거부 카탈로그
`components.md`	버튼, 양식, 카드, 내비게이션, 푸터 구축 시
`motion.md`	애니메이션, 전환, 스크롤 효과 추가 시
`content.md`	카피, 마이크로카피, 오류 메시지, CTA 작성 시
`accessibility.md`	대화형 요소 구축 시 — 의미론, 키보드, 포커스, ARIA, 테스트 프로토콜
`performance.md`	페이지 디자인 완료 후 — 예산, 글꼴, 이미지, Core Web Vitals
`imagery.md`	페이지에 시각적 요소가 필요할 때 — CSS/SVG 구성, 사진 방향, 아이콘 시스템, 파비콘/og-image
`code-style.md`	코드 작성 시 — 네이밍, 주석, 오류 처리, 코드에 대한 안티슬롭 패턴
`checklist.md`	페이지 완료 선언 전 — 최종 QA

기본 로드: aesthetics.md + typography.md + color.md + layout.md + code-style.md + checklist.md. B2B SaaS 로드: aesthetics.md §1을 minimal-ui-patterns.md로 교체 + 크롬용 product-ui-patterns.md 추가. 에디토리얼 로드: aesthetics.md §2를 editorial-patterns.md로 교체. 브루탈리스트 로드: aesthetics.md §4를 brutalist-patterns.md로 교체. 프로덕트/앱 로드: product-ui-patterns.md + accessibility.md 추가 (대화형 표면은 접근성 기준을 높임). 코드 중심 로드: code-style.md 추가 (에이전트가 코드를 작성할 때 항상 권장).

8. 한 줄 요약

디자인이 좋으면, 디자인을 알아채지 못할 것입니다. 나쁘면, 즉시 알아차릴 것입니다.

당신의 임무는 전자입니다. 슬롭은 후자입니다.

AkyRayy/프론트엔드-디자인-스킬-for-AI

프론트엔드-디자인-스킬-for-AI란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서