Skillget

design-on

agent
Guvenlik Denetimi
Basarisiz
Health Uyari
  • No license — Repository has no license file
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Low visibility — Only 7 GitHub stars
Code Basarisiz
  • exec() — Shell command execution in scripts/pick.mjs
  • rm -rf — Recursive force deletion command in scripts/update-vendor.sh
  • process.env — Environment variable access in vendor/impeccable/scripts/concept-seed.mjs
  • network request — Outbound network request in vendor/impeccable/scripts/concept-seed.mjs
Permissions Gecti
  • Permissions — No dangerous permissions requested

Bu listing icin henuz AI raporu yok.

SUMMARY

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

README.md

design-on

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

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

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

v4에서 뭐가 달라졌나

이름이 design-on이 되었습니다

명령어도 /design-on, 저장소도 linkonai2026-kr/design-on입니다. 예전 주소는 GitHub이 자동으로 넘겨주지만, 이미 받아두셨다면 setup을 한 번 다시 돌려주세요.

만들고 끝내지 않습니다

v3까지의 마지막 단계는 이랬습니다.

<!-- 아래 정보는 예시입니다. 실제 정보로 교체하세요: 주소, 전화번호, 영업시간 -->

이건 실패였습니다. HTML을 만지기 싫어서 이 도구를 받은 사람에게 HTML을 만지라고 시키는 셈이었으니까요. 페이지는 90% 완성되고 나머지 10%가 숙제로 남았습니다.

v4에는 STEP 8이 생겼습니다. 다 만든 뒤에 직접 물어봅니다.

  1. 마음에 드시는지 — A 좋다 / B 몇 군데 고치고 싶다 / C 방향이 아니다
  2. 실제 정보 — 상호명·전화번호·주소·영업시간·가격을 빈칸 채우기로 한 번에 받아서 모든 페이지에 반영합니다
  3. 사진 — 자리마다 뭐가 보이는지 적고 하나씩 확인합니다. 바꾸겠다고 하시면 어떻게 바꿀지 먼저 여쭤본 다음에 손댑니다
  4. C를 고르시면 HTML을 고치는 게 아니라 색·분위기·서체부터 다시 잡습니다

끝없이 묻지는 않습니다. 최대 2라운드로 잘라둡니다.

설치가 한 줄로 끝납니다

setup 스크립트가 검사기를 켜는 것뿐 아니라 ~/.claude와 ~/.codex를 찾아 명령어까지 등록합니다. 받아서 실행하면 바로 /design-on이 생깁니다.

React도 만듭니다

단일 HTML · 멀티페이지 · React + Vite 세 형태를 지원합니다. 다만 React는 화면에 상태가 여러 개 얽힐 때만 씁니다. "화려하게", "3D로"는 React 조건이 아니라 CDN으로 처리해서 여전히 더블클릭으로 열리게 합니다.

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종

v3에서 뭐가 달라졌나

토큰을 98% 줄였습니다

design-on에 외부 절약 도구를 붙이기 전에 자기 자신을 재봤더니 병목이 안에 있었습니다. data/tools.json이 262KB, 약 87,000 토큰입니다. 리서치 트랙이 이걸 통째로 읽으면 그 세션 예산이 거기서 끝납니다.

scripts/pick.mjs를 만들어 JSON 통째 읽기를 대체했습니다. 실측입니다.

작업 통째 읽기 pick 사용 절감
팔레트 후보 3개 7,838 566 93%
색상 툴 8개 82,093 397 100%
서체 페어링 1,954 658 66%
합계 91,885 1,621 98% 
node scripts/pick.mjs palettes --hue 보라 --industry 카페 --limit 3
node scripts/pick.mjs fonts    --industry 카페
node scripts/pick.mjs photo    --industry 카페

팔레트 조회는 역할 배정(bg·surface·ink·accent·muted)과 대비 계산까지 끝내서 돌려줍니다. 쓸 수 없는 색이 있으면 경고까지 붙습니다.

warn: ["muted 후보가 4.5:1을 못 넘는다. ink를 20~30% 밝힌 색을 직접 만들어라."]
warn: ["accent가 4.5:1 미만이다. 버튼 배경으로 쓰지 말고 ink 배경을 써라."]

숫자와 영문이 예뻐졌습니다

한글 서체는 라틴 글자와 숫자가 약한 경우가 많습니다. 1,280도·USB-C·02-1234-5678 같은 표기에서 티가 납니다. 그렇다고 Inter를 쓰면 디텍터가 overused-font로 잡습니다.

Fontshare(인도 타입 파운드리, 상업 사용 무료)를 숫자·영문 전용 서체로 넣었습니다. <link> 한 줄이라 폰트 파일을 저장소에 담지 않습니다.

