디자인 스킬 AI Design Skills 써 보기

AI에게 디자인 규칙을 통째로 심어 줍니다

AI Design Skills는 Claude Code, Cursor, Codex 같은 AI 코딩 도구가 읽는 디자인 규칙을 모아 둔 GitHub 저장소입니다. 별은 10,166개이고 라이선스는 MIT입니다.

지금 들어 있는 스킬은 하나, landing-page-design입니다. 랜딩 페이지에 무엇을 쓰고 어떻게 짜고 어떻게 꾸밀지를 한 파일에 적어 둔 규칙집입니다. 10월 27일의 마지막 커밋은 design-to-motion 스킬을 별도 저장소로 옮겼습니다.

설치는 파일 하나를 옮기는 일입니다

README가 알려 주는 방법은 도구마다 다릅니다. Claude Code는 스킬 폴더째 복사하고, Cursor는 규칙 파일로 내려받습니다.

# Claude Code
mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/

# Cursor
mkdir -p .cursor/rules
curl -o .cursor/rules/landing-page-design.md \
  https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/landing-page-design/SKILL.md

Codex는 AGENTS.md, Windsurf는 .windsurfrules, Cline은 .clinerules에 SKILL.md 내용을 붙여 넣으라고 안내합니다. 터미널이 없으면 Claude.ai 프로젝트에 파일을 올리면 됩니다.

규칙집은 두 부분으로 나뉩니다

SKILL.md는 431줄입니다. 앞부분(A)은 전략과 구조입니다. 무엇을 물어볼지, 페이지를 어떤 순서로 짤지, 헤드라인과 버튼 문구를 어떻게 쓸지, 검색 노출은 어떻게 할지를 다룹니다. 뒷부분(B)은 시각 규칙입니다. 여기가 꽤 깐깐합니다.

글쓰기 규칙도 있습니다. 문장 안에 하이픈을 쓰지 않고, 마지막 줄에 단어 하나만 남기지 않고, "revolutionize"나 "effortless" 같은 상투어를 금지합니다. 둥글게 처리하는 값, 호버와 포커스 같은 상태, 404 페이지와 약관 링크 같은 마무리 항목까지 적혀 있습니다.

프롬프트 두 개로 만들어 봤습니다

저장소에는 결과 예시가 없습니다. 그래서 제가 이 글을 쓰며 SKILL.md를 읽고, 규칙대로 페이지를 직접 만들었습니다. 제품 이름 Ledgerly와 Tracelight는 데모용으로 지어낸 것입니다. 첫 번째 프롬프트는 이렇습니다.

Build a landing page for Ledgerly,
an invoicing app for freelancers.
The primary action is starting
a free trial.

두 번째는 다크 테마입니다.

Build a dark theme landing page
for Tracelight, a command line
log search tool for backend
developers. The primary action is
installing it with Homebrew.

두 프롬프트로 나온 결과입니다. 눌러서 크게 볼 수 있습니다.

규칙이 결과에 어떻게 드러나는지 보면 이렇습니다. 글꼴은 Geist 한 가지이고, 히어로 제목은 680px 안에서 의미 단위로 줄이 바뀝니다. 제목 글자에만 그라데이션이 있고 배경은 평평합니다. 다크 테마 배경은 정해 둔 색 중 #181818을 썼습니다. 태그라인 구간은 단어가 앞에서부터 하나씩 진해지도록 만들었고, 사진은 그 도중의 모습입니다.

의견

규칙은 분명하고 따라 하기 쉽습니다. 다만 두 가지는 알고 시작하는 편이 낫습니다.

먼저 샘플은 제가 만든 것이라, 설치한 에이전트가 같은 결과를 낸다는 보증이 아닙니다. 모델과 도구에 따라 다를 겁니다. 설치 명령도 README에 적힌 그대로 옮겼을 뿐 이 글을 쓰며 직접 실행해 보지는 않았습니다.

다음으로 글꼴 규칙입니다. 제가 알기로 허용 목록(Geist, Manrope, Poppins)에는 한글 글리프가 없습니다. 한국어 페이지에 그대로 쓰면 다른 글꼴로 대체돼서 "한 가지 글꼴" 규칙이 깨집니다. 그래서 위 샘플도 영어 카피로 만들었습니다. 한국어 서비스라면 이 부분은 직접 고쳐야 합니다.

저라면 일단 한 프로젝트에만 넣어 보겠습니다. 마음에 안 드는 규칙은 파일에서 바로 지우면 됩니다.

이번 주에 다루지 못한 소식도 있습니다

• 같은 제작자의 redesign-skill은 이미 있는 사이트를 고칠 때 쓰는 짝꿍 스킬이고, 별은 407개입니다
• landing-page-design은 taste-skill의 일부를 가져다 다시 쓴 것이라고 밝힙니다. taste-skill의 별은 103,898개입니다
• 마지막 커밋이 옮겼다는 design-to-motion의 새 저장소는 제가 확인한 시점에 찾을 수 없었습니다

출처

• elayadesign/ai-design-skills, 저장소와 README
• landing-page-design SKILL.md
• 마지막 커밋