Communitygithub.com

design-studio

통합 디자인 시스템으로 깔끔하고 독창적인 인터페이스를 구축하고 검토합니다: 웹사이트, 랜딩 페이지, 제품 UI, 대시보드, 폼, 웹/네이티브 앱 화면, HTML 슬라이드 데크 및 다이어그램을 지원합니다.

design-studio란 무엇인가요?

design-studio는 개발자가 독창적이고 비범하며 'AI로 만든 듯한' 느낌이 없는 UI를 구축, 리디자인, 검토 및 개선할 수 있도록 설계된 통합 디자인 시스템입니다. 이 스킬은 taste-skill(미적 방향), impeccable(정교한 명령), ui-ux-pro-max(데이터베이스), ai-design-review(AI 패턴 검토), frontend-slides(HTML 슬라이드), diagram-design 등 여러 모듈을 하나의 '안티-슬롭(anti-slop)' 원칙 아래 결합합니다. Claude Code, Cursor 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, 사용자가 '디자인해줘', '다듬어줘', '리뷰해줘', '팔레트를 정해줘' 등 다양한 의도를 표현할 때 자동으로 적절한 모듈을 라우팅하고 실행합니다. 워크플로우는 Brief → Direction → Build → Look → Gate → Report 단계로 진행되며, 각 단계에서 철저한 품질 관문(Gate)을 통과해야 합니다. 특히 제너릭함을 3/10 이하로 유지해야 하며, AI가 흔히 만드는 '슬롭(slop)'을 걸러내는 엄격한 기준을 적용합니다. 사용자가 직접 CSS나 디자인 파일을 작성할 필요 없이, 자연어 명령만으로 전문적인 디자인 결과물을 얻을 수 있습니다.

지원 대상✓Claude Code~Codex CLI✓Cursor
npx skills add vinay-v-7/design-studio-skill

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

design-studio은(는) 무엇을 하나요?

<studio>는 이 SKILL.md가 포함된 폴더입니다. Windows에서는 python3가 없으면 python을 사용하고, uncooked 런처 대신 modules/impeccable/scripts/impeccable.cmd를 사용하세요.

로드

  1. 이 파일.
  2. 경로에 대한 교리: doctrine/workflow.md, doctrine/principles.md, doctrine/gate.md; 모듈 간 충돌 시 doctrine/conflicts.md를 참조하세요.
  3. 아래 라우팅된 MODULE.md 파일과 그 파일이 가리키는 참조만 로드하세요.

모든 모듈을 절대 로드하지 마세요. 각 모듈의 MODULE.md 파일은 독립형 스킬이 아닙니다.

우선순위

  1. 사용자의 명시적 지침 및 실제 브랜드 에셋
  2. 프로젝트의 DESIGN.md / PRODUCT.md
  3. design-studio 교리
  4. 활성 모듈의 규칙
  5. ui-ux-pro-max 데이터베이스 선택 항목 — 입력일 뿐, 결정이 아닙니다; 모든 선택은 슬롭 기준을 통과해야 합니다.

라우팅

/design-studio <route> [target]. 경로가 없으면 요청에서 추론합니다.

의도 / 인자로드참고
build — 랜딩, 마케팅, 포트폴리오, 공개 페이지modules/taste/MODULE.md + modules/impeccable/MODULE.md (설득)ui-ux-pro-max는 스택 지침에만 사용
app — 대시보드, 설정, 폼, 제품 UI, 네이티브 화면impeccable (운영) + taste references/app-screens.mdui-ux-pro-max 스택 + UX 지침
direction — 팔레트, 폰트, 스타일taste 라이브러리 우선; modules/ui-ux-pro-max/MODULE.md 검색 차선, 슬롭 필터링DESIGN.md를 작성합니다
review / audit / roastmodules/ai-design-review/MODULE.md 및 해당 보고서 형식아래 스캐너; ID로 중복 제거
polish bolder quieter typeset colorize animate harden clarify distill delight adapt onboard optimize layout overdrive shape init document extract critique audit live generateimpeccable 명령 참조pin/unpin 비활성화
slides / deck / presentationmodules/slides/MODULE.mdtemplate-library/ 최후의 수단; .pptx → pptx 스킬
diagram (+ import mermaid|drawio|excalidraw, export)modules/diagrams/MODULE.md + commands/
앱 내 차트dataviz 스킬이 설치된 경우, 그렇지 않으면 ui-ux-pro-max 차트 도메인
긴 형식의 카피ai-design-review copy 지시; unslop 스킬이 설치된 경우
hooks on|off|statusimpeccable reference/hooks.md후크 정책 아래 참조