3D와 인터랙티브를 요청하면 만듭니다

기본값은 꺼둡니다. 동네 카페 페이지에 회전하는 3D 모델을 넣으면 신뢰가 떨어지고 모바일에서 느려지기 때문입니다. 하지만 원하시면 만듭니다.

요청 레벨 조달
"살짝 입체감" L1 — CSS만 라이브러리 0개
"인터랙티브하게" L2 — 바닐라 JS + Canvas 라이브러리 0개
"3D 모델", "돌려보게" L3 — Three.js CDN importmap, 빌드 도구 없이 단일 HTML
"이 3D 씬 그대로" L4 — Spline 임베드 <iframe>

레벨이 올라가도 히어로 한 곳에만 걸고, prefers-reduced-motion에서 정지하고, JS가 죽어도 내용이 보여야 하고, 기계 검사는 그대로 통과해야 합니다.

examples/studio/가 L3 예시입니다.

어떻게 작동하나

                    "카페 하는데 보라색 계열로"
                              │
     STEP 1  브리프 해석 + 출력 형태 판단 + 팔레트 조회 → 질문 딱 1회
                              │
     STEP 2  아트 디렉션 확정   모드 · 3다이얼 · 팔레트 역할 · 서체 페어링
                              │
     STEP 3  ⚡병렬 제작 4트랙
              ├── 리서치    섹션 순서와 정보 위계
              ├── 카피      한국어 원문 (번역투 배제)
              ├── 사진      네이티브 생성 → Gemini → 스톡 → 타이포
              └── 모션      authored moment 딱 1개
                              │
     STEP 4  통합 빌드 → site/ (단일 HTML · 멀티페이지 · React)
                              │
     STEP 5  ⚡병렬 검수 3트랙
              ├── 기계 검사  안티패턴 59종
              ├── 크래프트   대비·여백·타이포·상태
              └── 한국어     번역투·금지어·구체성
                              │
     STEP 6  일괄 수정 → 재검사 1회
                              │
     STEP 7  보고 + 화면 보여주기
                              │
     STEP 8  완성 후 대화
              ├── 마음에 드세요?           A 좋다 / B 몇 군데 / C 아니다
              ├── 실제 정보 채우기          상호·전화·주소·영업시간·가격
              ├── 사진 하나씩 확인          바꾸려면 어떻게 바꿀지 먼저 묻기
              └── 방향 재설정 (C일 때 1회)  STEP 2로 되감기

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

하지만 사람에게는 묻습니다. 그 둘은 다릅니다. 자가 QA는 추측 위에 추측을 쌓지만, 사용자에게 전화번호를 묻는 건 추측을 사실로 바꿉니다. STEP 8이 그 자리입니다.

실제 결과물

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

셋을 일부러 완전히 다른 디자인으로 만들었습니다. 같은 도구로 만들어도 업종에 따라 다른 얼굴이 나와야 하기 때문입니다.

예시 업종 디자인 언어 인터랙션
examples/cafe/ 로스터리 카페 밝은 보라, 절제된 편집. 명조 제목 + 비대칭 2단 지금 문 열었는지 실시간 표시, 이번 주 로스팅 달력
examples/studio/ 도자기 공방 어두운 갤러리. 큰 사진, 세리프 Three.js 3D 기물 뷰어. 끌어서 돌립니다
examples/shop/ 테크 액세서리 쇼핑몰 밝은 파랑, 굵은 산세리프, 상품 그리드 가격 비교표, 이메일 가입 폼

셋의 실제 차이입니다.

cafe studio shop
구성 원페이지 멀티페이지 3장 원페이지
배경 #FBF1FF 연보라 #34150F 진갈색 #F4F5FA 연회색
제목 서체 Nanum Myeongjo Song Myung Black Han Sans
라틴·숫자 Gambetta Boska Pretendard
사진 3장 12장 8장
3D — Three.js —
안티패턴 0건 0건 0건

라틴·숫자 서체는 전부 Fontshare에서 가져옵니다. 1,280도·02-1234-5678 같은 표기가 한글 서체의 약한 숫자로 나오지 않게 하려는 것입니다.

examples/studio/는 design-on이 3D를 어디까지 하는지 보여주는 예시입니다. 물레로 뽑은 단면을 회전시켜 만든 기물이고, 마우스로 끌면 돌아갑니다. 빌드 도구 없이 importmap으로 Three.js를 불러와 단일 HTML에서 동작합니다. prefers-reduced-motion에서는 꺼지고, 스크립트가 죽어도 본문은 그대로 읽힙니다.

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

입력

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

