Skills는 Anthropic에서 제시한 문서형 패키지이며, AI 에이전트가 특정 목표를 달성하기 위해 복잡한 업무를 자동화하도록 구성되어있다. Anthropic에서 제시했기 때문에 Claude Code에서 선제적으로 등장했으나 Claude Code가 아니더라도 쓸 수 있다.
위 URL은 다양한 스킬을 한번에 모아보고 마음에 드는 걸 골라볼 수 있는 마켓플레이스로, 여기에 UIUX 디자인과 프론트엔드 관련 스킬이 있길래 한번 가져다가 사용해보기로 했다. 쓰는 김에 좀 재미있는 걸 해보고 싶어 이 기술 블로그 디자인을 갈아엎어보기로 했다.
Anthropic에서 제공하는 frontend-design 스킬을 발견했다. html/css 레이아웃과 UI를 예쁘게 스타일링하는 데 쓸 수 있는 스킬이라고 하니 해당 스킬을 블로그 작업폴더에 넣어 사용해보기로 했다.
skills 폴더를 다운받아 직접 폴더에 넣을 수도 있지만, 터미널 npx 명령을 통해서도 다운받을 수 있다. skills를 기술 블로그 작업 폴더 안에 포함시켰다.
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Frontend Aesthetics Guidelines
Focus on:
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
frontend-design 스킬은 위와 같은 내용을 포함하고 있다. 작업하기 전에 의도, 톤, 사용성 등을 먼저 고려하고, 폰트, 컬러 및 테마, 인터랙션 등의 디테일을 생각해서 작업하라는 가이드라인이다.
가이드라인에 맞게 작업에 들어가기 전 내 의도를 묻는 것을 확인할 수 있었다. 마침 하고싶은 UI 디자인이 있어서 키워드를 따로 던져주었다.
Claude Code가 작성한 계획은 위와 같다. 이대로 작업을 승인하고 끝낼때까지 누워있었다.
작업이 완료된 화면이다. 생각보다 윈도우95 스타일을 너무 충실하게 가져와서 놀랐다. 반응형 처리도 잘 되어있어서 모바일 화면에서도 문제없이 블로그를 볼 수 있게 되었다.
일일이 디자인을 고려하고 css를 고치는 과정을 거치는 것이 UIUX 디자인/퍼블리싱 단계에서는 필수였는데, 이제는 별다른 명령어도 없이 키워드만 던져서 2~30분 만에 이 정도로 디자인을 바꾸는 것이 가능해졌다. 더 많은 실험적인 시도도 가능하겠다는 걸 다시금 느꼈다.
또한 skills는 단순 마크다운 파일이기 때문에 내가 원하는 방식 혹은 사내 프로젝트에서 정한 규칙을 기반으로 skills를 만들거나 업데이트해서 반영하는 것이 가능하다는 것을 느꼈다. 이번 리디자인 프로젝트에서 사용한 skills는 기본 규칙일 뿐, 여기서 나만의 규칙을 덧붙인다면 맞춤형 skills로 사용이 가능할 것이다.