designon

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

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

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

v2에서 뭐가 달라졌나

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

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

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

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

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

v2의 해결

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

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종

어떻게 작동하나

                    "카페 하는데 보라색 계열로"
                              │
     STEP 1  브리프 해석 + 페이지 구성 판단 + 팔레트 조회 → 질문 딱 1회
                              │
     STEP 2  아트 디렉션 확정   모드 · 3다이얼 · 팔레트 역할 · 서체 페어링
                              │
     STEP 3  ⚡병렬 제작 4트랙
              ├── 리서치    섹션 순서와 정보 위계
              ├── 카피      한국어 원문 (번역투 배제)
              ├── 사진      네이티브 생성 → Gemini → 스톡 → 타이포
              └── 모션      authored moment 딱 1개
                              │
     STEP 4  통합 빌드 → site/ (원페이지 또는 멀티페이지)
                              │
     STEP 5  ⚡병렬 검수 3트랙
              ├── 기계 검사  안티패턴 59종
              ├── 크래프트   대비·여백·타이포·상태
              └── 한국어     번역투·금지어·구체성
                              │
     STEP 6  일괄 수정 → 재검사 1회 → 종료
                              │
     STEP 7  보고 + 교체할 예시 정보 목록

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

실제 결과물

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

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

입력

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

아트 디렉션 카드 (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건은 이런 것들이었습니다. 전부 사람이 놓쳤을 법한 것들입니다.

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

카피 비교

쓰는 법

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

Claude Code

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

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

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

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

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

보라 계열 팔레트 21개 중에 3개를 추렸습니다.

1. 배색을 골라주세요
   A. Orchid/Amethyst — 연보라 배경 + 진한 자주 텍스트
      #FBF1FF #E3D0EA #9B71B2 #3A1C36
      차분하고 단정합니다. 카페·베이커리에 무난합니다.
   B. Purple Queen — 크림 배경 + 선명한 보라
      #F4EFEE #FFD3CF #924FF1 #2D135F
      밝고 활기찹니다. 젊은 층 타겟이면 이쪽입니다.
   C. Midnight Plum — 라일락 + 미드나잇 플럼
      #E6C7E6 #A3779D #663399 #2E1A47
      묵직하고 고급스럽습니다. 단가가 높은 곳에 어울립니다.

2. 어떤 분위기가 좋으세요?
   A. 차분하고 조용한 — 여백을 넓게, 사진은 적게, 명조체 제목
   B. 밝고 활기찬 — 사진을 크게, 대비를 강하게
   C. 빈티지 감성 — 종이 질감, 세리프 서체

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

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

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

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

3단계. 끝입니다

더 묻지 않고 끝까지 만들어서 site/ 폴더에 저장합니다. 브라우저로 열면 바로 보입니다.

마지막에 "여기는 실제 정보로 바꾸세요" 목록을 알려줍니다. 주소, 전화번호, 영업시간, 메뉴, 가격 같은 것들입니다.

다른 예시

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

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

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

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

이렇게 말하면 됩니다.

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

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

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

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

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

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

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

node scripts/slopcheck.mjs site/

설치

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

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

powershell -ExecutionPolicy Bypass -File scripts/setup.ps1

스킬 지식은 이미 저장소 안에 다 들어 있습니다. setup 스크립트가 하는 일은 안티패턴 디텍터가 HTML/CSS를 파싱할 파서 4종을 까는 것뿐입니다.

이 설치를 건너뛰면 디텍터가 축소 모드로 떨어집니다. 정규식 검사만 돌아서 같은 파일에서 26건 잡을 걸 4건만 잡습니다. 대비·중첩카드·크림배경·헤딩건너뜀이 전부 빠집니다. designon이 그때는 축소 모드라고 경고를 띄웁니다.

에이전트에 등록하기

Claude Code — 플러그인 디렉토리로 등록하면 /designon이 생깁니다. 슬래시 명령과 자동 발동, 서브에이전트 6종이 함께 등록됩니다.

Codex — 저장소를 작업 폴더에 두면 AGENTS.md를 읽고 알아서 동작합니다. 또는 npx skills add로 스킬 폴더에 넣어도 됩니다.

검사기만 따로 돌리기

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

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

무엇이 들어 있나

데이터

Instagram @suraj.dsgn의 게시물 325개를 전부 분석해서 뽑아낸 것입니다.

색을 고를 때 감으로 정하지 않고 이 팔레트 DB에서 근거를 갖고 고릅니다.

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

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

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

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

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

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

사진은 어떻게 넣나

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

export GEMINI_API_KEY="발급받은-키"

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

참고로 3번 실사 사진이 AI 생성 이미지보다 "AI 티"가 덜 나는 경우가 많습니다. 키가 없어도 결과물은 충분히 괜찮습니다.

"AI 티"를 없애는 규칙

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

금지

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

대신 이렇게

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

한국어 조판

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

body{ word-break:keep-all; overflow-wrap:break-word; }
h1,h2,h3{ text-wrap:balance }

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

브리프가 이깁니다

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

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

폴더 구조

designon/
├── PLAYBOOK.md              전체 방법론. 모든 진입점이 이 파일을 읽습니다
├── AGENTS.md                Codex 등 범용 에이전트용
├── SKILL.md                 npx skills 형식
├── CREDITS.md               출처와 라이선스
├── commands/designon.md     Claude Code 슬래시 명령
├── skills/designon/         Claude Code 스킬 (자동 발동)
├── agents/                  병렬 서브에이전트 6종
│   ├── designon-researcher.md      섹션 구조
│   ├── designon-copywriter.md      한국어 카피
│   ├── designon-photographer.md    사진 확보
│   ├── designon-motion.md          모션 1개
│   ├── designon-critic.md          크래프트 검수
│   └── designon-korean.md          한국어 검수
├── data/palettes.json       컬러 팔레트 78세트
├── data/tools.json          디자인 툴 883개
├── vendor/                  함께 싣는 스킬 4종 (라이선스 보존)
│   ├── impeccable/          디텍터 + 품질 하한선 (Apache-2.0)
│   ├── taste-skill/         브리프 추론 (MIT)
│   ├── ui-skills/           컴포넌트 제약 (MIT)
│   └── emil-skill/          애니메이션 (MIT)
├── examples/cafe/           실제 생성 결과물 (원페이지)
├── examples/salon/          실제 생성 결과물 (멀티페이지 3장 + 공통 CSS)
└── scripts/
    ├── setup.sh / .ps1      설치
    ├── slopcheck.mjs        안티패턴 검사기
    └── update-vendor.sh     업스트림 재동기화

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

데이터에 대한 참고사항

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

한계도 밝혀둡니다.

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

라이선스

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

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