아트 디렉션 카드 (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건 → 0건
대비 검사 (텍스트 34개) 전부 통과
가로 스크롤 (375px / 1280px) 없음
액센트 버튼 사용 대비 3.54:1이라 버튼 배경에서 제외, --ink로 대체

처음 검사에서 잡힌 5건은 이런 것들이었습니다. 전부 사람이 놓쳤을 법한 것들입니다.

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

카피 비교

AI 기본값 design-on 결과
최고의 원두로 정성껏 내린 커피 화요일에 볶은 원두로 수요일 아침을 엽니다
편안하고 아늑한 공간 4인 테이블 두 개, 2인 테이블 세 개, 창가 바 자리 두 개가 있습니다
지금 바로 방문해보세요 매일 8시 30분에 문을 엽니다. 월요일은 쉽니다.

쓰는 법

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

Claude Code

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

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

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

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

design-on이 먼저 팔레트 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/ 폴더에 저장하고 보여줍니다.

이 시점의 내용은 아직 지어낸 값입니다. 상호명도 전화번호도 영업시간도 그럴듯하게 채워져 있을 뿐 실제 정보가 아닙니다.

4단계. 실제 정보를 채웁니다

여기가 v4에서 새로 생긴 부분입니다. 예전에는 <!-- 실제 정보로 교체하세요 --> 주석을 남기고 끝냈습니다. HTML을 만지기 싫어서 이 도구를 받은 사람에게 HTML을 만지라고 시키는 셈이었습니다.

이제는 직접 물어보고 직접 채웁니다.

이 방향이 마음에 드시나요?

  A. 좋습니다, 이대로 갈게요
  B. 대체로 좋은데 몇 군데 고치고 싶어요
  C. 느낌이 좀 아닌 것 같아요

지금 페이지에 이렇게 들어가 있습니다. 실제 값으로 바꿔주세요.
모르시거나 아직 없는 건 "패스"라고만 적어주시면 됩니다.

  상호명       달빛다방              →
  전화번호     031-000-0000          →
  주소         경기 남양주시 조안면… →
  영업시간     매일 08:30–19:00      →
  휴무         월요일                →
  대표 메뉴    예가체프 5,500원 외 4종 →

사진도 뭉뚱그려 묻지 않습니다. 어느 자리에 뭐가 보이는지 하나씩 적고, 바꾸겠다고 하면 어떻게 바꿀지 먼저 물어본 다음에 손댑니다.

사진이 세 장 들어갔습니다. 바꾸고 싶은 게 있으면 번호로 알려주세요.

  1. 맨 위 큰 사진 — 나무 카운터 위 라떼 한 잔, 아침 햇살
  2. 중간 — 창가 자리와 빈 의자
  3. 아래 — 접시에 담긴 원두

  전부 괜찮으면 "다 좋아요"라고만 하셔도 됩니다.

C를 고르시면 HTML을 고치는 게 아니라 색·분위기·서체부터 다시 잡습니다. 방향이 틀렸을 때 세부를 고쳐봐야 소용이 없기 때문입니다.

끝없이 묻지는 않습니다. 이 대화는 최대 2라운드입니다. 그 뒤로는 "전화번호 바꿔줘"처럼 편하게 말씀하시면 됩니다.

다른 예시

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

어떤 형태로 나오나

세 가지 중 하나입니다. 아래로 갈수록 여는 방법이 번거로워집니다.

형태 여는 법 언제
단일 HTML ← 기본 파일을 더블클릭 소개·랜딩 페이지 대부분
멀티페이지 HTML 폴더를 받아 index.html 더블클릭 내용이 많거나 나눠달라고 하셨을 때
React + Vite 터미널에서 npm install → npm run dev 화면에 상태가 여러 개 얽힐 때만

React는 함부로 안 씁니다. 조건 필터가 동시에 여러 개 걸리는 목록, 뒤로 가도 입력이 남아야 하는 예약 폼, 로그인 여부로 내용이 갈리는 화면 — 이럴 때만 갑니다.

"화려하게", "3D로", "움직이게"는 React 조건이 아닙니다. 그건 CDN import map으로 붙이는 Three.js나 캔버스로 처리해서 여전히 더블클릭으로 열립니다. studio 예시가 그렇게 만들어졌습니다.

React로 가면 사용자가 터미널을 열어야 합니다. 대부분의 소상공인에게 그건 이 도구를 못 쓰게 되는 이유입니다. 그 값을 치를 만한 화면일 때만 갑니다. 갈 때도 MUI·shadcn 같은 UI 라이브러리는 깔지 않습니다 — 깔면 모든 결과물이 그 라이브러리처럼 생기고, 그게 바로 AI 티의 다른 이름입니다.

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

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

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

나누는 경우 예
말씀하시면 "페이지 나눠줘", "메뉴는 따로 빼줘", "서브페이지도 만들어줘"
한 항목마다 설명이 길 때 시술 15종에 각각 과정·주의사항·가격
목록과 상세가 나뉠 때 작품 갤러리 + 작품별 상세 페이지
계속 쌓이는 내용이 있을 때 공지사항, 블로그, 후기

이렇게 말하면 됩니다.

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

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

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

  • 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/design-on.git
cd design-on
bash scripts/setup.sh

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

powershell -ExecutionPolicy Bypass -File scripts/setup.ps1

이 세 줄이 전부입니다. 디자인 지식은 이미 저장소 안에 다 들어 있어서 따로 받을 게 없습니다. setup 스크립트가 하는 일은 두 가지입니다.

  1. 안티패턴 검사기를 켭니다. HTML/CSS를 파싱할 파서 4종을 깝니다. 이걸 건너뛰면 검사기가 축소 모드로 떨어져서, 같은 파일에서 26건 잡을 걸 4건만 잡습니다. 대비·중첩카드·크림배경·헤딩건너뜀이 전부 빠집니다
  2. 에이전트에 명령어를 등록합니다. ~/.claude와 ~/.codex를 찾아서 슬래시 명령·스킬·서브에이전트 6종을 넣습니다. 있는 것만 넣고 없으면 조용히 건너뜁니다

끝나면 바로 이렇게 쓰면 됩니다.

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

저장소 폴더를 옮기면 setup을 다시 실행하세요. 등록된 파일이 이 폴더를 절대경로로 가리키고 있습니다.

Claude Code 플러그인으로 등록하고 싶다면 이 폴더 경로를 마켓플레이스에 추가해도 됩니다. setup을 돌렸다면 굳이 안 해도 됩니다.

검사기만 따로 돌리기

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

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

무엇이 들어 있나

데이터

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

데이터 수량 내용
디자인 툴·사이트 883개 이름, 무료·유료, 카테고리, 어울리는 업종, 공식 URL
컬러 팔레트 78세트 정확한 HEX 색상값 369개, 어울리는 업종

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

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

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

프로젝트 만든 사람 라이선스 design-on에서 하는 일
Impeccable Paul Bakaus Apache-2.0 안티패턴 디텍터 59종 + 품질 하한선 + 레퍼런스 25종
tasteskill Leonxlnx MIT 브리프 추론 + 3다이얼 + 디자인시스템 매핑
UI Skills Julien Thibeaut MIT 컴포넌트·타이포·모션 제약, 접근성
emilkowalski/skill Emil Kowalski MIT 애니메이션 설계·검수, Apple 원칙

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

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

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

도구 상태 왜
lazyweb 런타임 감지 MIT지만 호스팅 API + 토큰이 있어야 동작합니다. 껍데기만 넣는 건 정직하지 않다고 봤습니다
originkit 런타임 감지 라이선스가 명시돼 있지 않고 API 키 게이트 뒤에 있습니다. 복제하지 않고 실시간으로 가져와 팔레트에 맞게 변형해서 씁니다
animos.app 수동 안내 API가 없는 브라우저 툴이라 에이전트가 대신 조작할 수 없습니다. 홍보 영상이 필요할 때 직접 쓰시라고 안내만 합니다

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

사진은 어떻게 넣나

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

순서 방식 조건
1 에이전트 내장 이미지 생성 Codex처럼 이미지를 직접 만들 수 있는 환경. 설정 불필요
2 Gemini API GEMINI_API_KEY를 넣어둔 경우
3 실사 스톡 사진 웹 검색으로 Unsplash 사진을 찾아옴
4 사진 없이 타이포그래피로 위가 다 안 될 때 
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의 습관 순입니다.

폴더 구조

design-on/
├── PLAYBOOK.md              전체 방법론. 모든 진입점이 이 파일을 읽습니다
├── AGENTS.md                Codex 등 범용 에이전트용
├── SKILL.md                 npx skills 형식
├── CREDITS.md               출처와 라이선스
├── commands/design-on.md     Claude Code 슬래시 명령
├── skills/design-on/         Claude Code 스킬 (자동 발동)
├── agents/                  병렬 서브에이전트 6종
│   ├── design-on-researcher.md      섹션 구조
│   ├── design-on-copywriter.md      한국어 카피
│   ├── design-on-photographer.md    사진 확보
│   ├── design-on-motion.md          모션 1개
│   ├── design-on-critic.md          크래프트 검수
│   └── design-on-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/studio/         실제 생성 결과물 (멀티페이지 3장 + Three.js 3D)
├── examples/shop/           실제 생성 결과물 (온라인 쇼핑몰, 상품·비교표·가입폼)
└── 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를 쓰세요.

라이선스

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

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

Yorumlar (0)

Sonuc bulunamadi