AI Design Skills는 코딩 에이전트에게 랜딩 페이지 디자인 규칙을 파일 하나로 건넵니다 | DAKER 커뮤니티

손그림풍 그림에서 나무 책상 위 스케치북에 랜딩 페이지 와이어프레임이 그려져 있고, 블록 사이에 간격을 재는 자 표시와 화살표가 있으며, 연필을 든 로봇 손이 체크리스트에 표시를 하고 있고, 왼쪽에 「랜딩 페이지 디자인 규칙을 에이전트에게 한 파일로」 제목이 적힌 10초 모션 영상 미리보기입니다. 오른쪽 위에 GitHub 공식 로고가 있습니다
설명용 생성 이미지입니다. 10초 모션 영상 원본은 글 아래 첨부 파일에 있습니다.

2026년 10월 28일 오전 11시 37분(한국 시간) GitHub Trending 일간 1위는 elayadesign/ai-design-skills입니다. 한 줄로 말하면 AI Design Skills는 Claude Code, Cursor, Codex, Windsurf처럼 마크다운 규칙 파일을 읽는 코딩 도구에 넣어 쓰는 디자인 스킬 모음이고, 지금 들어 있는 landing-page-design 스킬은 랜딩 페이지의 구조와 문구부터 글꼴, 간격, 모서리, 움직임 값까지 파일 하나로 정해 줍니다. 해커톤 데모 페이지나 프로젝트 소개 페이지를 에이전트로 만드는 DAKER 참가자라면 바로 넣어 볼 만합니다.

AI Design Skills는 무엇인가

README는 이 저장소를 AI 코딩 도구를 위한 디자인 스킬 모음이라고 소개합니다. 스킬마다 폴더 하나로 독립돼 있어 필요한 것만 골라 설치하는 방식입니다. 2026년 10월 28일 오전 11시 37분(KST) GitHub API 기준 스타는 9,564개, 포크는 681개이고, 라이선스는 MIT입니다. 저장소 안의 파일이 마크다운뿐이라 GitHub에는 주요 언어가 표시되지 않습니다. 저장소는 2026년 7월 29일(KST)에 만들어졌습니다.

README 표에 올라 있는 스킬은 현재 landing-page-design 하나이고, 더 추가될 예정이라고 적혀 있습니다. 이 스킬의 SKILL.md는 두 부분으로 나뉩니다. Part A는 전략과 구조로, 만들기 전에 물어볼 질문(주요 행동, 대상 고객, 전환 기준, 증거 자료), 첫 화면부터 FAQ와 마지막 버튼까지 12개 구역의 순서, 네 가지 레이아웃 유형, 전환 규칙과 카피 공식, 검색 노출 판단을 다룹니다. Part B는 반드시 지키는 시각 체계로, 글꼴은 Geist, Manrope, Geist Mono, Poppins만 쓰고 Inter, Roboto, Arial, Open Sans, Helvetica는 쓰지 않으며, 글자 크기는 Tailwind 기본 단계에, 간격은 0에서 96px까지 정해진 13개 값에만 맞추도록 합니다.

그 밖에도 배경에 그라데이션을 쓰지 않는 규칙, 안쪽 모서리 반경을 바깥 반경에서 간격을 빼서 정하는 공식, Phosphor, Solar, Iconamoon 아이콘만 쓰는 규칙, cubic-bezier(0.22,1,0.36,1) 곡선과 500ms를 기본으로 하는 움직임 규칙, 움직임 줄이기 설정 존중, 호버와 포커스와 로딩과 빈 화면과 오류 상태를 모두 갖추라는 규칙, 개인정보 처리방침 링크와 404 페이지와 메타 태그 같은 출시 전 점검 목록이 들어 있습니다. SKILL.md 끝의 크레딧에는 일부 내용을 MIT 라이선스인 Leonxlnx/taste-skill에서 가져와 다시 썼다고 밝혀 두었습니다.

정보 카드에 GitHub Trending 일간 1위, elayadesign/ai-design-skills, 스타 9,564개, MIT 라이선스, landing-page-design 스킬, 글꼴 Geist와 Manrope와 Poppins, 간격 토큰 0에서 96px, Claude Code 설치 명령, Cursor와 Codex와 Windsurf 지원이 영어로 적힌 이미지입니다
2026년 10월 28일 오전 11시 37분(KST) GitHub 기준 AI Design Skills 저장소 정보와 설치 방법입니다.
AI Design Skills의 핵심은 에이전트에게 예쁘게 만들어 달라고 부탁하는 대신, 글꼴과 간격과 움직임 값을 미리 정한 규칙 파일을 주고 그 안에서만 고르게 한다는 점입니다.

