Agent skill · design visual · aiskillstore
design-lint
결정론적(no-LLM) 디자인 안티패턴 린터. 렌더된 HTML/CSS(또는 standalone 프로토타입 HTML, 라이브 URL)를 DESIGN-TOKENS.md Ground Truth 대비 검사해 토큰 위생·색/폰트/스페이싱 일관성·AI-default 클리셰(beige 배경·text gradient·uppercase eyebrow 등)를 pass/fail로 판정한다. LLM 디자인 리뷰는 비재현적이라 게이트로 못 쓰지만 이 스킬은 동일 입력→동일 판정·0토큰이라 CI/파이프라인 게이트로 쓸 수 있다. '/design-lint', '디자인 린트', '디자인 검사', '토큰 위생 검사', 'design-lint', '안티패턴 검사', 'AI-default 검사', '디자인 일관성 검사' 언급 시, 그리고 리팩토링/리디자인 파이프라인이 시각 산출물을 검증할 때 호출한다.
Why this skill is useful
Adds a deterministic linter script for design anti-patterns that provides consistent outputs for CI pipelines, which the AI cannot generate on its own.
What it needs
Requires node installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
DESIGN-LINT — 결정론적 디자인 안티패턴 린터 요구사항: detector 스크립트는 Node.js 18+ 로 실행한다(ESM .mjs, realpathSync/fileURLToPath 사용). 외부 npm 의존은 0개. 라이브 URL 검사 경로는 동봉된 playwright MCP(.mcp.json)를 사용한다. 존재 이유: "내 디자인 리뷰해줘"는 LLM이 매번 다르게 답해 게이트로 쓸 수 없다. 같은 안티패턴 목록을 순수 함수로 강제하면 동일 입력→동일 판정·0토큰·CI 실행 가능한 진짜 게이트가 된다. 이건 impeccable "anti-pattern ban list"의 고레버 절반(목록을 프롬프트가 아니라 탐지기로). LLM 판단 critic의 결정론 버전이라 보면 된다 — 코드/디자인 수정은 하지 않고 판정만 한다. 경계 LLM 디자인 리뷰 design-lint --- --- --- 재현성 매번 다름 동일 입력→동일 출력 비용 토큰 소모 0토큰(스크립트) 게이트 적합 부적합 exit code로 CI 게이트 잡는 것 주관적 미감 객관적 안티패턴·토큰 위생 design-lint는 객관적으로 검증 가능한 것만 잡는다. "이 레이아웃이 우아한가" 같은 주관 판단은 범위 밖 — 그건 사람/디자인 리뷰 몫이다. 둘은 상보적이다. (frontend-design 스킬이 함께 설치돼 있으면 주관적 미감 방향은 그쪽에 맡기고 이 스킬은 객관 게이트만 담당한다.) --- Phase 0: PARSE 인자 기본값 설명 --- --- --- 입력 (첫 비플래그) docs/design/prototype/.html 검사할 HTML 글롭, 또는 http(s):// URL --tokens {경로} docs/design/DESIGN-TOKENS.md 자동탐색 토큰 위생 검사 기준. 없으면 hygiene 스킵(false positive 방지) --gate OFF error 발견 시 비-제로 종료로 호출 파이프라인을 막는다 --max-colors N 등 references 참조 임계값 오버라이드 --- Phase 1: RESOLVE INPUT 1. 입력이 http(s)://이면 → Playwright로 렌더 후 정규화한다. (라이브 사이트·배포본 검사 경로) 뷰포트 고정 필수 — box 측정(w/h/maxWidth)은 뷰포트 의존이라 고정 안 하면 결정론이 깨진다. browserresize로 1280×800을 먼저 박는다(반응형 판정이 필요하면 데스크탑+모바일 2개 고정 뷰포트로). browsernavigate → 임시 HTML: browserevaluate로 document.documentElement.outerHTML 덤프를 <style> 인라인 형태로 저장(정규식 detector 입력). computed-style 관측(Group A: 대비비·box-model·구조): node scripts/design-lint.mjs --observe-snippet로 수집 스니펫 문자열을 얻어 그대로 browserevaluate에 주입 → 반환된 관측 배열(JSON)을 obs.json으로 저장 → 본 실행에 --observed obs.json으로 전달한다. (playwright npm 의존 0 — computed-style COLLECTSNIPPET 패턴) --observed 없이 실행하면 Group A detector는 skip(report observed: skipped)되고 정규식 detector만 돈다. 라이브URL 경로에서만 대비비/box-model이 활성된다. 2. 입력이 글롭이면 → Glob으로 파일 목록 확정. 0개면 사용자에게 경로 확인. 3. --tokens 미지정 시 docs/design/DESIGN-TOKENS.md를 Glob으로 자동탐색. 있으면 토큰 위생 ON, 없으면 OFF(경고만). 왜 standalone HTML이 1차 입력인가: framework-neutral standalone HTML(예: 프로토타입 산출물)을 Ground Truth로 삼으면 프레임워크 빌드 없이 즉시 검사 가능하다. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/design-lint