design-on

KO | EN

gitlite — search

#macos #monitoring #hacktoberfest #rag #open-source #mysql #react #list #cross-platform #large-language-models

(★ 9)

한 문장이면 완성된 웹페이지가 나오는 디자인 오케스트레이터. 제작 4트랙·검수 3트랙 병렬 실행 + 안티패턴 59종 기계 검사로 'AI 티'를 0건까지 잡는다. Impeccable·tasteskill·UI Skills·emil-skill 내장. Claude Code / Codex 지원.

파일 탐색기

ZIP 다운로드

- plugin.json
- - ci.yml
- design-on-copywriter.md
- design-on-critic.md
- design-on-korean.md
- design-on-motion.md
- design-on-photographer.md
- design-on-researcher.md
- design-on.md
- fonts.json
- layouts.json
- palettes.json
- photo-recipes.json
- premium.json
- presets.json
- templates.json
- tools.json
- - index.html
- - index.html
- - index.html
- - class.html
  - index.html
  - works.html
- - index.html
- pick.mjs
- publish.sh
- setup.ps1
- setup.sh
- slopcheck.mjs
- update-vendor.sh
- - SKILL.md
- - cafe-desktop.png
  - salon-desktop.png
  - shop-desktop.png
  - studio-desktop.png
  - tax-desktop.png
- global-setup.mjs
- repository.test.mjs
- serve-examples.mjs
- visual.spec.mjs
- - .upstream-commit
  - LICENSE
- - .upstream-commit
  - LICENSE
  - NOTICE.md
  - package-lock.json
  - package.json
  - SKILL.md
- - .upstream-commit
  - AGENTS.md
  - LICENSE
- - .upstream-commit
  - LICENSE
- - .upstream-commit
  - LICENSE
.gitignore
AGENTS.md
CHANGELOG.md
checklist.md
context-notes.md
CREDITS.md
LICENSE
package-lock.json
package.json
PLAYBOOK.md
playwright.config.mjs
README.md
SKILL.md

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**한 문장만 말하면 완성된 웹페이지를 만들어주는 디자인 오케스트레이터입니다.**

"카페 하는데 보라색 계열 사이트 만들어줘" 한 마디면 구조·색상·글꼴·사진·문구까지 전부 정해서 바로 열어볼 수 있는 HTML 파일이 나옵니다.

**디자인을 몰라도 됩니다. 바이브 코딩이 처음이어도 됩니다.** 받아서 실행하고, 질문 몇 개에 답하고, 마지막에 상호명과 전화번호를 불러주시면 끝입니다.

**Claude Code와 Codex 양쪽에서 똑같이 쓸 수 있습니다.**

현재 **v4.5.0**입니다. 무엇이 바뀌었는지는 [CHANGELOG.md](CHANGELOG.md)에 정리해 두었습니다.

---

## 설치

