← ClaudeAtlas

designonlisted

한 문장 요청에서 완성된 웹페이지 HTML을 만든다. 컬러 팔레트 78세트와 디자인 툴 883개 DB를 내장하고, 제작 4트랙·검수 3트랙을 병렬로 돌린 뒤 안티패턴 디텍터로 AI 티를 기계 검사한다. "카페 사이트 만들어줘", "필라테스 스튜디오 페이지", "세무사무소 홈페이지" 같은 웹페이지·랜딩페이지 제작 요청에 쓴다. 색상 팔레트 추천이나 업종별 디자인 툴 조회에도 쓴다.
linkonai2026-kr/designon · ★ 8 · Web & Frontend · score 76
Install: claude install-skill linkonai2026-kr/designon
# designon 사용자가 업종과 원하는 느낌을 한 문장으로 말하면, 컬러·서체·사진·카피를 전부 정해서 **10년차 디자이너가 만든 것 같은** 웹페이지를 만든다. 원페이지가 기본이고, 요청하거나 내용이 많으면 여러 페이지로 나눈다. ## 실행 방법 **이 스킬 디렉토리의 `PLAYBOOK.md`를 읽고 그 절차를 그대로 따른다.** 전체 방법론이 거기 있다. ``` {이 스킬 폴더}/PLAYBOOK.md ``` ## 흐름 ``` STEP 1 브리프 해석 + 페이지 구성 판단 + 팔레트 조회 → 질문 딱 1회 STEP 2 아트 디렉션 확정 (모드 · 3다이얼 · 팔레트 역할 · 서체 페어링) STEP 3 ⚡병렬 제작 4트랙 리서치 · 카피 · 사진 · 모션 STEP 4 통합 빌드 (원페이지 또는 멀티페이지) STEP 5 ⚡병렬 검수 3트랙 기계검사 · 크래프트 · 한국어 STEP 6 일괄 수정 → 재검사 1회 → 종료 STEP 7 보고 ``` ## 핵심 원칙 - **질문은 딱 한 번, 묶어서.** 팔레트 DB를 먼저 조회한 근거로 3개 이하를 묻는다. 답을 받으면 끝까지 만든다. - **AI 티는 기계로 잡는다.** `node scripts/slopcheck.mjs site/`를 반드시 돌린다. 자기 판단에 맡기면 늘 통과시킨다. - **브리프가 이긴다.** 사용자가 보라색을 요청하면 디텍터의 `ai-color-palette` 경고보다 요청이 우선이다. - **서체는 페어링한다.** 한 서체 단독은 `single-font`로 잡힌다. - **크림·베이지 배경으로 도망치지 않는다.** `cream-palette`로 잡힌다. 배경은 팔레트에서 유래해야 한다. - **원페이지가 기본이지만 고집하지 않는다.** 사용자가 요청하거나 내용이 많으면 3~5개로 나눈다. 멀티페이지일 때는 CSS를 파일 하나로 뽑아 공유하고 헤더·푸터를 동일하게 한다. - **검수 루프를 돌지 않는다.** 일괄 수정 후 재검사 1회로 끝낸다. ## 내장 자산 | 경로 | 내용 | |---|---| | `data/palettes.json` | 컬러 팔레트 78세트, HEX 369개 | | `data/tools.json` | 디자인 툴·사이트 883개. `seen` 3 이상이면 반복 검증된 툴 | | `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`가 설치돼 있으면 자동으로 위임한다. **없으면 조용히