---
name: design-on
description: 한 문장 요청에서 완성된 웹페이지를 만든다. 컬러 팔레트 83세트·서체 페어링·업종별 사진 레시피를 내장하고, 제작 4트랙·검수 3트랙을 병렬로 돌린 뒤 안티패턴 디텍터로 AI 티를 기계 검사한다. 완성 후에는 상호명·전화번호 같은 실제 정보를 직접 물어 채우고 사진 교체 여부를 확인한다. "카페 사이트 만들어줘", "필라테스 스튜디오 페이지", "세무사무소 홈페이지" 같은 웹페이지·랜딩페이지 제작 요청에 쓴다. 색상 팔레트 추천이나 업종별 디자인 툴 조회에도 쓴다.
---

# design-on

사용자가 업종과 원하는 느낌을 한 문장으로 말하면, 컬러·서체·사진·카피를 전부 정해서 **10년차 디자이너가 만든 것 같은** 웹페이지를 만든다. 단일 HTML이 기본이고, 요청하거나 내용이 많으면 멀티페이지로, 상태가 얽힌 화면이면 React로 간다.

**만들고 끝내지 않는다.** 마음에 드는지 묻고, 상호명·전화번호 같은 실제 정보를 받아 채우고, 사진을 하나씩 확인하는 STEP 8까지가 완성이다.

## 실행 방법

**이 스킬 디렉토리의 `PLAYBOOK.md`를 읽고 그 절차를 그대로 따른다.** 전체 방법론이 거기 있다.

```
{이 스킬 폴더}/PLAYBOOK.md
```

## 흐름

```
STEP 1  브리프 해석 + 출력 형태 판단 + 팔레트 조회 → 질문 딱 1회
STEP 2  아트 디렉션 확정 (구조 · 모드 · 3다이얼 · 팔레트 역할 · 서체 페어링)
STEP 3  ⚡병렬 제작 4트랙   리서치 · 카피 · 사진 · 모션
STEP 4  통합 빌드 (단일 HTML · 멀티페이지 · React)
STEP 5  ⚡병렬 검수 3트랙   기계검사 · 크래프트 · 한국어
STEP 6  일괄 수정 → 재검사 1회
STEP 7  보고 → 화면을 보여준다
STEP 8  완성 후 대화 (만족도 → 실제 정보 채우기 → 사진 교체)
```

## 핵심 원칙

- **질문은 딱 한 번, 묶어서.** 팔레트 DB를 먼저 조회한 근거로 3개 이하를 묻는다. 답을 받으면 끝까지 만든다.
- **구조를 먼저 고른다.** `pick.mjs layouts`로 아키텍처 10종 중 하나를 고르고 이유를 한 줄로 쓴다. 색만 바꾸고 구조는 늘 똑같이 만드는 것이 가장 큰 실패 모드다. 치수도 아키텍처에서 가져온다.
- **AI 티는 기계로 잡는다.** `node scripts/slopcheck.mjs site/`를 반드시 돌린다. 자기 판단에 맡기면 늘 통과시킨다.
- **브리프가 이긴다.** 사용자가 보라색을 요청하면 디텍터의 `ai-color-palette` 경고보다 요청이 우선이다.
- **서체는 페어링한다.** 한 서체 단독은 `single-font`로 잡힌다.
- **크림·베이지 배경으로 도망치지 않는다.** `cream-palette`로 잡힌다. 배경은 팔레트에서 유래해야 한다.
- **원페이지가 기본이지만 고집하지 않는다.** 사용자가 요청하거나 내용이 많으면 3~5개로 나눈다. 멀티페이지일 때는 CSS를 파일 하나로 뽑아 공유하고 헤더·푸터를 동일하게 한다.
- **검수 루프를 돌지 않는다.** 일괄 수정 후 재검사 1회로 끝낸다.
- **하지만 STEP 8에서 사람에게는 묻는다.** 자가 QA 루프와 사용자 확인은 다르다. STEP 7까지는 상호명·전화번호가 전부 지어낸 값이라 아직 완성이 아니다. 만족도를 묻고, 실제 정보를 받아 채우고, 사진을 하나씩 확인한다. 최대 2라운드.

## 내장 자산

**`data/*.json`을 Read로 통째 읽지 마라.** `scripts/pick.mjs`로 조회한다. `tools.json` 하나가 약 87,000 토큰이라 한 번 읽으면 세션 예산이 사라진다.

| 조회 | 내용 |
|---|---|
| `pick.mjs layouts` | **페이지 구조 아키텍처 10종.** 치수까지 서로 다르다 |
| `pick.mjs palettes` | 컬러 팔레트 83세트. 역할 배정과 대비 계산까지 끝내서 준다 |
| `pick.mjs fonts` | 서체 페어링 9종 (한글 본문 + 한글 제목 + Fontshare 라틴) |
| `pick.mjs photo` | 업종별 사진 프롬프트 레시피 7종 |
| `pick.mjs tools` | 디자인 툴·사이트 894개 |

| 경로 | 내용 |
|---|---|
| `vendor/impeccable/` | 품질 하한선 + 안티패턴 디텍터 59종 (Apache-2.0, pbakaus) |
| `vendor/taste-skill/` | 브리프 추론 + 3다이얼 + 디자인시스템 매핑 (MIT, Leonxlnx) |
| `vendor/ui-skills/` | 컴포넌트·타이포·모션 제약 (MIT, Julien Thibeaut) |
| `vendor/emil-skill/` | 애니메이션 설계·검수 (MIT, Emil Kowalski) |

출처와 라이선스는 `CREDITS.md`에 있다.

## 외부 스킬

`lazyweb`, `originkit MCP`가 설치돼 있으면 자동으로 위임한다. **없으면 조용히 건너뛴다.** 설치를 요구하며 멈추지 않는다.