AI 코딩 도구가 랜딩 페이지와 피그마 디자인을 일관된 스타일로 만들게 하는 규칙 모음
AI 코딩 도구에 '랜딩 페이지를 만들어줘'라고 말하면, 디자인 감각이 없는 결과물이 나오는 경우가 많습니다. 이 저장소는 AI가 디자인을 할 때 지켜야 할 기준을 마크다운 파일로 정리해 두어, 도구가 일관된 레이아웃과 색상 체계를 적용하도록 합니다. 필요한 스킬 폴더만 골라 설치하면, 클로드 코드나 커서 같은 도구가 해당 스타일을 자동으로 따릅니다.
랜딩 페이지와 피그마, 두 가지 스킬
현재는 랜딩 페이지 제작과 피그마 디자인 두 가지 스킬이 있습니다. 랜딩 페이지 스킬은 질문을 통해 요구사항을 파악한 뒤, 페이지 구조와 전환을 유도하는 문구, 그리고 타이포그래피와 여백, 모서리 둥글기, 모션까지 포함한 시각 시스템을 구축합니다. 피그마 스킬은 간격과 색상 변수, 텍스트 스타일, 자동 레이아웃, 모든 상태를 갖춘 컴포넌트를 갖춘 실제 구조의 디자인을 생성합니다. 또한 토큰이 바뀌면 자동으로 업데이트되는 기초 프레임도 함께 만듭니다. 기존 사이트 개편용 스킬은 이 저장소가 만들어지기 전에 별도로 관리되므로 여기에는 없습니다.
스킬 설치와 도구별 적용
설치를 위해 Node.js가 필요합니다. npx skills add elayadesign/ai-design-skills 명령을 실행하면 저장소에 있는 스킬 목록이 표시되고, 설치할 스킬과 적용할 AI 도구를 선택하도록 묻습니다. 특정 스킬만 설치하거나 특정 도구만 지정하려면 플래그를 사용할 수 있습니다. 설치된 스킬은 클로드 코드의 경우 .claude/skills/ 폴더에, 커서와 코덱스 등 다른 도구의 경우 .agents/skills/ 폴더에 저장됩니다. 이후 npx skills update 명령으로 변경 사항을 반영할 수 있습니다. 설치 후엔 평소처럼 자연어로 원하는 디자인을 요청하기만 하면 됩니다.
디자인 값만 바꿔 내 스타일로
각 스킬 파일 하단에는 폰트, 색상, 간격, 모션 등 디자인 값이 한 섹션에 모여 있습니다. 이 저장소를 포크한 뒤 해당 섹션만 수정하면, 스킬의 나머지 부분도 자동으로 수정된 값에 맞춰 작동합니다. 복잡한 로직을 건드릴 필요 없이 디자인 토큰만 바꾸면 내 브랜드나 프로젝트에 맞는 스타일로 AI의 출력을 조정할 수 있습니다.
라이선스와 활용 범위
이 저장소는 MIT 라이선스를 따릅니다. 자유롭게 사용, 포크, 배포, 그리고 이걸로 만든 것을 판매할 수 있으며, 출처 표기 의무도 없습니다. landing-page-design 스킬은 Leon Lin의 taste-skill에서 콘텐츠 현실성과 모션 아이디어를 참고했으며, 이 부분도 MIT 라이선스입니다. AI 코딩 도구를 사용하면서 디자인 일관성이 부족하다고 느낀다면, 이 스킬을 적용해 보기를 권합니다. 다만 현재 제공되는 스킬은 랜딩 페이지와 피그마 디자인에 한정되어 있으므로, 다른 유형의 디자인 작업에는 직접 확장해야 합니다.
