ai-design-skills 딥다이브
— 마크다운 한 장으로 AI에게 디자인 규칙 가르치기

1프로젝트 한줄 요약

ai-design-skills는 랜딩 페이지를 만들 때 AI가 따라야 할 질문·구조·카피·시각 규칙을 마크다운 스킬 파일로 배포하는 저장소입니다. 설치라고 해 봐야 폴더나 파일을 AI 도구가 읽는 위치에 복사하는 것이 전부입니다.

1-1. 저장소에 실제로 있는 것

고정 커밋의 추적 파일은 4개입니다. README·LICENSE·.gitignore와 랜딩 페이지 SKILL.md가 있으며 빌드·테스트·패키지 설정은 없습니다. 이전 문서의 모션 제작·MP4·GIF 출력은 현재 저장소에 포함된 기능이 아닙니다.

2왜 주목받는가

2026-10-25에 확인한 GitHub 스타는 3,422개, 포크는 242개였습니다. 이번 2026-10-27 09:00 KST Daily 수집에서는 모멘텀 4위였습니다. 저장소는 2026-07-29에 만들어졌으니 석 달이 채 안 된 셈입니다. 이 숫자는 관심도일 뿐이고, 결과물 품질을 비교한 실험은 저장소 안에 없습니다.

2-1. “무엇을 말할지”와 “어떻게 보일지”를 한 파일에 묶었다

대부분의 디자인 규칙 문서는 색·폰트 같은 시각 토큰만 다룹니다. 이 스킬은 Part A에서 질문 목록(Intake)과 페이지 구조·카피 공식을 먼저 정하게 하고, Part B에서 시각 규칙을 적용하게 합니다. 본문 첫머리가 “Work through A before touching B”라고 못 박습니다.

2-2. 규칙이 숫자로 되어 있다

“깔끔하게”가 아니라 “여백은 0·2·4·8·12·16·24·32·40·48·64·80·96px만”, “폰트는 Geist·Manrope·Geist Mono·Poppins만”처럼 닫힌 목록입니다. AI가 해석할 여지가 작아 결과가 일정해지고 사람이 검수하기도 쉽습니다.

2-3. 여러 도구에서 같은 파일을 쓴다

README는 Claude Code(.claude/skills/), Cursor(.cursor/rules/), Codex(AGENTS.md), Windsurf(.windsurfrules), Cline(.clinerules), 그리고 터미널 없는 Claude.ai(프로젝트에 업로드)까지 복사 위치를 표로 안내합니다. 파일 형식이 그냥 마크다운이라 가능한 일입니다.

2-4. 비교

README는 같은 제작자의 별도 저장소 redesign-skill(기존 사이트를 고치는 용도)을 짝으로 소개합니다. 새로 만들 때는 이 저장소, 고칠 때는 그쪽이라는 분업입니다.

3기술 스택 전체 지도

GitHub이 주 언어를 판정하지 못할 만큼 실행 패키지 소스가 없습니다. SKILL.md에 포함된 예시 코드와는 구분해야 합니다. 아래 표는 파일 자체의 기술과, 파일이 AI에게 요구하는 기술을 나눠 정리한 것입니다.

정리하면 의존하는 라이브러리는 “없음”이고, 결과물의 기술 선택만 규정합니다. 지침이 Tailwind를 전제하므로 Tailwind를 쓰지 않는 프로젝트에서는 B1·B3의 클래스 표기를 CSS 값으로 번역해 읽어야 합니다.

4아키텍처 심화 분석

4-1. 우선순위 규칙이 가장 중요한 한 줄이다

Scope 절은 충돌 순서를 정합니다. 프레임워크 기본값과 이 파일이 부딪치면 이 파일이 이기고, 이 파일과 사용자의 직접 요청이 부딪치면 사용자가 이깁니다. 규칙 문서가 사람의 명령을 가로막지 않게 하는 안전장치입니다.

4-2. 설계 패턴 네 가지

4-2-1. 이번 모션 규칙 개정에서 달라진 점

B7은 메뉴 링크를 24px 아래에서 60ms 간격으로 올리되 전체 시퀀스를 400ms로 제한합니다. 섹션 진입은 32px 이동과 600~800ms 페이드로 한 번만 재생하고, 모션 감소 설정에서는 이동을 페이드로 바꿉니다. 위치·크기 속성(top·left·width·height)의 애니메이션을 금지합니다. 호버의 색·투명도 변화는 별도로 300ms, 최소 200ms를 제시해 “transform과 opacity만”이라는 문장과 적용 범위를 함께 읽어야 합니다.

README와 스킬 끝에 taste-skill의 아이디어를 바탕으로 재작성했다는 크레딧과 MIT 고지가 추가됐습니다. README 말미의 “No attribution needed”만 보고 원본의 저작권·허락 고지를 지워도 된다고 해석하지 마세요.

4-3. 모서리 공식 예시

바깥 카드 rounded-2xl = 16px, 안쪽 여백(gap) = 8px
안쪽 요소 radius = 16 - 8 = 8px  → rounded-lg

gap이 32px 이상이면 공식 적용 안 함
결과가 2 이하이면 안쪽은 각지게 둠

4-4. 숨은 충돌도 있다

B1의 “본문에 하이픈(-)을 쓰지 말 것”은 카피 규칙이지만 영어 합성어(예: high-converting)까지 막는 것인지는 문서가 설명하지 않습니다. 실제 SKILL.md 본문도 “high converting”처럼 하이픈 없이 적어 스스로 규칙을 따릅니다. 한국어 서비스에 적용할 때는 이 규칙이 거의 의미가 없으니 빼도 됩니다.

2026-10-28 변경: 모션 스킬 분리