AI Design Skills는 왜 지금 뜨나

첫째, 코딩 에이전트에게 디자인 기준을 주는 스킬이 한꺼번에 주목받고 있습니다. 2026년 10월 28일 오전 11시 37분(KST) GitHub Trending 일간 목록에서 1위가 이 저장소, 2위가 Nutlope/hallmark, 5위가 pbakaus/impeccable로 상위 다섯 개 중 세 개가 AI 도구의 디자인을 다루는 저장소였습니다. 같은 시각 트렌딩 페이지에 표시된 이 저장소의 오늘 받은 스타는 1,395개였습니다.

둘째, 규칙이 구체적인 숫자로 적혀 있습니다. 좋은 디자인을 말로 설명하는 대신 허용하는 글꼴, 글자 크기 단계, 간격 값, 움직임 곡선을 표로 정해 두었기 때문에 에이전트가 값을 지어낼 여지가 적습니다. 규칙과 프레임워크 기본값이 부딪히면 이 파일을, 규칙과 사용자의 명시적 요청이 부딪히면 사용자를 따르라는 우선순위도 적혀 있습니다.

셋째, 최근에도 계속 손보고 있습니다. 커밋 기록을 보면 10월 26일(KST) 크레딧을 추가하며 겹치는 부분을 다시 썼고, 10월 25일에 추가했던 design-to-motion 스킬은 10월 28일 오전 0시 57분(KST)에 별도 저장소로 옮겼습니다. 랜딩 페이지를 새로 만들지 않고 기존 사이트를 고치려는 경우에는 같은 작성자의 redesign-skill 저장소를 쓰라고 README가 안내합니다.

AI Design Skills는 어떻게 써 보나

README의 Claude Code 설치 방법은 저장소를 내려받은 뒤 원하는 스킬 폴더를 프로젝트의 .claude/skills 아래에 복사하는 것입니다. 아래 명령의 스킬 이름 자리에는 landing-page-design을 넣습니다.

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에서는 SKILL.md를 .cursor/rules 폴더에 받아 두거나 설정의 Rules for AI에 붙여 넣습니다.

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를 프로젝트에 올리거나 대화에 첨부해 이 파일을 따르라고 하면 된다고 README에 적혀 있습니다. SKILL.md의 출력 형식에 따르면 처음부터 랜딩 페이지를 만들 때 에이전트는 코드를 쓰기 전에 페이지 개요, 첫 화면 문구, 혜택, 세 단계 사용법, FAQ, 검색 노출 판단, 레이아웃 추천을 먼저 내놓고, 그 뒤 첫 화면부터 한 구역씩 만듭니다.

팀의 디자인 값으로 바꾸고 싶다면 저장소를 포크해서 스킬 파일 아래쪽의 디자인 값 구역만 고치면 됩니다. README는 이 구역의 글꼴, 색, 간격, 움직임 값만 바꾸면 나머지 규칙이 그대로 따라온다고 설명합니다.

AI Design Skills는 어디에 쓰면 좋나

첫째, 해커톤 결과물 소개 페이지를 만들 때입니다. 하나의 제안, 하나의 대상, 하나의 주요 행동이라는 원칙과 첫 화면에 경쟁하는 버튼을 두지 말라는 규칙은 심사위원이 짧은 시간에 서비스를 이해해야 하는 데모 페이지에 그대로 들어맞습니다.

둘째, 팀원마다 다른 도구를 쓸 때입니다. 같은 SKILL.md를 Claude Code, Cursor, Codex에 각각 넣으면 누가 어느 구역을 만들어도 글꼴과 간격 값이 같은 표에서 나오므로 페이지가 한 사람이 만든 것처럼 맞춰집니다.

셋째, 디자인 규칙을 스킬 파일로 쓰는 방법을 배울 때입니다. 금지 목록과 허용 값 표, 마지막 점검 목록으로 이어지는 SKILL.md 구성은 대회용 시각화 대시보드나 발표 자료 규칙을 직접 스킬로 만들려는 팀에게 좋은 본보기가 됩니다. MIT 라이선스라 고쳐 쓰기도 자유롭습니다.

다만 지금은 스킬이 landing-page-design 하나뿐이고, 규칙이 Tailwind 단계를 기준으로 적혀 있어 다른 CSS 방식을 쓰는 프로젝트라면 값을 옮겨 적용해야 합니다. 여러분은 코딩 에이전트에게 페이지 디자인을 맡길 때 어떤 규칙을 가장 먼저 정해 두시나요? 써 본 디자인 스킬이나 규칙 파일이 있다면 댓글로 나눠 주세요.

출처