# 디자인 스킬 AI Design Skills 써 보기

별 10,166개를 받은 GitHub 저장소 AI Design Skills는 AI 코딩 도구에 랜딩 페이지 디자인 규칙을 심어 줍니다. 설치 방법과 쓰는 순서, 프롬프트 두 개로 만든 샘플을 정리했습니다.

- Language: ko
- Published: 2026-10-28
- Tags: automation, design-skills, agent-skills
- URL: https://devs7ud.io/blog/ai-design-skills-landing-page
- Translation (en): https://devs7ud.io/en/blog/ai-design-skills-landing-page-en.md

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

[AI Design Skills](https://github.com/elayadesign/ai-design-skills)는 Claude Code, Cursor, Codex 같은 AI 코딩 도구가 읽는 디자인 규칙을 모아 둔 GitHub 저장소입니다. 별은 10,166개이고 라이선스는 MIT입니다.

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

![저장소 소개를 상징하는 일러스트](/blog-img/ai-design-skills-landing-page/1.png)

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

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

```bash
# 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/
```

```bash
# 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 프로젝트에 파일을 올리면 됩니다.

**설치부터 결과까지**

- 스킬 고르기
- → 도구가 읽는 곳에 두기
- → 평소 말로 요청하기
- → 규칙대로 나온 결과

_출처: AI Design Skills README_

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

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

**뒷부분\(B\)이 못 박은 것**

| 영역 | 정해 둔 것 |
| --- | --- |
| 글꼴 | Geist, Manrope, Geist Mono, Poppins만 씁니다. Inter, Roboto, Arial, Open Sans, Helvetica는 쓰지 않습니다 |
| 글꼴 수 | 사이트 하나에 한 가지. 기울임꼴은 쓰지 않습니다 |
| 간격 | 표에 적힌 13단계 값만 씁니다\(0에서 96px까지\) |
| 배경 | 그라데이션을 쓰지 않습니다. 히어로 제목 글자만 예외입니다 |
| 히어로 제목 | 최대 너비 680px, 줄바꿈은 뜻이 끊기는 곳에서 합니다 |
| 아이콘 | Phosphor, Solar, Iconamoon. Material 아이콘은 쓰지 않습니다 |
| 모션 | 감속 곡선 하나를 쓰고 위치 변화는 500ms, transform과 opacity만 움직입니다 |
| 필수 구간 | 히어로 아래 어딘가에 큰 글씨 태그라인 구간을 둡니다. 단어가 하나씩 진해집니다 |

_출처: landing-page-design SKILL.md_

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

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

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

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

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

```text
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.
```

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

![Ledgerly 첫 화면, 밝은 테마](/blog-img/ai-design-skills-landing-page/d1.png "프롬프트 1의 첫 화면. 이 글을 위해 만든 샘플이고 가상의 제품입니다")

![Ledgerly의 태그라인 구간](/blog-img/ai-design-skills-landing-page/d2.png "프롬프트 1의 태그라인 구간. 단어가 하나씩 진해지는 중입니다")

![Tracelight 첫 화면, 다크 테마](/blog-img/ai-design-skills-landing-page/d3.png "프롬프트 2의 첫 화면. 이 글을 위해 만든 샘플이고 가상의 제품입니다")

![Tracelight의 태그라인 구간](/blog-img/ai-design-skills-landing-page/d4.png "프롬프트 2의 태그라인 구간")

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

## 의견

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

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

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

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

![규칙을 따라 한 줄씩 세우는 모습을 상징하는 일러스트](/blog-img/ai-design-skills-landing-page/2.png)

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

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

### 출처

- [elayadesign/ai-design-skills](https://github.com/elayadesign/ai-design-skills), 저장소와 README
- [landing-page-design SKILL.md](https://github.com/elayadesign/ai-design-skills/blob/main/skills/landing-page-design/SKILL.md)
- [마지막 커밋](https://github.com/elayadesign/ai-design-skills/commit/ded7efc9d5c02761c41a03caf3b78f9259ab8828)