커밋 메시지는 모션 스킬을 별도 저장소로 옮겼다고 설명합니다. 실제 diff에서도 skills/design-to-motion/SKILL.md가 삭제됐고 README에는 landing-page-design만 남았습니다. 새 위치 URL은 이 고정 커밋의 README에 없으므로 추정해 연결하지 않습니다. 예전 폴더 복사 명령으로 모션 제작 지침까지 설치된다고 기대하면 안 됩니다.

5디렉토리 구조 해부

현재 스킬 폴더는 landing-page-design 하나입니다. README의 향후 확장 계획과 현재 추적 파일 목록을 구분합니다.

5-1. SKILL.md 읽는 순서 추천

머리말 description은 사실상 호출 규칙이어서 “building, editing, styling, reviewing, or writing copy for ANY landing page… even when the user does not mention design”처럼 폭넓게 적혀 있습니다. 이 때문에 UI 작업이면 거의 항상 불려 나옵니다. 의도치 않게 자주 켜지는 것이 싫다면 이 문장을 좁히세요.

6학습 포인트

6-1. 좋은 지침은 “금지 + 대체”를 짝으로 준다

“Inter를 쓰지 말라”에서 끝내지 않고 “Geist, Manrope, Poppins를 쓰라”를 함께 줍니다. 금지만 있으면 AI는 다른 평범한 값을 고르고, 허용만 있으면 기존 습관이 새어 나옵니다. 아이콘(B6)도 같은 형식입니다.

6-2. 질문을 먼저 한 번에 던지게 한다

A1은 “Ask only for what is missing, and ask in one batch”라고 지시하고, 답이 없으면 가정을 한 줄로 밝힌 뒤 진행하라고 합니다(“Do not stall the build”). 질문이 많아 작업이 멈추는 것도, 묻지 않고 짐작하는 것도 피하는 균형입니다.

6-3. 한 번에 다 만들지 않고 섹션 단위로

A6의 작업 순서(Hero → Benefits → How it works → Proof → FAQ → Final CTA)는 “Never rebuild the whole page on each iteration”와 한 쌍입니다. 긴 생성물을 고칠 때 전체를 다시 쓰지 않고 한 구획씩 diff를 작게 유지하라는 원칙은 디자인 밖의 AI 작업에도 그대로 옮길 수 있습니다.

6-4. “AI 티” 목록을 직접 만들어 보는 연습

개정된 B8은 실제 초안 문장, 제품의 독자·지역에 맞는 인명과 업종에 맞는 브랜드명, 서로 다른 날짜를 요구합니다. “revolutionize·supercharge·effortless” 같은 홍보 상투어를 금지하고, 오류 메시지에 실패 원인과 다음 행동을 쓰게 합니다. 시안용 숫자를 자연스럽게 만들라는 지침은 실제 실적을 발명해도 된다는 근거가 아닙니다. 내 분야에서 AI가 반복하는 표현을 모아 같은 형식의 목록으로 만들면 자기만의 스킬이 됩니다.

6-5. 한 곳에서 값을 바꾸면 전체가 따라오게

README의 “Make it yours”에 따르면 폰트·색·여백·모션 값은 파일 하단 한 구역에 있어서 포크 후 그 구역만 고치면 나머지가 따라갑니다. 다만 실제 SKILL.md에서는 값이 B1~B7 곳곳에 흩어져 있어, 한 구역에 모여 있다는 설명과는 다릅니다. 직접 고치기 전에 해당 절을 모두 찾아 보세요.

7하드웨어 / 시스템 요구사항

위 표는 랜딩 페이지 스킬을 복사하는 조건입니다. 별도 영상 제작 도구는 이 저장소의 현재 설치 요구사항이 아닙니다.

비용은 쓰는 AI 도구의 요금제에 달려 있으며 이 저장소 자체는 MIT 라이선스로 무료입니다. 랜딩 페이지 스킬은 약 18.8KB라 한 번 불러올 때마다 대화 문맥(컨텍스트)의 상당 부분을 차지하는 점은 알아 두세요. 토큰 수는 도구마다 달라 확인하지 못했습니다.

8직접 해볼 수 있는 실습 과제

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/

# 예: 소스에서 임의 크기 값을 찾아 보기
grep -nE "text-\[[0-9]+px\]|font-size: *[0-9.]+(px|rem)" -r src/

9관련 기술 심화 학습 로드맵

더 나아가려면 짝 저장소 redesign-skill에서 기존 사이트를 진단하는 지침이 어떻게 다른지 비교해 보세요. 두 스킬을 나란히 읽으면 “새로 만들기”와 “고치기”가 같은 규칙 위에서 서로 다른 순서로 일한다는 점이 보입니다. 단, 후자는 이 분석에서 직접 읽지 않아 내용은 확인하지 못했습니다.

10핵심 키워드 사전

11참고 링크

11-1. 저장소

• elayadesign/ai-design-skills — 공식 저장소
• SKILL.md · 커밋 ded7efc9d5c02761c41a03caf3b78f9259ab8828 — 본문 431줄
• README · 커밋 ded7efc9d5c02761c41a03caf3b78f9259ab8828 — 설치와 도구별 위치
• elayadesign/redesign-skill — 기존 사이트를 고치는 짝 저장소

11-2. 관련 기술 문서

• Claude Code 스킬 문서 — 스킬 폴더와 머리말 규칙
• Tailwind font-size · border-radius — B1·B3가 기준으로 삼는 스케일
• MDN IntersectionObserver — 스크롤 연동 모션의 표준 방법
• MDN text-wrap — balance·pretty 값 설명

외부 문서는 바뀔 수 있습니다. 이 글의 설명은 커밋 ded7efc9d5c02761c41a03caf3b78f9259ab8828의 파일에 맞췄습니다.

현재 상태 (2026-10-28 소스 재검토)