/frontend-design
AI에게 디자인 감각을 입히는 슬래시 한 줄
이건 뭐예요?
인테리어 업체에 집 꾸미기를 맡기는 장면을 떠올려 보세요. "모던하게요"라고만 말하면 결과물이 천차만별이지만, "화이트 톤 미니멀 + 무드등 + 원목 가구"처럼 구체적인 스타일 이름을 대면 원하는 결과에 훨씬 가까워지죠.
/frontend-design은 바로 그 인테리어 스타일북 같은 역할을 하는 Claude Code 스킬(skill, 특정 작업을 위한 AI 지침 세트)이에요. Anthropic(앤쓰로픽, 클로드를 만든 회 사)이 직접 만들어 공식 배포한 플러그인이고, 2026년 4월 기준 45만 회 이상 설치된 인기 스킬입니다.
이 스킬을 켜 두면 "랜딩 페이지 하나 만들어줘"라고 시키더라도 Claude가 코드를 쓰기 전에 먼저 네 가지를 알아서 점검해요.
- 목적(Purpose) — 이 화면은 누구를 위한 건지
- 톤(Tone) — 어떤 미학 방향으로 갈 건지 (아래에서 자세히 다룹니다)
- 제약(Constraints) — 기술적으로 지켜야 할 조건이 있는지
- 차별점(Differentiation) — 기억에 남을 특별한 요소가 뭔지
이 네 단계를 거치고 나면, 평범한 "AI가 만든 티 나는" 결과물 대신 의도가 담긴 프로급 디자인이 나옵니다. 폰트 선택부터 색상 팔레트, 애니메이션, 여백까지 전부요.
핵심을 한 줄로 줄이면 이래요. "AI에게 디자인 감각을 입혀주는 스타일북."
우리는 이렇게 쓰고 있어요
지금 여러분이 보고 계신 이 사이트, AI//STUDY도 /frontend-design 스킬의 도움을 받아 만들어졌어요.
HOLOGRID 테마의 탄생 과정. 이 사이트의 테마 이름은 HOLOGRID예요. 블레이드 러너 2049의 커맨드 센터에서 영감을 받은 다크 테마인데, 배경은 깊은 우주 네이비(#030510), 포인트 색은 홀로그램 시안(#00fff0)이에요. 처음에 "시안 색 홀로그램 느낌의 다크 테마로 만들어줘"라고 시켰을 때, /frontend-design 스킬이 활성화되면서 Claude가 단순히 색만 바꾸는 게 아니라 폰트(Chakra Petch + Share Tech Mono), 카드 테두리의 반투명 효과, 마우스를 올리면 빛나는 시안 그라데이션까지 한 세트로 디자인해 줬어요.
홈 화면 카드 레이아웃. ai.d-onworks.com 홈 화면에 보이는 네 개의 카드(LECTURES, GITHUB REPOS, VIBE SKILLS, PROFILE)는 각각 번호와 라벨이 붙은 그리드 구조예요. 이런 "정보 밀도가 높은데 정돈된 느낌"은 /frontend-design의 Spatial Composition(공간 구성) 가이드라인이 작동한 결과물입니다. 비대칭 배치, 의도적인 여백, 그리드를 깨는 포인트 요소 같은 원칙이 적용된 거예요.
핵심은 "스타일 이름"이에요. 저도 코딩은 1줄도 모르지만, "Retro-Futuristic 느낌으로 해줘"라든가 "Glassmorphism 스타일 카드로 바꿔봐" 같은 디자인 스타일 이름을 알게 되면서 주문이 정확해졌어요. 그래서 아래 섹션에서 이 스타일 이름들을 하나씩 소개해 드리려 합니다.
디자인, 이름을 알면 주문이 쉬워요
/frontend-design 스킬은 **다양한 미학 방향(Aesthetic Direction)**을 내장하고 있어요. 이 방향을 하나 골라서 "이 스타일로 해줘"라고 말하면 Claude가 해당 미학 방향에 맞춰 폰 트, 색상, 애니메이션, 레이아웃을 자동으로 구성합니다.
아래에서 대표적인 5가지를 자세히 소개하고, 나머지는 표로 정리할게요.
1. Glassmorphism (글래스모피즘)
반투명 유리 위에 빛이 번지는 느낌.
배경에 그라데이션이나 이미지를 깔고, 그 위에 backdrop-blur(배경 흐림 효과)가 적용된 반투명 카드를 올리는 스타일이에요. 마치 서리 낀 유리창 너머로 풍경을 보는 느낌이죠. Apple의 iOS나 macOS 인터페이스에서 자주 볼 수 있어요.
- 특징: 반투명 카드, 흐림 배경, 부드러운 그림자, 밝은 테두리
- 어울리는 곳: 대시보드, SaaS(서비스형 소프트웨어) 랜딩 페이지, 금융 앱
2. Brutalism (브루탈리즘)
꾸미지 않은 날것 그대로의 힘.
건축에서 온 용어예요. 콘크리트를 그대로 드러내는 건축 양식처럼, 웹에서는 두꺼운 테두리(3~4px), 거친 그림자, 깨진 듯한 그리드, 큼직한 타이포그래피(글꼴 디자인)를 사용해요. "예쁘게" 보다 "강렬하게"가 목표인 스타일입니다.
- 특징: 두꺼운 보더(테두리), 하드 섀도(딱딱한 그림자), 깨진 그리드, 대담한 색상 대비
- 어울리는 곳: 포트폴리오, 아티스트 사이트, 실험적 브랜드 페이지
3. Retro-Futurism (레트로 퓨처리즘)
과거가 상상한 미래, 네온과 CRT 모니터 감성.
1980년대 SF 영화에서 본 것 같은 네온 라인, 스캔라인 효과, 터미널 폰트가 특징이에요. 사이버펑크(Cyberpunk) 느낌이라고 해도 좋습니다. 참고로 지금 보고 계신 AI//STUDY 사이트의 HOLOGRID 테마가 바로 이 방향에 가까워요. 시안 네온 + 다크 배경 + 모노스페이스 폰트(글자 폭이 일정한 글꼴) 조합이 전형적인 레트로 퓨처리즘이거든요.
- 특징: 네온 색상, 어두운 배경, 글로우(발광) 효과, 모노스페이스 폰트, 스캔라인
- 어울리는 곳: 게임 사이트, 개발자 도구, AI/테크 서비스, 음악 스트리밍
4. Minimalist (미니멀리스트)
남는 건 여백, 빠지는 건 군더더기.
여기서의 미니멀은 "대충 만든 게 아니라 극도로 정제된"이라는 뜻이에요. 요소 하나하나의 크기, 위치, 간격을 밀리미터 단위로 조절해서 "아무것도 더할 것이 없고, 아무것도 뺄 것이 없는" 상태를 만드는 거예요. 스위스 디자인(Swiss Design)이라고도 불립니다.
- 특징: 넉넉한 여백, 정밀한 타이포그래피, 제한된 색상(2~3색), 숨은 그리드
- 어울리는 곳: 브랜드 사이트, 이력서/포트폴리오, 프리미엄 제품 페이지
5. Soft/Pastel (소프트 파스텔)
파스텔 톤의 부드럽고 따뜻한 세계.
연분홍, 연보라, 민트, 베이비블루 같은 파스텔 색상을 기반으로 둥글둥글한 모서리와 부드러운 그림자를 사용해요. 보는 것만으로 마음이 편안해지는 스타일이죠. 건강, 교육, 어린이 관련 서비스에서 자주 보입니다.
- 특징: 파스텔 팔레트(연한 색 조합), 큰 라운드 코너(둥근 모서리), 부드러운 그림자, 친근한 일러스트
- 어울리는 곳: 교육 플랫폼, 헬스케어 앱, 키즈 서비스, 라이프스타일 블로그
나머지 스타일 한눈에 보기
| 스타일 이름 | 한 줄 특징 | 어울리는 사이트 유형 |
|---|---|---|
| Maximalist Chaos (맥시멀리스트) | 화려한 색, 빽빽한 요소, 시선을 압도하는 에너지 | 이벤트 페이지, 뮤직 페스티벌, 패션 브랜드 |
| Organic/Natural (오가닉) | 자연에서 온 곡선, 어스 톤(흙/나무 색), 유기적 형태 | 친환경 브랜드, 식품/음료, 웰니스 |
| Luxury/Refined (럭셔리) | 골드/블랙 팔레트, 세리프 폰트(삐침 있는 글꼴), 절제된 고급감 | 주얼리, 호텔, 프리미엄 구독 서비스 |
| Playful/Toy-like (플레이풀) | 통통 튀는 색상, 큰 아이콘, 장난감 같은 3D 요소 | 게이미피케이션 앱, 스타트업 랜딩, SNS |
| Editorial/Magazine (에디토리얼) | 잡지 레이아웃, 대형 타이포, 사진 중심 | 미디어, 뉴스레터, 콘텐츠 플랫폼 |
| Art Deco/Geometric (아르데코) | 1920년대 기하학 패턴, 금속 텍스처, 좌우 대칭 | 럭셔리 브랜드, 건축, 부동산 |
| Industrial/Utilitarian (인더스트리얼) | 기능 중심, 노출 배관 같은 구조 노출, 무채색 | 개발자 도구, 관리자 패널, B2B SaaS |
이 외에도 커뮤니티에서 자주 언급되는 확장 스타일이 있어요.
| 스타일 이름 | 한 줄 특징 | 어울리는 사이트 유형 |
|---|---|---|
| Neomorphism (뉴모피즘) | 눌린 버튼/볼록한 카드, 밝은 배경 위 미세한 음영 | IoT 대시보드, 스마트홈 컨트롤러 |
| Claymorphism (클레이모피즘) | 부풀린 3D 점토 느낌, 캔디 파스텔 팔레트 | 어린이 교육, 캐릭터 브랜드 |
| Aurora Mesh Gradient (오로라) | 천천히 움직이는 메쉬 그라데이션(색이 섞이는 배경), 유리 오버레이 | AI 서비스, 크리에이티브 도구 |
| Dark OLED Luxury (OLED 럭셔리) | 진짜 검정(#000) 배경, OLED 디스플레이 최적화 | 미디어 플레이어, 갤러리, 나이트 모드 앱 |
한번 써볼까요?
/frontend-design은 Anthropic 공식 플러그인이에요. Claude Code 안에서 /plugin 명령으로 설치할 수 있습니다. 공식 마켓플레이스(Anthropic이 관리하는 플러그인 저장소)에 등록되어 있어서, 별도 주소를 입력할 필요가 없어요.
/plugin install frontend-design@claude-plugins-official
설치 후에는 별도로 뭘 켤 필요가 없어요. Claude Code에게 프론트엔드 관련 작업을 시키면 스킬이 자동으로 활성화됩니다. 또는 직접 슬래시 커맨드로 호출할 수도 있어요.
/frontend-design 핀테크 스타트업 랜딩 페이지 만들어줘. 다크 톤에 에디토리얼 느낌으로.
이렇게 스타일 이름 을 함께 적어주면 Claude가 해당 미학 방향에 맞춰 폰트, 색상, 레이아웃, 애니메이션을 결정한 뒤 코드를 작성합니다.
준비물은 Claude Code가 설치되어 있는 환경이면 충분해요. Claude Code가 아직 없다면 공식 설치 가이드를 먼저 참고해 주세요.
클로드 코드 터미널에서는 이렇게
아래 명령어를 클로드 코드가 실행되고 있는 터미널(PowerShell, 명령 프롬프트, Mac/Linux Terminal)에 그대로 복사해서 붙여 넣고 Enter만 누르세요.
# 1. Claude Code가 설치되어 있는지 확인 (버전 번호가 뜨면 OK)
claude --version
# 2. Claude Code를 실행 (프로젝트 폴더에서)
claude
Claude Code가 실행되면, 아래 명령어를 Claude Code 대화창 안에서 입력하세요.
# 3. frontend-design 플러그인 설치 (Anthropic 공식 마켓플레이스에서)
/plugin install frontend-design@claude-plugins-official
설치 확인은 /plugin 명령어를 입력하면 열리는 플러그인 관리 화면의 Installed 탭에서 할 수 있어요. "frontend-design"이 목록에 보이면 성공입니다.
설치가 끝났으면 아래처럼 말로 시켜보세요.
/frontend-design AI 지식 아카이브 홈 화면을 Glassmorphism 스타일로 만들어줘
Claude가 알아서 반투명 유리 카드, 배경 블러, 부드러운 그라데이션을 조합한 HTML/CSS 코드를 만들어 줄 거예요. 다른 스타일을 써보고 싶으면 "Glassmorphism" 자리에 위에서 소개한 스타일 이름을 바꿔 넣으면 됩니다.
몇 가지 활용 예시를 더 드릴게요.
# 브루탈리즘 스타일 포트폴리오
/frontend-design 개인 포트폴리오 페이지. Brutalism 스타일로. 두꺼운 보더와 대담한 타이포.
# 럭셔리 스타일 제품 페이지
/frontend-design 프리미엄 향수 브랜드 제품 페이지. Luxury/Refined 톤으로.
# 파스텔 톤 교육 플랫폼
/frontend-design 초등학생 코딩 교육 대시보드. Soft/Pastel 스타일, 친근한 일러스트 느낌으로.
스타일 이름을 모르겠으면 그냥 분위기를 말해도 돼요. "차갑고 미래적인 느낌", "따뜻하고 자연적인 느낌"처럼 톤만 던져도 Claude가 가장 가까운 미학 방향을 골라서 적용 합니다.
혹시 플러그인을 삭제하고 싶다면 Claude Code 대화창에서 /plugin 명령어를 입력한 뒤 Installed 탭에서 해당 플러그인을 선택하고 삭제하면 됩니다.
이런 분께 추천해요
/frontend-design은 "멋진 웹 화면을 만들고 싶은데 디자인 용어도, 코드도 모르는" 모든 분을 위한 스킬이에요.
-
"홈페이지 하나 만들고 싶은데 어떤 스타일이 있는지 모르겠어요"라는 비개발자. 위에서 소개한 스타일 이름 중 마음에 드는 걸 하나 골라서 말하면 끝이에요. 디자이너에게 시안을 의뢰하는 것처럼, AI에게 스타일 방향만 알려주면 됩니다.
-
스타트업 대표인데 랜딩 페이지를 빠르게 만들고 싶은 분. "핀테크 서비스 랜딩 페이지, Glassmorphism 스타일로" 한 줄이면 production-grade(바로 배포 가능한 수준) 코드가 나와요. 디자이너 + 퍼블리셔 없이도 첫 번째 버전을 몇 분 안에 볼 수 있습니다.
-
바이브 코딩을 배우는 중인데 "AI가 만든 티"를 없애고 싶은 분. 이 스킬 없이 만들면 매번 비슷한 보라색 그라데이션, Inter 폰트, 똑같은 카드 레이아웃이 나와요.
/frontend-design을 켜두면 Claude가 매번 다른 폰트 조합과 색상 팔레트를 시도하기 때문에 AI 슬롭(AI slop, AI가 만든 티가 나는 천편일률적 결과물)에서 벗어날 수 있습니다.
참고 링크
- Frontend Design 공식 플러그인 페이지 (Anthropic)
- claude-code/plugins/frontend-design (GitHub)
- SKILL.md 원본 (GitHub)
- Claude Code Skills 공식 문서
- Frontend Aesthetics Cookbook (Anthropic)
▸개정 이력1건
- v12026-04-12초판
이 글이 도움이 되었나요?