프론트엔드 디자인 스킬

AI가 만든 웹페이지가 다 보라색 그라데이션인 이유를 고칩니다

같은 요청(동네 카페 원두 정기구독 랜딩 페이지, 가격 3개, 신청 버튼, 자주 묻는 질문 3개)으로 만든 두 페이지입니다. "스킬 없이"는 흔한 기본값 스타일, "스킬 적용"은 이 스킬의 SKILL.md를 그대로 따라 만든 결과입니다.

무엇을 하나요

• 디자인을 업종과 소재에서 끌어오게 합니다. 원두 구독이면 생두, 볶은 콩, 크래프트지 색처럼요.
• AI가 자주 빠지는 기본값(보라색 그라데이션, 똑같은 카드 세 장, 크림 배경과 테라코타 등)을 목록으로 갖고 있어서 피하게 합니다.
• 버튼 문구는 실제로 일어나는 일을 말하게 합니다. "신청하기" 대신 "월 2회 구독 신청하기".
• Claude Code에서는 example-skills 묶음으로 설치되며, 다른 예제 스킬 11개가 함께 들어옵니다.

설치

/plugin marketplace add anthropics/skills

/plugin install example-skills@anthropic-agent-skills

git clone --depth 1 https://github.com/anthropics/skills.git
mkdir -p ~/.agents/skills
cp -R skills/skills/frontend-design ~/.agents/skills/