워크플로우

Brief (PRODUCT.md) → 방향 (DESIGN.md) → 빌드 → 검토 → 게이트 → 보고서. 자세한 내용: doctrine/workflow.md.

Taste 작업 파일은 .taste-skill/에 유지됩니다. 선택된 방향을 DESIGN.md에 요약하여 모든 모듈이 하나의 파일을 읽도록 하세요.

게이트

완료 조건: 배포 크기를 확인했습니다. 관련 스캐너를 실행했습니다. P0 제로. 모든 P1은 brief에 의해 정당화되어야 합니다. 새로운 UI의 제너릭함 ≤ 3/10. SD1–SD5 통과. 어떤 것도 발명되지 않음. 앱 UI에 빈 상태/로딩/오류 상태 있음. 보고서는 실행된 등급의 이름을 표시합니다. 전체 표: doctrine/gate.md.

검토 스캐너 (카탈로그 ID로 중복 제거):

node <studio>/modules/ai-design-review/scripts/scan.mjs <target> --json
<studio>/modules/impeccable/scripts/impeccable detect <target>
node <studio>/modules/taste/scripts/lint.mjs <target>

Windows detect: <studio>\modules\impeccable\scripts\impeccable.cmd detect <target>.

후크 정책

기본적으로 꺼져 있습니다. 절대 조용히 활성화하지 마세요.

실제 프로젝트에서 build 또는 app 경로를 시작할 때 다음을 실행하세요:

<studio>/modules/impeccable/scripts/impeccable hooks status

다음 중 하나라도 해당될 경우 옵트인을 제안하고, 한 문장으로 이유를 설명하세요: 태스크가 UI 파일 3개 이상을 건드리거나 세션에 걸쳐 진행되는 경우; 검토에서 기계적인 P0/P1 문제가 2개 이상 발견된 경우(대비, 그라디언트 텍스트, 글로우, 오버플로우, 디자인 시스템 변질); 사용자가 지속적인 시행을 요청하는 경우.

설명: .claude/settings.local.json(Claude Code) 또는 .cursor/hooks.json(Cursor)을 통한 편집별 스캔. Cursor는 편집별 검사만 받으며 Stop 심층 패스는 없습니다. <studio>/modules/impeccable/scripts/impeccable을 가리키세요.

.impeccable/config.local.json의 hook.consent를 존중하세요. 해당 프로젝트에서 다시 묻지 마세요.

수락하면: impeccable hooks on. 거절하면: hooks off를 실행하고 그곳에서 다시 묻지 마세요.

환경

필요한 것사용처없을 경우
Node 18+scan.mjs스캐너 건너뛰고, 이유를 알림
Node 22+taste draw / lint / inspecttaste 스크립트 건너뛰기
Python 3ui-ux-pro-max, diagram verify-geometry해당 기능 건너뛰기
Chrome / Edgetaste inspect, impeccable URL detect시각적 브라우저 계층 건너뛰기
Playwright슬라이드 PDF 내보내기PDF 건너뛰기
python-pptxPPT 가져오기가져오기 건너뛰기

모듈 맵

경로역할
modules/taste/아트 디렉션 (draw.mjs), lint/inspect
modules/impeccable/크래프트 명령, detect, 후크
modules/ui-ux-pro-max/검색 가능한 스타일 / 팔레트 / 스택
modules/ai-design-review/지시사항 카탈로그, 스캔, 검토 보고서
modules/slides/HTML 데크; template-library/는 구현 참조
modules/diagrams/HTML/SVG 다이어그램

관련 스킬