| disable-model-invocation | true |
| name | design-audit |
| description | Audits visual design for AI-generated aesthetic patterns and produces improvement plans. Use when reviewing UI design, checking if a website looks "AI-generated", auditing .pen files for generic aesthetics, or improving visual identity. Also use when "AI purple", "looks generic", "soulless design", "design review", "AI스러운", "디자인 점검", "디자인 감사", or "escape AI aesthetic". Do NOT use for code review (use code-review) or accessibility audit. |
| argument-hint | [url | .pen-path | screenshot-path | css-glob] |
Design Audit
디자인의 "AI스러움"을 8개 카테고리로 정량 점검하고, 개선 계획을 생성한다.
상세 절차는 INSTRUCTIONS.md를 참조하세요.
Input Detection
$ARGUMENTS 또는 대화 맥락에서 대상을 감지한다.
| Input | Detection | Capture Tool |
|---|
URL (http://, https://) | regex | agent-browser open + screenshot + snapshot -i |
| .pen file | extension .pen | mcp__pencil__get_screenshot + batch_get + search_all_unique_properties |
| Image (.png/.jpg/.webp) | extension | Read (멀티모달 직접 분석) |
| CSS/Tailwind files | glob pattern | Grep (color, font, effect 패턴) |
| No input | — | AskUserQuestion으로 대상 확인 |
복수 소스 제공 시 모든 소스에서 수집 후 교차 검증한다.
Workflow
Phase 1: Capture
입력 타입에 따라 시각 + 구조 데이터를 수집한다.
- URL: agent-browser로 full-page screenshot + accessibility snapshot + CSS 패턴 grep
- .pen: pencil MCP로 screenshot + 디자인 토큰 인벤토리 (색상, 폰트, 간격, 라운딩)
- Image: Read로 직접 시각 분석 (구조 데이터 없음 → "Visual-only audit")
- CSS: Grep으로 color/font/effect/layout 패턴 추출
Phase 2: Audit
resources/01-ai-aesthetic-checklist.md를 로드하여 8개 카테고리별 0-3점 채점:
- Color Palette — AI Purple Problem, gradient 남용, neon accent
- Typography — 제네릭 폰트(Inter/Roboto), 계층 부재
- Surface Treatment — 과도한 smoothness, 질감 부재
- Imagery — Glowing orb, chrome 3D, 스톡 느낌
- Layout Regularity — 완벽한 대칭, 3-column grid 반복
- Visual Effects — Glassmorphism/glow/blur 과잉
- Brand Identity — Generic SaaS template 느낌
- Copy & Content — AI slop copy, generic CTA, empty state 부재
총점/24 → 등급:
| 총점 | 등급 | 의미 |
|---|
| 0–4 | Authentic | AI 패턴 최소, 고유 아이덴티티 |
| 5–10 | Mixed | 일부 패턴 존재, 부분 개선 권장 |
| 11–17 | AI-Adjacent | 상당한 AI 영향, 우선 개선 필요 |
| 18–24 | AI-Saturated | 강한 AI 생성 느낌, 전면 재검토 |
정량 분석 핵심: 값의 통일이 문제가 아니라 "Custom vs Default" 구분이 핵심. Tailwind/프레임워크 default에 수렴했는가, 의도적 디자인 시스템인가.
Phase 3: Report
점수 2+ 카테고리에 대해 resources/02-improvement-patterns.md를 로드하여 구체적 개선안을 포함한 리포트를 생성한다.
리포트 구조:
- Summary — 전체 인상 2-3문장
- Scores — 8개 카테고리 점수 테이블
- Findings — 우선순위 순, Evidence + Pattern + Improvement
- Improvement Plan — Quick Wins (1-2h) → Structure (2-4h) → Identity (4-8h)
Core Principles
- Evidence-based — 구체적 요소(hex, 클래스명, 스크린샷 영역)를 근거로 채점. 주관적 느낌 배제
- Severity-ranked — 3점 Critical → 2점 High → 1점 Low. 가장 큰 영향부터
- Actionable — 모든 finding에 구체적 수정 방안 포함
- Non-dogmatic — 맥락에 따라 AI 패턴이 의도적일 수 있음. Flag하되 condemn하지 않음
- Brand-aware — 기존 브랜드 의도를 파악한 후 제안. 브랜드 파괴적 제안 금지
Examples
URL 점검
User: /design-audit https://example-saas.com
→ Phase 1: agent-browser screenshot + snapshot → Phase 2: 7-category scoring → Phase 3: report with findings
.pen 파일 점검
User: /design-audit ~/Documents/project.pen
→ Phase 1: pencil screenshot + search_all_unique_properties → Phase 2: scoring → Phase 3: report
자연어 트리거
User: "이 사이트 너무 AI스러운데 어떻게 고칠 수 있을까?"
→ URL 또는 대상 확인 → full audit workflow