Node.js만 있으면 됩니다. 없으면 [nodejs.org](https://nodejs.org)에서 먼저 받으세요.

```bash
git clone https://github.com/linkonai2026-kr/design-on.git
cd design-on
bash scripts/setup.sh
```

Windows 파워셸이라면 마지막 줄만 이렇게 합니다.

```powershell
powershell -ExecutionPolicy Bypass -File scripts/setup.ps1
```

**이 세 줄이 전부입니다.** 디자인 지식은 이미 저장소 안에 다 들어 있어서 따로 받을 게 없습니다. `setup` 스크립트가 하는 일은 두 가지입니다.

1. **안티패턴 검사기를 켭니다.** HTML/CSS를 파싱할 파서 4종을 깝니다. 이걸 건너뛰면 검사기가 **축소 모드**로 떨어져서, 같은 파일에서 26건 잡을 걸 4건만 잡습니다. 대비·중첩카드·크림배경·헤딩건너뜀이 전부 빠집니다
2. **에이전트에 명령어를 등록합니다.** `~/.claude`와 `~/.codex`를 찾아서 슬래시 명령·스킬·서브에이전트 6종을 넣습니다. 있는 것만 넣고 없으면 조용히 건너뜁니다

끝나면 바로 이렇게 쓰면 됩니다.

```
/design-on 카페 하는데 보라색 계열 사이트 만들어줘
```

**저장소 폴더를 옮기면 `setup`을 다시 실행하세요.** 등록된 파일이 이 폴더를 절대경로로 가리키고 있습니다.

Claude Code 플러그인으로 등록하고 싶다면 이 폴더 경로를 마켓플레이스에 추가해도 됩니다. `setup`을 돌렸다면 굳이 안 해도 됩니다.

### 검사기만 따로 돌리기

design-on으로 만들지 않은 페이지에도 쓸 수 있습니다.

```bash
node scripts/slopcheck.mjs 아무_폴더/
```

### 저장소 품질 검사

공개 예제와 배포 파일의 회귀 검사는 아래 명령으로 재현할 수 있습니다.

```bash
npm ci
npm ci --prefix vendor/impeccable
npx playwright install chromium
npm test
```

GitHub Actions도 같은 검사를 실행합니다. 로컬 CSS·이미지 링크, `pick.mjs` 공개 명령, 예제 넷의 전체 모드 `slopcheck`, 레이아웃 아키텍처가 서로 다른 치수를 갖는지, 구조 선택과 교체 테스트가 지침에 살아 있는지, 375px·1280px 가로 스크롤과 제목 고아 글자, 대표 화면 스크린샷을 확인합니다.

스크린샷 비교는 허용치가 넉넉합니다(`maxDiffPixelRatio: 0.12`). Windows에서 만든 기준 이미지를 리눅스 CI에서 맞춰야 해서 그렇습니다. **레이아웃이 무너졌는지 보는 연기 감지기지 픽셀 회귀 테스트가 아닙니다.** 정확한 판정은 가로 스크롤 검사와 `slopcheck`가 합니다.

---

## 쓰는 법

### 1단계. 한 문장으로 말합니다

**Claude Code**

```
/design-on 카페 하는데 보라색 계열 사이트 만들어줘
```

**Codex** — 슬래시 없이 그냥 말하면 됩니다.

```
카페 하는데 보라색 계열 사이트 만들어줘
```

### 2단계. 질문 몇 개에 답합니다

design-on이 먼저 팔레트 DB를 뒤져서 조건에 맞는 배색을 찾아옵니다. 그 다음 **딱 한 번, 3개 이하의 질문**을 묶어서 던집니다.

**배색 후보는 화면에 실제 색으로 보여드립니다.** HEX 코드만 나열하면 색을 상상할 수 없으니까요. 미리보기 화면이 브라우저에서 열리고, 거기서 A~F 후보의 색을 직접 보고 고르시면 됩니다.

```
어울리는 배색을 6개 골라 화면에 띄웠습니다. 색을 보고 골라주세요.

1. 배색을 골라주세요 (화면의 A~F 중에서)
   A. Orchid/Amethyst — 연보라 배경 + 진한 자주 텍스트
      차분하고 단정합니다. 카페·베이커리에 무난합니다.
   B. Purple Queen — 크림 배경 + 선명한 보라
      밝고 활기찹니다. 젊은 층 타겟이면 이쪽입니다.
   C. Midnight Plum — 라일락 + 미드나잇 플럼
      묵직하고 고급스럽습니다. 단가가 높은 곳에 어울립니다.
   D. Champagne/Coffee — 샴페인 베이지 + 위스키 브라운
      따뜻하고 고급스럽습니다. 인테리어·브랜드에 잘 어울립니다.
   E. Alabaster Cream/Rosewood — 크림 + 빈티지 로즈우드
      부드럽고 정감 있습니다. 베이커리·공방에 어울립니다.
   F. Terracotta Clay/Olive — 테라코타 + 올리브
      자연스럽고 견고합니다. 공방·리빙 브랜드에 어울립니다.

2. 어떤 분위기가 좋으세요?
   A. 차분하고 조용한 — 여백을 넓게, 사진은 적게, 명조체 제목
   B. 밝고 활기찬 — 사진을 크게, 대비를 강하게
   C. 빈티지 감성 — 종이 질감, 세리프 서체
   D. 모던하고 깔끔한 — 단색 배경, 큰 글씨, 미니멀 그리드

3. 이 페이지에서 가장 중요한 목적은 뭔가요?
   A. 방문 유도   B. 메뉴·가격 안내   C. 브랜드 인상   D. 예약·문의 접수

상호명이 있으면 같이 알려주세요.
```

여기에 `1-A, 2-A, 3-A, 상호는 달빛다방` 이런 식으로 **한 번에 답하면 됩니다.**

**여기서 묻는 건 이게 전부입니다.** 페이지 구조, 글꼴 조합, 여백, 사진, 문구는 묻지 않습니다. 저장소 안에 넣어둔 구조 10종·팔레트 90세트 이상·서체 페어링 9종·사진 레시피에서 **답하신 내용에 맞는 것을 골라 알아서 조립합니다.** 그래서 질문이 세 개로 끝납니다.

귀찮으면 **"알아서 해줘"**라고 해도 됩니다. 첫 번째 후보와 업종 표준값으로 알아서 만듭니다.

### 3단계. 만들어진 화면을 봅니다

더 묻지 않고 끝까지 만들어서 `site/` 폴더에 저장하고 보여줍니다.

이 시점의 내용은 **아직 지어낸 값**입니다. 상호명도 전화번호도 영업시간도 그럴듯하게 채워져 있을 뿐 실제 정보가 아닙니다.

### 4단계. 실제 정보를 채웁니다

여기가 v4에서 새로 생긴 부분입니다. 예전에는 `` 주석을 남기고 끝냈습니다. **HTML을 만지기 싫어서 이 도구를 받은 사람에게 HTML을 만지라고 시키는 셈이었습니다.**

이제는 직접 물어보고 직접 채웁니다.

```
이 방향이 마음에 드시나요?

A. 좋습니다, 이대로 갈게요
  B. 대체로 좋은데 몇 군데 고치고 싶어요
  C. 느낌이 좀 아닌 것 같아요
```

```
지금 페이지에 이렇게 들어가 있습니다. 실제 값으로 바꿔주세요.
모르시거나 아직 없는 건 "패스"라고만 적어주시면 됩니다.

상호명       달빛다방              →
  전화번호     031-000-0000          →
  주소         경기 남양주시 조안면… →
  영업시간     매일 08:30–19:00      →
  휴무         월요일                →
  대표 메뉴    예가체프 5,500원 외 4종 →
```

사진도 뭉뚱그려 묻지 않습니다. 어느 자리에 뭐가 보이는지 하나씩 적고, **바꾸겠다고 하면 어떻게 바꿀지 먼저 물어본 다음에** 손댑니다.

```
사진이 세 장 들어갔습니다. 바꾸고 싶은 게 있으면 번호로 알려주세요.

1. 맨 위 큰 사진 — 나무 카운터 위 라떼 한 잔, 아침 햇살
  2. 중간 — 창가 자리와 빈 의자
  3. 아래 — 접시에 담긴 원두

전부 괜찮으면 "다 좋아요"라고만 하셔도 됩니다.
```

C를 고르시면 HTML을 고치는 게 아니라 **색·분위기·서체부터 다시 잡습니다.** 방향이 틀렸을 때 세부를 고쳐봐야 소용이 없기 때문입니다.

**끝없이 묻지는 않습니다.** 이 대화는 최대 2라운드입니다. 그 뒤로는 "전화번호 바꿔줘"처럼 편하게 말씀하시면 됩니다.

### 다른 예시

```
40대 여성 타겟 필라테스 스튜디오 페이지, 차분한 톤으로
동네 세무사무소 소개 페이지
도자기 공방 브랜드 사이트, 흙색 계열
미용실 홈페이지인데 시술 가격표가 잘 보였으면 좋겠어
```

---

## 실제 결과물

이 저장소에 위 절차를 그대로 돌려 나온 결과물이 다섯 개 있습니다. 브라우저로 바로 열어볼 수 있습니다.

**다섯을 일부러 완전히 다르게 만들었습니다.** 색만 다른 게 아니라 **구조가 다릅니다.** 같은 도구로 만들어도 가게가 가진 자산에 따라 다른 얼굴이 나와야 하기 때문입니다.

| 예시 | 업종 | 구조 | 이 가게에만 있는 것 |
|---|---|---|---|
| [`examples/cafe/`](examples/cafe/index.html) | 로스터리 카페 | 히어로 + 비대칭 2단 | 지금 문 열었는지 실시간 표시, 이번 주 로스팅 달력 |
| [`examples/studio/`](examples/studio/index.html) | 도자기 공방 | **어두운 갤러리, 멀티페이지 3장** | **Three.js 3D 기물 뷰어.** 끌어서 돌립니다 |
| [`examples/shop/`](examples/shop/index.html) | 테크 액세서리 쇼핑몰 | 상품 그리드 | 가격 비교표, 이메일 가입 폼 |
| [`examples/tax/`](examples/tax/index.html) | 세무사무소 | **문서형. 사진 0장, 히어로 없음** | 오늘 기준 다음 신고 마감 D-day 자동 계산 |
| [`examples/salon/`](examples/salon/index.html) | 미용실 | **목차 주도. 첫 화면이 곧 시술표** | 지금 예약 전화 받는지 실시간 표시 |

`examples/salon/`이 **`index-first`(목차 주도) 구조의 실물**입니다. 미용실·식당·세무처럼 "값만 확인하러 오는 곳"은 히어로가 없고 시술표가 첫 화면이어야 합니다. 카페·공방과 나란히 열어 보면 구조가 실제로 다르다는 게 보입니다.

넷의 실제 차이입니다.

| | cafe | studio | shop | tax |
|---|---|---|---|---|
| 구성 | 원페이지 | **멀티페이지 3장** | 원페이지 | 원페이지 |
| 배경 | `#FBF1FF` 연보라 | `#34150F` 진갈색 | `#F4F5FA` 연회색 | `#D1F2EB` 연민트 |
| 본문 서체 | Pretendard (산세리프) | Pretendard (산세리프) | Pretendard (산세리프) | **Gowun Batang (세리프)** |
| 제목 서체 | Nanum Myeongjo | Song Myung | Black Han Sans | Pretendard |
| 라틴·숫자 | Gambetta | Boska | Pretendard | Switzer |
| 본문 폭 | 1180px | 1240px | 1180px | **720px** |
| 사진 | 3장 | 12장 | 8장 | **0장** |
| 3D | — | **Three.js** | — | — |
| 안티패턴 | **0건** | **0건** | **0건** | **0건** |

`examples/tax/`가 v4의 요점입니다. **히어로가 없고 사진이 한 장도 없습니다.** 본문은 세리프고 제목이 산세리프로 뒤집혀 있습니다. 세무사무소에 스톡 사진을 깔면 오히려 싸구려로 보이고, 이곳에서 파는 것은 분위기가 아니라 신뢰이기 때문입니다. 그래서 조판과 표와 각주로만 만들었습니다. 같은 도구가 만든 [`examples/studio/`](examples/studio/index.html)와 나란히 열어 보시면 차이가 분명합니다.

라틴·숫자 서체는 [Fontshare](https://www.fontshare.com/)에서 가져옵니다. `1,280도`·`02-1234-5678` 같은 표기가 한글 서체의 약한 숫자로 나오지 않게 하려는 것입니다.

다만 **라틴 서체가 Fontshare 한 곳에 걸려 있는 것이 약점이었습니다.** 그쪽 CDN이 느리거나 막히면 숫자와 영문만 기본 서체로 떨어집니다. 한글은 Pretendard라 멀쩡해서 가격표와 전화번호만 무너지니 오히려 더 눈에 띕니다. 그래서 Google Fonts 다섯 개(Public Sans · Libre Franklin · Work Sans · Figtree · Mulish)를 폴백으로 넣어뒀습니다. 본문·UI 전용이고, 개성은 제목 서체에서 냅니다.

안티패턴 0건은 59개 정적 휴리스틱을 통과했다는 뜻입니다. 미적 완성도 전체를 자동으로 보증하지 않으므로, 크래프트 검수와 실제 화면 확인을 별도로 거칩니다.

`examples/studio/`는 design-on이 3D를 어디까지 하는지 보여주는 예시입니다. 물레로 뽑은 단면을 회전시켜 만든 기물이고, 마우스로 끌면 돌아갑니다. 빌드 도구 없이 `importmap`으로 Three.js를 불러와 단일 HTML에서 동작합니다. `prefers-reduced-motion`에서는 꺼지고, 스크립트가 죽어도 본문은 그대로 읽힙니다.

아래는 원페이지 예시를 만든 과정입니다.

**입력**

```
카페 하는데 보라색 계열 사이트 만들어줘
```

**아트 디렉션 카드** (STEP 2에서 확정한 것)

```
업종        카페
모드        Persuade
다이얼      VARIANCE 6 / MOTION 2 / DENSITY 3
디자인 리드  동네 단골을 위한 조용한 편집 디자인
팔레트      Orchid/Amethyst
            --bg #FBF1FF   --surface #E3D0EA   --ink #3A1C36
            --accent #9B71B2   --muted #6B4A63
            본문/배경 대비 13.68:1
서체        제목 Nanum Myeongjo / 본문 Pretendard
목적        방문 유도
구성        원페이지
```

**검증 결과**

| 항목 | 결과 |
|---|---|
| 안티패턴 기계 검사 | **5건 → 0건** |
| 대비 검사 (텍스트 34개) | **전부 통과** |
| 가로 스크롤 (375px / 1280px) | **없음** |
| 액센트 버튼 사용 | 대비 3.54:1이라 버튼 배경에서 제외, `--ink`로 대체 |

처음 검사에서 잡힌 5건은 이런 것들이었습니다. 전부 사람이 놓쳤을 법한 것들입니다.

```
cramped-padding      히어로 이미지 안 텍스트가 경계에 붙음
cramped-padding      메뉴 첫 항목이 구분선에 붙음
flat-type-hierarchy  13/14/15/16/17/19px — 여섯 단계가 너무 촘촘함
```

**카피 비교**

| AI 기본값 | design-on 결과 |
|---|---|
| 최고의 원두로 정성껏 내린 커피 | 화요일에 볶은 원두로 수요일 아침을 엽니다 |
| 편안하고 아늑한 공간 | 4인 테이블 두 개, 2인 테이블 세 개, 창가 바 자리 두 개가 있습니다 |
| 지금 바로 방문해보세요 | 매일 8시 30분에 문을 엽니다. 월요일은 쉽니다. |

---

## 어떤 형태로 나오나

세 가지 중 하나입니다. **아래로 갈수록 여는 방법이 번거로워집니다.**

| 형태 | 여는 법 | 언제 |
|---|---|---|
| **단일 HTML** ← 기본 | 파일을 더블클릭 | 소개·랜딩 페이지 대부분 |
| **멀티페이지 HTML** | 폴더를 받아 `index.html` 더블클릭 | 내용이 많거나 나눠달라고 하셨을 때 |
| **React + Vite** | 터미널에서 `npm install` → `npm run dev` | 화면에 상태가 여러 개 얽힐 때만 |

**React는 함부로 안 씁니다.** 조건 필터가 동시에 여러 개 걸리는 목록, 뒤로 가도 입력이 남아야 하는 예약 폼, 로그인 여부로 내용이 갈리는 화면 — 이럴 때만 갑니다.

"화려하게", "3D로", "움직이게"는 React 조건이 아닙니다. 그건 CDN import map으로 붙이는 Three.js나 캔버스로 처리해서 **여전히 더블클릭으로 열립니다.** [studio 예시](examples/studio/index.html)가 그렇게 만들어졌습니다.

React로 가면 사용자가 터미널을 열어야 합니다. 대부분의 소상공인에게 그건 이 도구를 못 쓰게 되는 이유입니다. 그 값을 치를 만한 화면일 때만 갑니다. 갈 때도 MUI·shadcn 같은 UI 라이브러리는 깔지 않습니다 — 깔면 모든 결과물이 그 라이브러리처럼 생기고, 그게 바로 AI 티의 다른 이름입니다.

### 한 장으로 만들까, 여러 장으로 나눌까

**기본은 원페이지입니다.** 동네 가게 소개는 대부분 스크롤 한 번으로 끝나는 게 맞습니다. 페이지를 나누면 방문자가 클릭을 한 번 더 해야 하고, 그만큼 이탈합니다.

**그렇다고 원페이지를 고집하지는 않습니다.** 이럴 때 나눕니다.

| 나누는 경우 | 예 |
|---|---|
| **말씀하시면** | "페이지 나눠줘", "메뉴는 따로 빼줘", "서브페이지도 만들어줘" |
| 한 항목마다 설명이 길 때 | 시술 15종에 각각 과정·주의사항·가격 |
| 목록과 상세가 나뉠 때 | 작품 갤러리 + 작품별 상세 페이지 |
| 계속 쌓이는 내용이 있을 때 | 공지사항, 블로그, 후기 |

이렇게 말하면 됩니다.

```
/design-on 미용실 홈페이지 만들어줘. 시술 종류가 많아서 페이지 나눠줬으면 좋겠어
```

원페이지로 만든 뒤에 나중에 나눠달라고 해도 됩니다.

**나눌 때 지키는 것들입니다.** 이걸 안 지키면 페이지가 서로 따로 노는 사이트가 됩니다.

- CSS는 `assets/style.css` 파일 하나로 공유합니다. 색 하나 고치면 전체에 반영됩니다
- 헤더와 푸터가 모든 페이지에서 똑같습니다
- 지금 보고 있는 페이지가 메뉴에 표시됩니다
- 링크는 상대경로라 폴더를 받아서 더블클릭해도 작동합니다
- 페이지마다 제목과 검색용 설명이 다릅니다
- 안쪽 페이지도 혼자 열었을 때 말이 됩니다

**페이지 수는 3~5개가 적당합니다.** 내용이 부족한데 개수를 채우려고 억지로 나누지 않습니다. 알맹이 없는 페이지 하나가 원페이지보다 나쁩니다.

```
site/
├── index.html
├── menu.html
├── contact.html
└── assets/
    ├── style.css       공통 CSS 1개
    └── hero.jpg
```

검사기는 폴더째로 돌리면 **모든 페이지를 한 번에** 검사합니다. 외부 CSS 파일도 따라가서 읽으니 검사 범위가 줄지 않습니다.

```bash
node scripts/slopcheck.mjs site/
```

---

## 어떻게 작동하나

```
                    "카페 하는데 보라색 계열로"
                              │
     STEP 1  브리프 해석 + 출력 형태 판단 + 팔레트 조회 → 질문 딱 1회
                              │
     STEP 2  아트 디렉션 확정   구조 · 모드 · 3다이얼 · 팔레트 역할 · 서체 페어링
              └── 2-0  페이지 구조를 아키텍처 10종에서 고른다
                              │
     STEP 3  ⚡병렬 제작 4트랙
              ├── 리서치    섹션 순서와 정보 위계
              ├── 카피      한국어 원문 (번역투 배제)
              ├── 사진      네이티브 생성 → Gemini → 스톡 → 타이포
              └── 모션      authored moment 딱 1개
                              │
     STEP 4  통합 빌드 → site/ (단일 HTML · 멀티페이지 · React)
                              │
     STEP 5  ⚡병렬 검수 3트랙
              ├── 기계 검사  안티패턴 59종
              ├── 크래프트   대비·여백·타이포·상태
              └── 한국어     번역투·금지어·구체성
                              │
     STEP 6  일괄 수정 → 재검사 1회
                              │
     STEP 7  보고 + 화면 보여주기
                              │
     STEP 8  완성 후 대화
              ├── 마음에 드세요?           A 좋다 / B 몇 군데 / C 아니다
              ├── 실제 정보 채우기          상호·전화·주소·영업시간·가격
              ├── 사진 하나씩 확인          바꾸려면 어떻게 바꿀지 먼저 묻기
              └── 방향 재설정 (C일 때 1회)  STEP 2로 되감기
```

**검수 루프를 돌지 않습니다.** 한 번에 고치고 한 번만 재검사합니다. 끝없이 자가 QA를 돌리면 토큰만 태우고 결과는 오히려 나빠집니다.

**하지만 사람에게는 묻습니다.** 그 둘은 다릅니다. 자가 QA는 추측 위에 추측을 쌓지만, 사용자에게 전화번호를 묻는 건 추측을 사실로 바꿉니다. STEP 8이 그 자리입니다.

---

## "AI 티"를 없애는 규칙

기계 검사가 전부는 아닙니다. 디텍터가 못 잡는 것들은 규칙으로 막습니다.

**금지**

- 가운데 정렬 큰 제목 + 버튼 2개 조합
- 이모지를 아이콘으로 쓴 3단 카드
- "최고의 경험을 선사합니다", "당신만을 위한" 같은 번역투 문구
- 모든 요소에 걸린 둥근 모서리와 옅은 그림자
- 스크롤할 때마다 걸리는 페이드인
- 꽉 찬 대칭 12칸 그리드
- 다크모드 (소상공인 사이트에 불필요합니다)

**대신 이렇게**

- 비대칭 배치, 5:7처럼 어긋난 비율
- 업종에 맞는 한글 서체 **페어링** (제목 나눔명조 + 본문 프리텐다드)
- 첫 화면을 78%만 채워서 다음 내용이 살짝 보이게
- 숫자·요일·품목명이 들어간 구체적인 문구
- 글자 크기 단계를 13 / 17 / 24px처럼 벌려서 위계를 만들기

**한국어 조판**

이걸 빠뜨리면 제목 한가운데가 갈라집니다. 브라우저는 기본적으로 한글을 글자 단위로 끊습니다.

```css
body{ word-break:keep-all; overflow-wrap:break-word; }
h1,h2,h3{
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
  text-wrap:balance;
}
```

제목에 `<br>`을 직접 넣지 않습니다. 화면 폭이 바뀌면 어긋나기 때문입니다.

제목의 마지막 줄에 한글 한 음절이나 영문 한 글자만 남는 것도 실패로 봅니다. 375px·1280px에서 실제 카피를 확인하고, 제목 칸·글자 크기·카피 순서로 조정합니다. `BALANC / E`처럼 영문 단어 자체를 쪼개는 `word-break:break-all`과 제목의 `overflow-wrap:break-word|anywhere`는 쓰지 않습니다.

**문장부호도 역할에 맞게 씁니다.** 완결된 본문 문장에는 마침표를 쓰지만, 제목·히어로 슬로건·내비게이션·버튼·탭·칩·짧은 라벨에는 마침표를 억지로 붙이지 않습니다.

### 브리프가 이깁니다

디텍터는 보라·바이올렛 액센트를 `ai-color-palette`로 경고합니다. 그런데 **사용자가 "보라색으로 해줘"라고 했으면 보라가 맞습니다.**

| 상황 | 판단 |
|---|---|
| 색을 명시했다 | 유지합니다. 보고에 "요청하신 색이라 유지했습니다"라고 남깁니다 |
| 색을 말 안 했는데 보라로 갔다 | 다시 고릅니다. 그건 취향이 아니라 반사행동입니다 |

우선순위는 **명시된 요청 > 디텍터 경고 > AI의 습관** 순입니다.

---

## 프리미엄 모드 — 고급스럽게, 인터랙티브하게

"고급스럽게", "인터랙티브하게", "모던하게", "애플처럼", "imweb처럼" 같은 말을 하면 프리미엄 모드가 켜집니다. "알아서 해줘"라고 해도 기본으로 켜집니다.

목표 품질은 [imweb 테마](https://imweb.me/theme/)와 [apple.com/kr](https://www.apple.com/kr/) 수준입니다. 대형 제품 히어로, "더 알아보기/방문하기" 2링크, 큼직한 여백, 스크롤에 반응하는 인터랙티브.

```bash
node scripts/pick.mjs premium --match "고급스럽게 세련되게"   # 레벨 판정 (off/basic/full)
node scripts/pick.mjs premium --id scroll-reveal              # 모티프 CSS/JS 조회
```

프리미엄은 장식이 아니라 행동입니다. 스크롤하면 내용이 살아나고, 호버하면 반응합니다. 단, 두 가지를 지킵니다.

- **포니테일 사다리** — 고급스럽게 만들되 과하게 짜지 않는다. JS 없이 CSS로 되는 모션은 JS를 안 쓴다. 불필요한 라이브러리·중복 코드·과잉 컴포넌트를 STEP 5에서 제거한다
- **레퍼런스는 베끼지 않는다** — imweb·apple의 구도·분위기·위계만 참고하고, 각 사용자 요청마다 독창적으로 조합해 새롭게 만든다

**프리미엄이 항상 애플 스타일이 되지는 않습니다.** imweb 테마들이 저마다 다른 얼굴을 갖는 것처럼, 업종·브랜드에 맞는 **비주얼 아키타입**을 골라 적용합니다.

| 아키타입 | 업종 | 참고 |
|---|---|---|
| 에디토리얼 웜 | 카페·공방·서점 | imweb MONDAY COFFEE·Fresh Grove |
| 다크 갤러리 | 포트폴리오·갤러리 | imweb TIME STOOD STILL·Attention |
| 네온 모던 테크 | 테크·스타트업·SaaS | imweb Volt.X·MULTIPLY |
| 클린 미니멀 | 비즈니스·에스테틱 | imweb I am Jane·WISE |
| 볼드 에디토리얼 | 쇼핑몰·패션·푸드 | imweb STORE·DIVINE |
| 소프트 네이처 | 필라테스·반려동물·키즈 | imweb Vinyasa·circle pilates |
| 코퍼레이트 트러스트 | 기업·법률·금융 | imweb GLOBAL LOGISTICS·Benuity |

```bash
node scripts/pick.mjs premium --archetype editorial-warm   # 아키타입 전체 사양
```

## 만든 후 고치는 법

완성된 사이트는 **`site/design-on.json`에 설정이 저장**됩니다. 다음에 이렇게 말씀하시면 됩니다.

- "전화번호 바꿔줘", "메뉴 하나 추가해줘" — 그냥 말씀하시면 반영합니다
- "아까 그 느낌으로 다시 만들어줘" — 저장된 색·서체·구성을 재사용해 만듭니다

---

## 사진은 어떻게 넣나

설정 없이도 됩니다. 아래 순서로 알아서 내려갑니다.

| 순서 | 방식 | 조건 |
|---|---|---|
| 1 | **에이전트 내장 이미지 생성** | Codex처럼 이미지를 직접 만들 수 있는 환경. 설정 불필요 |
| 2 | Gemini API | `GEMINI_API_KEY`를 넣어둔 경우 |
| 3 | 실사 스톡 사진 | 사진 사이트 5곳(Unsplash·Pexels·Pixabay·Pinterest·Openverse) 검색 URL을 자동 생성 |
| 4 | 사진 없이 타이포그래피로 | 위가 다 안 될 때 |

```bash
node scripts/pick.mjs photo --industry 카페   # 사진 프롬프트 + 사진 사이트 검색 URL
```

```bash
export GEMINI_API_KEY="발급받은-키"
```

**Codex에서는 키가 필요 없습니다.** 1번 경로를 먼저 씁니다.

참고로 3번 실사 사진이 AI 생성 이미지보다 "AI 티"가 덜 나는 경우가 많습니다. 한 사이트에서 안 찾아지면 다른 사이트로 넘어가며 돌려 봅니다. Pinterest는 구도·분위기 참고용입니다(핫링크가 영속적이지 않아 페이지에 직접 넣지 않습니다).

---

## 무엇이 들어 있나

### 데이터

Instagram [@suraj.dsgn](https://www.instagram.com/suraj.dsgn/)의 게시물 325개를 전부 분석해서 뽑아낸 것입니다.

| 데이터 | 수량 | 내용 |
|---|---|---|
| 디자인 툴·사이트 | **894개** | 이름, 무료·유료, 카테고리, 어울리는 업종, 공식 URL |
| 컬러 팔레트 | **93세트** | 정확한 HEX 색상값 369개, 어울리는 업종 |
| 업종별 표준 카드 | **7종** | 구조·모드·3다이얼·방문자 질문·"이 가게에만 있는 것" 아이디어 |
| 프리미엄 모티프 | **10종** | 스크롤 리빌·패럴랙스·플로팅 내비·더블베젤 카드 등 인터랙티브 레시피 |
| 비주얼 아키타입 | **7종** | imweb 테마에서 추출한 브랜드 '얼굴' — 팔레트 톤·타이포·구도·모티프 조합 |
| 템플릿 참고 사이트 | **6곳** | imweb·Framer·Webflow·Wix·Squarespace 등 + 아키타입별 참고 테마 |

색을 고를 때 감으로 정하지 않고 이 팔레트 DB에서 근거를 갖고 고릅니다. 팔레트를 고를 때 **`--auto-fix`가 대비 미달 색을 자동 보정**해, 어떤 팔레트를 골라도 본문이 안 읽히는 결과물이 나오지 않게 합니다.

### 하위 에이전트로 함께 싣는 스킬

design-on은 혼자 만든 게 아닙니다. 아래 프로젝트들의 지식과 코드를 **저장소 안에 함께 싣고** 하위 지식으로 씁니다. 전부 재배포를 허용하는 라이선스만 담았고, 원본 `LICENSE`와 커밋 해시를 그대로 보존했습니다.

| 프로젝트 | 만든 사람 | 라이선스 | design-on에서 하는 일 |
|---|---|---|---|
| [Impeccable](https://github.com/pbakaus/impeccable) | Paul Bakaus | Apache-2.0 | **안티패턴 디텍터 59종** + 품질 하한선 + 레퍼런스 25종 |
| [tasteskill](https://github.com/Leonxlnx/taste-skill) | Leonxlnx | MIT | 브리프 추론 + 3다이얼 + 디자인시스템 매핑 |
| [UI Skills](https://github.com/ibelick/ui-skills) | Julien Thibeaut | MIT | 컴포넌트·타이포·모션 제약, 접근성 |
| [emilkowalski/skill](https://github.com/emilkowalski/skill) | Emil Kowalski | MIT | 애니메이션 설계·검수, Apple 원칙 |

**Impeccable이 v1과 v2를 가르는 부품입니다.** AI 티를 사람 판단이 아니라 코드로 잡게 해준 게 이겁니다.

자세한 출처·라이선스·무엇을 어디에 쓰는지는 **[CREDITS.md](CREDITS.md)**에 있습니다.

### 있으면 쓰고 없으면 넘어가는 것

| 도구 | 상태 | 왜 |
|---|---|---|
| [lazyweb](https://github.com/aboul3ata/lazyweb-skill) | 런타임 감지 | MIT지만 호스팅 API + 토큰이 있어야 동작합니다. 껍데기만 넣는 건 정직하지 않다고 봤습니다 |
| [originkit](https://www.originkit.dev/) | 런타임 감지 | 라이선스가 명시돼 있지 않고 API 키 게이트 뒤에 있습니다. 복제하지 않고 실시간으로 가져와 **팔레트에 맞게 변형해서** 씁니다 |
| [animos.app](https://animos.app/editor) | 수동 안내 | API가 없는 브라우저 툴이라 에이전트가 대신 조작할 수 없습니다. 홍보 영상이 필요할 때 직접 쓰시라고 안내만 합니다 |

**없어도 design-on은 혼자 동작합니다.** 설치를 요구하며 멈추지 않습니다.

---

## 폴더 구조

```
design-on/
├── PLAYBOOK.md              전체 방법론. 모든 진입점이 이 파일을 읽습니다
├── AGENTS.md                Codex 등 범용 에이전트용
├── SKILL.md                 npx skills 형식
├── CREDITS.md               출처와 라이선스
├── CHANGELOG.md             버전별 변경 이력
├── LICENSE                  design-on 자체 MIT 라이선스
├── commands/design-on.md     Claude Code 슬래시 명령
├── skills/design-on/         Claude Code 스킬 (자동 발동)
├── agents/                  병렬 서브에이전트 6종
│   ├── design-on-researcher.md      섹션 구조
│   ├── design-on-copywriter.md      한국어 카피
│   ├── design-on-photographer.md    사진 확보
│   ├── design-on-motion.md          모션 1개
│   ├── design-on-critic.md          크래프트 검수
│   └── design-on-korean.md          한국어 검수
├── data/layouts.json        페이지 구조 아키텍처 10종
├── data/presets.json        업종별 표준 아트 디렉션 7종
├── data/premium.json        프리미엄 모티프 10종 + 비주얼 아키타입 7종 + 트리거 사전
├── data/templates.json      템플릿·테마 참고 사이트 6곳 + 아키타입별 참고 테마
├── data/fonts.json          서체 페어링 9종 + 라틴 폴백 5종
├── data/palettes.json       컬러 팔레트 93세트
├── data/tools.json          디자인 툴 894개
├── vendor/                  함께 싣는 스킬 5종 (라이선스 보존)
│   ├── impeccable/          디텍터 + 품질 하한선 (Apache-2.0)
│   ├── taste-skill/         브리프 추론 (MIT)
│   ├── ui-skills/           컴포넌트 제약 (MIT)
│   ├── emil-skill/          애니메이션 (MIT)
│   └── ponytail/            과잉 설계 게이트 (MIT)
├── examples/cafe/           실제 생성 결과물 (원페이지)
├── examples/studio/         실제 생성 결과물 (멀티페이지 3장 + Three.js 3D)
├── examples/shop/           실제 생성 결과물 (온라인 쇼핑몰, 상품·비교표·가입폼)
├── examples/salon/          실제 생성 결과물 (미용실, index-first 구조)
├── examples/tax/            실제 생성 결과물 (문서형 — 사진 0장, 히어로 없음)
├── tests/                   링크·CLI·레이아웃·스크린샷 회귀 검사
├── .github/workflows/ci.yml GitHub Actions 품질 검사
└── scripts/
    ├── setup.sh / .ps1      설치
    ├── slopcheck.mjs        안티패턴 검사기
    └── update-vendor.sh     업스트림 재동기화
```

지침이 `PLAYBOOK.md` 한 곳에만 있어서, 규칙을 고치면 Claude Code와 Codex 양쪽에 동시에 반영됩니다.

---

## 버전 이력

아래는 각 버전에서 무엇을 왜 바꿨는지 길게 적은 것입니다. 요약만 보시려면 [CHANGELOG.md](CHANGELOG.md)가 짧습니다.

### v4에서 뭐가 달라졌나

#### 다 비슷하게 나오던 문제를 고쳤습니다

가장 큰 결함이었습니다. 색과 글꼴은 매번 다르게 뽑아 놓고 **구조는 항상 똑같이 만들었습니다.** 히어로에 사진 한 장 깔고 왼쪽에 제목, 그 아래 섹션 서너 개, 마지막에 위치와 전화번호. 카페든 세무사무소든 도자기 공방이든 같은 모양이 나왔습니다.

**색만 바뀐 같은 페이지는 여전히 AI가 만든 티입니다.** 안티패턴 검사기는 이걸 못 잡습니다.

원인은 지침 안에 박혀 있던 고정값이었습니다. "최대 폭 1180px, 여백 20/48px, 섹션 간격 clamp(64px,10vw,128px), 히어로 78vh" — 나쁜 값은 아니지만 **모든 페이지가 이 한 벌을 입었습니다.** 업종별 섹션 순서표도 마찬가지였습니다. "카페니까 히어로-소개-메뉴-위치"는 구조를 고른 게 아니라 안 고른 것입니다.

v4는 **페이지 구조 자체를 데이터로 뽑았습니다.**

| 구조 | 어떤 페이지인가 |
|---|---|
| 에디토리얼 단 | 잡지 기사처럼 좁은 단, 사진이 단 밖으로 넘칩니다 |
| 전면 사진 연속 | 사진이 화면을 꽉 채우고 글은 사이 좁은 띠에만 |
| **목차 주도** | **히어로가 없습니다.** 첫 화면이 곧 가격표입니다 |
| 가로 스트립 | 물건이 가로로 흐릅니다. 세로 스크롤은 짧습니다 |
| 고정 분할 | 왼쪽은 붙박이로 멈춰 있고 오른쪽만 스크롤합니다 |
| 포스터 한 장 | 스크롤이 거의 없습니다. 한 화면이 전부입니다 |
| 시간축 | 순서가 페이지의 뼈대입니다 |
| 카탈로그 | 히어로 없이 바로 그리드가 깔립니다 |
| **문서형** | **사진이 한 장도 없습니다.** 글과 표로만 |
| 공간 주도 | 지도나 평면도가 중심입니다 |

**업종이 구조를 정하지 않습니다.** 이 가게가 실제로 가진 자산이 정합니다. 같은 카페라도 공간 사진이 좋은 집과 원두 목록이 자산인 집은 다른 구조로 나옵니다.

치수도 구조마다 다릅니다. 에디토리얼 단은 본문 680px에 여백 80px이고, 카탈로그는 1440px에 40px입니다.

그리고 **검수에 교체 테스트를 넣었습니다.**

> 상호명과 사진만 다른 업종 것으로 바꿔도 이 페이지가 그대로 말이 되는가?

된다면 실패로 판정합니다. 그건 이 가게의 페이지가 아니라 아무 가게에나 쓸 수 있는 껍데기니까요. **페이지마다 이 가게가 아니면 성립하지 않는 요소를 하나 만들도록** 했습니다. 카페면 지금 열었는지 실시간 표시, 공방이면 가마 여는 날까지 남은 일수, 세무사무소면 이번 달 신고 마감일 같은 것입니다. 대부분 JS 열 줄이면 됩니다.

#### 이름이 `design-on`이 되었습니다

명령어도 `/design-on`, 저장소도 [linkonai2026-kr/design-on](https://github.com/linkonai2026-kr/design-on)입니다. 예전 주소는 GitHub이 자동으로 넘겨주지만, 이미 받아두셨다면 `setup`을 한 번 다시 돌려주세요.

#### 만들고 끝내지 않습니다

v3까지의 마지막 단계는 이랬습니다.

```html

```

**이건 실패였습니다.** HTML을 만지기 싫어서 이 도구를 받은 사람에게 HTML을 만지라고 시키는 셈이었으니까요. 페이지는 90% 완성되고 나머지 10%가 숙제로 남았습니다.

v4에는 **STEP 8**이 생겼습니다. 다 만든 뒤에 직접 물어봅니다.

1. **마음에 드시는지** — A 좋다 / B 몇 군데 고치고 싶다 / C 방향이 아니다
2. **실제 정보** — 상호명·전화번호·주소·영업시간·가격을 빈칸 채우기로 한 번에 받아서 **모든 페이지에** 반영합니다
3. **사진** — 자리마다 뭐가 보이는지 적고 하나씩 확인합니다. 바꾸겠다고 하시면 **어떻게 바꿀지 먼저 여쭤본 다음에** 손댑니다
4. **C를 고르시면** HTML을 고치는 게 아니라 색·분위기·서체부터 다시 잡습니다

끝없이 묻지는 않습니다. 최대 2라운드로 잘라둡니다.

#### 설치가 한 줄로 끝납니다

`setup` 스크립트가 검사기를 켜는 것뿐 아니라 **`~/.claude`와 `~/.codex`를 찾아 명령어까지 등록합니다.** 받아서 실행하면 바로 `/design-on`이 생깁니다.

#### React도 만듭니다

단일 HTML · 멀티페이지 · React + Vite 세 형태를 지원합니다. 다만 **React는 화면에 상태가 여러 개 얽힐 때만** 씁니다. "화려하게", "3D로"는 React 조건이 아니라 CDN으로 처리해서 여전히 더블클릭으로 열리게 합니다.

---

### v3에서 뭐가 달라졌나

#### 토큰을 98% 줄였습니다

design-on에 외부 절약 도구를 붙이기 전에 자기 자신을 재봤더니 병목이 안에 있었습니다. `data/tools.json`이 **262KB, 약 87,000 토큰**입니다. 리서치 트랙이 이걸 통째로 읽으면 그 세션 예산이 거기서 끝납니다.

`scripts/pick.mjs`를 만들어 JSON 통째 읽기를 대체했습니다. 실측입니다.

| 작업 | 통째 읽기 | pick 사용 | 절감 |
|---|---|---|---|
| 팔레트 후보 3개 | 7,838 | 566 | 93% |
| 색상 툴 8개 | 82,093 | 397 | 100% |
| 서체 페어링 | 1,954 | 658 | 66% |
| **합계** | **91,885** | **1,621** | **98%** |

```bash
node scripts/pick.mjs palettes --hue 보라 --industry 카페 --limit 3
node scripts/pick.mjs fonts    --industry 카페
node scripts/pick.mjs photo    --industry 카페
```

팔레트 조회는 역할 배정(`bg`·`surface`·`ink`·`accent`·`muted`)과 대비 계산까지 끝내서 돌려줍니다. 쓸 수 없는 색이 있으면 경고까지 붙습니다.

```
warn: ["muted 후보가 4.5:1을 못 넘는다. ink를 20~30% 밝힌 색을 직접 만들어라."]
warn: ["accent가 4.5:1 미만이다. 버튼 배경으로 쓰지 말고 ink 배경을 써라."]
```

#### 숫자와 영문이 예뻐졌습니다

한글 서체는 라틴 글자와 숫자가 약한 경우가 많습니다. `1,280도`·`USB-C`·`02-1234-5678` 같은 표기에서 티가 납니다. 그렇다고 `Inter`를 쓰면 디텍터가 `overused-font`로 잡습니다.

[Fontshare](https://www.fontshare.com/)(인도 타입 파운드리, **상업 사용 무료**)를 숫자·영문 전용 서체로 넣었습니다. `<link>` 한 줄이라 폰트 파일을 저장소에 담지 않습니다.

#### 3D와 인터랙티브를 요청하면 만듭니다

기본값은 꺼둡니다. 동네 카페 페이지에 회전하는 3D 모델을 넣으면 신뢰가 떨어지고 모바일에서 느려지기 때문입니다. **하지만 원하시면 만듭니다.**

| 요청 | 레벨 | 조달 |
|---|---|---|
| "살짝 입체감" | L1 — CSS만 | 라이브러리 0개 |
| "인터랙티브하게" | L2 — 바닐라 JS + Canvas | 라이브러리 0개 |
| "3D 모델", "돌려보게" | L3 — Three.js CDN | `importmap`, 빌드 도구 없이 단일 HTML |
| "이 3D 씬 그대로" | L4 — Spline 임베드 | `<iframe>` |

레벨이 올라가도 히어로 한 곳에만 걸고, `prefers-reduced-motion`에서 정지하고, **JS가 죽어도 내용이 보여야 하고**, 기계 검사는 그대로 통과해야 합니다.

[`examples/studio/`](examples/studio/index.html)가 L3 예시입니다.

---

### v2에서 뭐가 달라졌나

v1의 문제는 하나였습니다. **결과물에서 AI 티가 났습니다.**

원인을 뜯어보니 세 가지였습니다.

**1. 검증이 없었습니다.** v1에는 "이런 건 하지 마라"는 금지 목록이 있었습니다. 그런데 그걸 지켰는지를 AI가 스스로 판단하면, 언제나 "지켰다"고 답합니다. 아무도 안 잡아줍니다.

**2. 디자인 방향을 정하는 단계가 없었습니다.** 팔레트 고르고 바로 HTML로 갔습니다. 10년차 디자이너는 그렇게 일하지 않습니다. 먼저 "이 페이지가 어떤 세계인지"를 정하고, 색·서체·여백·모션을 전부 거기에 맞춥니다.

**3. 혼자 순서대로 다 했습니다.** 리서치 → 팔레트 → 사진 → 카피 → 빌드 → 검수를 한 번에 처리하니, 뒤로 갈수록 앞의 맥락에 눌려 대충 처리됐습니다.

#### v2의 해결

| 문제 | 해결 |
|---|---|
| 검증 없음 | **안티패턴 디텍터 59종**을 내장했습니다. 생성 후 반드시 돌리고, 잡힌 건 고칩니다 |
| 방향 없음 | **아트 디렉션 단계**를 넣었습니다. 모드·다이얼·팔레트·서체를 먼저 확정합니다 |
| 순차 처리 | **제작 4트랙 · 검수 3트랙을 병렬**로 돌립니다. 각 트랙은 자기 일만 신경 씁니다 |

디텍터가 잡아내는 것들입니다. 전부 사람 눈이 아니라 코드가 판정합니다.

```
gradient-text        그라디언트로 칠한 글자
side-tab             카드 왼쪽 굵은 컬러 보더
nested-cards         카드 안의 카드
dark-glow            오프셋 없는 컬러 글로우 그림자
cream-palette        반사적으로 고른 크림·베이지 배경
ai-color-palette     보라·바이올렛 기본값
hero-eyebrow-chip    제목 위 작은 대문자 라벨
overused-font        Inter·Roboto·Geist 남용
single-font          한 서체로 전체 처리
low-contrast         대비 4.5:1 미달
gray-on-color        색 배경 위 회색 텍스트
flat-type-hierarchy  글자 크기 단계가 촘촘해 위계가 없음
... 총 59종
```

---

## 데이터에 대한 참고사항

`tools.json`의 `seen` 값은 원본 계정에서 **반복 소개된 횟수**입니다. 3 이상이면 여러 번 검증된 툴로 볼 수 있습니다(35개).

한계도 밝혀둡니다.

- 무료·유료 구분은 랜딩페이지 화면을 보고 추정한 값입니다. 결제 전에 직접 확인하세요.
- 일부 색상값은 이미지에서 읽어낸 것이라 `note`에 재확인 표시가 있습니다.
- `vendor/` 아래 스킬들은 특정 시점의 스냅샷입니다. 최신으로 받으려면 `bash scripts/update-vendor.sh`를 쓰세요.

---

## 만든 과정을 더 깊게 보고 싶다면

**design-on은 무료 MIT 오픈소스이며, 아래 상품을 구매하지 않아도 모든 기능을 쓸 수 있습니다.**

이 도구를 포함해 비전공자가 AI에게 코딩을 시키고, 결과를 검수하고, 실제 서비스로 배포한 과정을 56쪽 실전서에 정리했습니다. 성공한 화면만 보여주지 않고 잘못된 완료 보고, 깨진 배포, 검증 규칙도 함께 담았습니다.

- [『AI에게 코딩을 시켜라』 실제 지면 4쪽 보기](https://ai-coding-book.vercel.app/read/ai-coding-book/?utm_source=github&utm_medium=readme&utm_campaign=design-on-v4)
- [14,900원에 카드로 구매하기](https://www.latpeed.com/products/B8SQy?utm_source=github&utm_medium=readme&utm_campaign=design-on-v4)

---

## 라이선스

design-on 자체는 [MIT](LICENSE)입니다. `vendor/` 아래는 각 원저작자의 라이선스를 따릅니다(`vendor/impeccable/`은 Apache-2.0). 자세한 내용은 [CREDITS.md](CREDITS.md)에 있습니다.

내장 데이터는 공개된 게시물에서 추출한 툴 이름·URL·색상값 등 사실 정보입니다.

design-on

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README