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

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

실제 결과물

이 저장소의 examples/cafe/index.html이 위 절차를 그대로 돌려 나온 페이지입니다. 브라우저로 바로 열어볼 수 있습니다.

입력

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

**아트 디렉션