Claude Code가 만든 랜딩 페이지가 다 비슷할 때 design-taste-frontend로 방향부터 고르는 법

스킬을 켜면 방향을 고른 페이지가 나온다

스킬 없이는 파일 하나를 한 번에 쓰고 끝났습니다. 스킬을 켜면 방향을 고르고 사진을 찾은 뒤, 검사에 걸린 곳을 고치는 데 시간을 씁니다. 사진의 출처와 라이선스는 페이지 아래에 적힙니다.

design-taste-frontend는 페이지를 짜기 전에 디자인 방향부터 정하게 하는 스킬입니다. Claude Code 프롬프트에 두 줄을 차례로 보내면 깔립니다. 스크립트를 돌리므로 Node 22 이상과 Chrome·Edge·Chromium 중 하나가 있어야 합니다.

github.com↗

GitHub - Leonxlnx/taste-skill: Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages

Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages - Leonxlnx/taste-skill

1/plugin marketplace add Leonxlnx/taste-skill
2/plugin install taste-skill@taste-skill

요청은 평소처럼 보냅니다. 스킬 이름을 적지 않아도 랜딩 페이지 요청이면 Claude가 스킬을 불러옵니다.

1개인 가계부 앱 "한 줄"의 랜딩 페이지를 만들어 줘. 하루 지출을 한 줄로 적으면 한 달이 정리되는 앱이야. 결과는 이 폴더의 index.html 로.

방향 셋 중 하나를 골라 브라우저로 잰다

이 스킬은 후보를 스크립트가 뽑게 하고, 모델에게는 고르는 일만 맡깁니다.

가계부 요청에서는 이 셋이 나왔습니다. 방향마다 페이지를 어떤 장치로 짤지 한 문단이 붙습니다.

셋은 매번 무작위로 뽑혀서, 같은 요청을 한 번 더 보냈을 때는 다른 셋에서 split stage를 골랐습니다. 방향을 고르면 스크립트가 그 방향에 맞춘 서체·색·섹션 구성을 이어서 정해 줍니다.

스킬 없이 만든 페이지는 같은 검사기에서 제목 위 작은 머리말, 그림자, 그라디언트, 사진 없음이 FAIL로 잡힙니다.

스킬 없음스킬 켬

스킬을 켠 쪽에는 영상이 없다는 WARN 하나만 남았습니다. Claude는 주제에 맞는 영상을 찾지 못해 넣지 않았다고 답변에 적었습니다. 검사기는 움직이는 요소가 여덟 개 미만이면 FAIL로 잡습니다.

드롭다운처럼 움직임 하나의 값을 다듬는 일은 emil-design-eng 글에서 다뤘습니다.

1claude plugin update taste-skill@taste-skill