为什么值得关注

它内置 59 种自动化反模式检测器，引入艺术指导阶段和并行制作/审核流程，解决了 AI 生成网站普遍存在的「机器味」问题，同时兼容 Claude Code 和 Codex，无需设计知识。

适合谁使用

需要快速搭建专业网站的小企业主
希望用 AI 编程助手自动生成网页的开发者
不懂设计但想要美观网站的用户
追求高质量、非模板化输出的 AI 工具使用者

典型使用场景

从一句提示（如「紫色系咖啡店网站」）生成完整咖啡店页面
为本地服务（普拉提工作室、税务所、陶艺工坊）制作落地页
快速原型带有特定配色和氛围的品牌网站
制作避免常见 AI 视觉套路的菜单或价格页

项目优势

内置 59 种反模式检测器，通过代码自动识别渐变文字、低对比度、滥用字体等 AI 常见设计问题
并行执行调研、文案、摄影、动效四个轨道，再并行审核，提高效率
基于 Instagram 真实内容的 78 套色板与 883 个设计工具数据库，提供有依据的设计决策
正确处理韩语排版（单词换行、标题平衡），避免翻译腔文案

使用前须知

完整反模式检测需安装解析器；未安装时仅能检查 4 种模式
部分功能（如图像生成）依赖可选的外部 API 密钥（Gemini）或运行时检测（lazyweb、originkit）
数据准确性说明：工具价格由落地页估算，部分颜色值需要人工确认

README 快速开始

designon

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

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

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

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종

어떻게 작동하나

                    "카페 하는데 보라색 계열로"
                              │
     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이 위 절차를 그대로 돌려 나온 페이지입니다. 브라우저로 바로 열어볼 수 있습니다.

입력

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

**아트 디렉션

项目描述

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

design-on