Claude Code로 랜딩 페이지 디자인 업그레이드하는 두 가지 방법
frontend-design 스킬을 활용해서 뻔한 AI 디자인에서 벗어나기
왜 frontend-design 스킬인가요?
Claude가 기본 상태로 만드는 UI는 솔직히 뻔합니다. Inter 폰트에 보라색 그라디언트, 예측 가능한 레이아웃... 이른바 "AI 슬롭(AI Slop)" 디자인이죠.
frontend-design 스킬은 이걸 해결하기 위해 만들어진 스킬입니다. Claude에게 "Bold한 디자인 방향을 잡고, 타이포그래피·색상·레이아웃을 의도적으로 설계해라"는 지침이 담겨 있습니다. 아래 두 가지 방법으로 활용할 수 있습니다.
방법 1 — Anthropic 공식 스킬 설치해서 사용하기
Step 1 — 플러그인 마켓플레이스 등록
Claude Code에서 아래 명령어로 Anthropic 공식 마켓플레이스를 등록합니다.
/plugin marketplace add anthropics/claude-code
Step 2 — frontend-design 스킬 설치
/plugin install frontend-design@claude-code-plugins
설치가 완료되면 Claude가 자동으로 스킬을 인식합니다. 별도로 활성화할 필요 없이 관련 요청을 하면 알아서 불러옵니다.
💡 설치 확인은 What Skills are available? 로 할 수 있습니다.
Step 3 — 프롬프트 작성
Use the frontend design skill to improve the design of 무슨무슨 page이것만으로도 frontend-design 스킬이 트리거되면서 기존과 확연히 다른 디자인 결과물이 나옵니다.
방법 2 — Dribbble 레퍼런스 스크린샷과 함께 사용하기
스크린샷을 레퍼런스로 제공하면 색상, 레이아웃, 타이포그래피를 참고해서 훨씬 구체적이고 일관된 디자인을 만들어 줍니다.
Step 1 — Dribbble에서 레퍼런스 찾기
dribbble.com 에 접속해서 마음에 드는 디자인을 찾습니다.
검색 팁:
- landing page, SaaS website, hero section 등으로 검색
- 내 프로젝트 분위기와 어울리는 색상·스타일로 고르면 더 좋습니다
- 마음에 드는 디자인을 스크린샷으로 캡처합니다 (Mac: Cmd + Shift + 4)
Step 2 — Claude Code에서 프롬프트 작성
캡처한 스크린샷을 Claude Code 채팅창에 붙여넣고 (Mac: Cmd + V), 아래 프롬프트를 작성합니다.
Let's use the frontend design skill to improve the design of [무슨무슨 page]
following the attached screenshot [스크린샷 붙여넣기]두 방법 비교
방법 1 방법 2
| 난이도 | 간단 | 약간의 준비 필요 |
| 결과물 | Claude가 자유롭게 디자인 | 레퍼런스 기반 디자인 |
| 추천 상황 | 방향이 열려있을 때 | 원하는 스타일이 있을 때 |
이런 것들이 달라집니다
frontend-design 스킬이 적용되면 Claude는 코딩 전에 먼저 디자인 방향을 잡습니다.
- 타이포그래피: Arial·Inter 대신 개성 있는 디스플레이 폰트 + 본문 폰트 조합
- 색상: 뻔한 보라 그라디언트 대신 의도적인 색상 시스템
- 레이아웃: 대칭형 대신 비대칭, 겹침, 대각선 흐름
- 애니메이션: 페이지 로드 시 스태거드 리빌, hover 인터랙션
- 배경: 단색 대신 그라디언트 메시, 노이즈 텍스처, 레이어드 투명도