b92853bf2b
실제로 한 페이지를 만들어 보고 드러난 것들이다. 0단계 인터뷰에 두 축을 더한다. - 브랜드 색: 꽃집 작업에서 색을 묻지 않고 레퍼런스 실측 평균으로 정했다. 결과는 좋았지만 브랜드 색이 있었다면 그걸 무시한 작업이 된다. "없다"는 답도 답이고, 그때는 피해야 할 색을 묻는다. - 좁은 화면 내비: 항목 수는 0단계에 이미 정해져 있는데 구현에서 발견했다. 2~4개는 쌓고, 5~6개는 가로 스크롤, 7개 이상만 여는 메뉴다. 넷인데 햄버거를 쓰면 탭 한 번을 공짜로 뺏는 것이다. 4-0 이미지 조달 단계를 새로 만든다(references/images.md). 자리를 만들기 전에 무엇을 실을지 정한다. codex 설치와 auth_mode 를 확인해 생성 경로를 쓰고, 생성물이라는 사실을 design.md 에 남긴다. 래퍼 실패 대응을 기록했다 — codex-cli 0.147.0 은 base64 를 돌려주지 않고 ~/.codex/generated_images/<session>/exec-<id>.png 로 저장한다. 공식 래퍼는 "image_gen 이 호출되지 않았다"며 실패하지만 파일은 멀쩡히 있다. 실측에서 이 메시지를 보고 두 번 다시 만들었고 두 번 다 이미 있었다. 싣기 전 최적화도 넣었다(실측 10.1MB → 603KB). 구현에서 넘어진 것 셋. - images.md: <img width height> 를 적으면 그 height 가 계산된 높이가 되어 aspect-ratio 가 조용히 무시된다. computed 는 "3 / 4" 로 멀쩡히 보이고 실제 높이는 원본 1448px 이었다. height:auto 한 줄로 10.9 화면이 7 화면이 됐다. - antipatterns.md: "컨트롤이 2줄로 접히나" 를 개별 높이로 재서 거짓 통과했다. 링크는 한 줄짜리였고 줄바꿈된 것은 컨테이너였다(top 46/77). 행 수는 높이가 아니라 top 값의 종류로 센다. - typography.md: 세로쓰기에 가로쓰기 자간(0.14em)을 물리면 글자 사이 세로 간격이 되어 낱글자가 흩어진다. 한글은 자소가 모여 한 글자라 특히 심하다. - layout.md: 그리드 구조를 바꾸면 미디어쿼리도 같이 다시 써야 한다. 넓은 화면은 멀쩡했고 390px 에서 헤드라인이 6줄이 됐다. |
||
|---|---|---|
| .. | ||
| scripts | ||
| src | ||
| test | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsup.config.ts | ||
designpaca
웹 디자인 파이프라인 스킬을 Claude Code · Codex · Cursor 에 한 줄로 설치한다.
npx designpaca
무엇인가
designpaca 는 AI 코딩 에이전트에게 웹 디자인을 순서대로 하게 만드는 스킬이다.
"예쁘게 만들어줘"라고 하면 에이전트는 자기가 아는 기본값을 쏟아낸다. 보라-파랑 그라디언트, Inter, 3열 아이콘 카드, rounded-2xl shadow-lg. 못 만들어서가 아니라 결정을 안 해서 그렇게 된다. designpaca 는 그 결정을 강제한다.
7단계 파이프라인
| 단계 | 하는 일 | 통과 조건 |
|---|---|---|
| 0 | 브리프 게이트 | 무엇을·누구에게·제약 3줄 |
| 1 | 레퍼런스 조사 | 실제 사이트 3개를 서로 다른 층위에서 |
| 2 | 방향 결정 | 한 문장 컨셉 + 프리셋 + 감수할 리스크 하나 |
| 3 | 디자인 토큰 | 타입·색·간격·모션을 실제 값으로 + 성능 예산 |
| 4 | 구현 | 레이아웃 → 재질(SVG 필터) → 입체(three.js) → 모션 |
| 5 | 프리플라이트 | 하드 게이트 12개 + 슬롭 지문 grep |
| 6 | 결정 기록 | design.md 로 다음 실행에 인계 |
1단계를 건너뛴 디자인은 5단계에서 실패 처리된다. 머릿속 기본값이 아니라 실제로 존재하는 사이트에서 시작하게 만드는 것이 이 스킬의 핵심이다.
무엇이 들어 있나
- 레퍼런스 갤러리 라우팅 — 브리프별로 어디를 볼지. Awwwards 수상작이 럭셔리·자동차에 몰려 있어 SaaS 브리프에 이식하면 안 된다는 것까지
- AI 슬롭 지문 목록 — 실측 검출률과 함께. 보라 CTA 10.7%, 전체 대문자 헤드라인 10.5%, 번호 매긴 1·2·3 단계 9.4%. grep 으로 기계 검출 가능
- SVG 필터를 재질로 — 그레인·굴절·잉크 번짐·수차. 장식이 아니라 "이 디자인의 표면은 무엇인가"를 정하는 도구로
- three.js를 예산 안에서 — 지연 로드, DPR 클램프, 품질 티어, 폴백. 캔버스를 LCP 요소로 만들지 않는 규칙
- 인터랙티브 모션 — 이징의 의미론, 마이크로 인터랙션,
prefers-reduced-motion의 올바른 대응 - 한글 조판 —
word-break: keep-all, line-height 1.6~1.8, 음수 자간 금지, 한글 폰트 페어링. 서구 레퍼런스에 없는 정보 - HTML-in-Canvas — Chrome 실험 API. 폴백을 완성한 뒤에만 얹도록 격리
설치
npx designpaca # 대화형 온보딩 (권장)
설치 대상을 자동 감지해서 기본 선택해준다.
비대화형
npx designpaca install -t claude-code,codex -s user -y
npx designpaca install -t cursor -s project
| 대상 | 설치 위치 |
|---|---|
claude-code |
~/.claude/skills/designpaca/ (또는 프로젝트 .claude/) |
codex |
~/.codex/skills/designpaca/ |
cursor |
.cursor/rules/designpaca.mdc (프로젝트 단위) |
agents-md |
AGENTS.md 에 블록 주입 |
사용
설치 후 에이전트에게 그냥 말하면 된다.
랜딩 페이지 만들어줘 — 수제 커피 로스터리, 원두 정기구독이 목적
Claude Code 에서는 /designpaca 로 명시적으로 부를 수도 있다.
명령어
npx designpaca update # 최신 스킬로 갱신
npx designpaca doctor # 설치 상태 진단
npx designpaca list # 설치 가능 대상과 현재 설치 목록
npx designpaca uninstall # 제거
업데이트가 내 수정을 덮지 않는다
스킬 파일을 직접 고쳤다면 update 는 그 파일을 건드리지 않고 건너뛴다. 설치 시점의 해시를 기록해두고 비교하기 때문이다.
강제로 최신 내용에 맞추려면 --force 를 쓴다. 이때도 원본은 .orig 로 남는다.
npx designpaca update --force
AGENTS.md 처럼 사용자 문서에 주입하는 경우, 마커 블록(<!-- designpaca:start -->) 안쪽만 교체한다. 문서의 나머지는 손대지 않는다. 제거할 때도 블록만 빼간다.
옵션
| 옵션 | 설명 |
|---|---|
-t, --target <id[,id]> |
claude-code codex cursor agents-md |
-s, --scope <범위> |
user (전역) | project |
-y, --yes |
확인 없이 진행 |
-f, --force |
직접 수정한 파일도 덮어쓴다 (.orig 백업) |
--dry-run |
쓰지 않고 계획만 출력 |
--no-update-check |
새 버전 확인 생략 |
요구사항
Node 20.11 이상.
링크
라이선스
MIT