Design Arsenal — الأداة الموحدة لتصميم الواجهات
하나의 도구. 하나의 진입점. 열한 개의 모듈. 이것은 단일 스킬입니다 — 모든 것이 이 파일을 통해 실행됩니다. 7개의 세계적 수준의 업스트림 도구와 4개의 독자 모듈은 더 이상 별도의 스킬이 아니라 내부 모듈이며, 각각 MANUAL.md에 문서화되어 있어 필요할 때 디스크에서 읽습니다.
EXTRACT → TASTE → BUILD → MOTION → POLISH → VERIFY
extract taste code gsap / impeccable playwright-cli
+ design-tokens react-bits transitions
rtl-arabic (컨텍스트 계층 — 모든 아랍어 콘텐츠)
a11y (모든 단계 게이트) web-vitals (모든 단계 예산)
단일 도구 시스템: 이 스킬은
design-arsenal이라는 이름으로 한 번 설치되며, 모든 작업은 이 파일을 통해 이루어집니다. 이전의 7개 도구는 내부 모듈이 되었습니다 (4개의 독자 모듈: rtl-arabic, a11y, design-tokens, web-vitals 포함) — 개별 설치되지 않으며 독립 도구로 나타나지 않고, 필요할 때만 해당 사용 설명서(MANUAL.md)를 디스크에서 읽습니다.
🧭 모듈 디스패치 — 먼저 이 표를 읽으세요
작업에서 하나의 모듈을 식별하고, 디스크에서 해당 MANUAL.md를 읽은 후(경로는 이 파일의 디렉토리를 기준으로 함) 따르십시오. 단일 작업에 두 개 이상의 모듈을 로드하지 마십시오.
| # | 작업 신호 (사용자가 요청하는 것) | 모듈 | 디스크에서 읽기 |
|---|---|---|---|
| 1 | 웹사이트 디자인 복사: "extract design from stripe.com", "이 사이트가 사용하는 토큰/색상/폰트는 무엇인가요", "이 URL을 Tailwind 테마로 변환" | extract (designlang) | skills/extract-design/MANUAL.md |
| 2 | 빌드 전 아트 디렉션 및 안티-슬롭: "랜딩 페이지 구축", "템플릿처럼 보이지 않는 디자인", "팔레트/타이포그래피 방향 선택" | taste (taste-skill v2) | skills/taste/MANUAL.md |
| 3 | 기존 UI 개선, 검토, 강화: "polish", "audit", "critique", "bolder", "quieter", "typeset", "colorize", "harden", "distill" | polish (impeccable, 24개 명령어) | skills/impeccable/MANUAL.md |
| 4 | 고급 프로그래매틱 애니메이션: "GSAP", "스크롤 애니메이션", "타임라인", "ScrollTrigger", "stagger", "pinning" | motion/gsap (8개 모듈) | skills/gsap/gsap-<module>/MANUAL.md |
| 5 | 준비된 애니메이션 React 컴포넌트: "animated hero", "텍스트 효과", "애니메이션 배경", "glare hover", "splitscreen" | components (react-bits, 218개) | skills/react-bits/CATALOG.md |
| 6 | CSS 마이크로 인터랙션 및 UI 모션: "모달 트랜지션", "토스트", "알림 배지", "스켈레톤 로더", "성공 체크", "AI 사고 상태" | motion/transitions (43+ 스니펫) | skills/transitions/transitions-dev/MANUAL.md |
| 7 | 확인 또는 자동화: "브라우저에서 테스트", "스크린샷", "플로우가 작동하는지 확인", "비디오 녹화", "플로우 클릭스루" | verify (playwright-cli) | skills/playwright-cli/MANUAL.md |
| 8 | 아랍어/RTL 인터페이스: "Arabic UI", "RTL", "عربي", "right-to-left", "bidi", 아랍어를 포함하는 모든 콘텐츠 | rtl-arabic (독자) | skills/rtl-arabic/MANUAL.md |
| 9 | 접근성: "a11y", "accessible", "WCAG", "contrast", "aria", "screen reader", "keyboard" | a11y (독자) | skills/a11y/MANUAL.md |
| 10 | 디자인 토큰: "design tokens", "DTCG", "theme tokens", "CSS variables theme", "convert palette to Tailwind", "token architecture" | tokens (독자) | skills/design-tokens/MANUAL.md |
| 11 | 성능: "느린 페이지", "lighthouse", "core web vitals", "LCP", "INP", "CLS", "perf budget", "render-blocking", "أداء", "بطيء", "سرعة" | web-vitals (독자) | skills/web-vitals/MANUAL.md |
중복 → 우선순위 결정:
- 새로운 것을 구축하는 경우 →
taste를 먼저(방향 설정), 그 다음 구현하면서react-bits또는gsap. - 기존 것을 재설계하는 경우 →
polish감사/비판을 먼저, 새 방향이 필요하면taste. - 순수 마이크로 인터랙션 (단일 요소, 열기/닫기 상태) →
transitions(CSS, 저렴). 전체 씬 연출, 스크롤 또는 물리 효과 →gsap. - 기계가 읽을 수 있는 토큰 (JSON/DTCG 파일) →
tokens. 라이브 사이트에서의 일반 디자인 브리프 →extract. 스크린샷 → 토큰 →tokens직접. - 아랍어 콘텐츠가 조금이라도 있음 → 어떤 모듈이 주도하든 스타일링 전에
rtl-arabic을 읽으세요. - 모션 + 접근성 질문 →
a11y의 축소 모션 규칙이 항상 모션 풍부함보다 우선합니다. - 모션 + 성능 질문 →
web-vitals메인 스레드 예산이 우선합니다. 애니메이션은transform/opacity에만 적용됩니다. - "페이지가 느립니다" →
web-vitals정적 린트를 먼저 (구조적 원인), 그 다음 측정(메뉴얼 §8) — 메트릭을 추측하지 마십시오. - UI 변경 후 → 항상
verify로 확인 제안 (결과 스크린샷).
🌳 의사 결정 트리 — 네 가지 질문으로 라우팅
순서대로 질문하고, 첫 번째 일치에서 멈추십시오:
- 콘텐츠에 아랍어(또는 다른 RTL 스크립트)가 포함되어 있습니까? →
rtl-arabic을 컨텍스트 계층으로 추가한 후 아래를 계속 진행합니다. - 입력값이 소비할 기존 디자인입니까? URL →
extract; 스크린샷/목업 →tokens; 팔레트 파일 →tokens. - 작업이 새로운 것을 생성하는 것인가요, 아니면 기존 것을 변경하는 것인가요? 새 것 →
taste→ 빌드(필요에 따라react-bits/gsap/transitions에서 가져오기). 기존 것 →polish감사 먼저 (/impeccable audit), 새 방향이 필요한 경우에만taste. - 작업이 어떻게 끝나나요? UI 출시 →
a11y게이트 +web-vitals린트 +verify스크린샷 실행. 테마/토큰 파일 생성 →tokens내보내기 + 페어에 대한 a11y 감사.
작업당 최대 두 개의 MANUAL.md 파일을 읽으십시오. 네 개의 독자 모듈은 하나의 업스트림 모듈과 함께 스택될 수 있습니다 (예: rtl-arabic + taste).
🚫 안티 패턴 레지스트리 — 절대 출시하지 마십시오
매뉴얼에서 수집된 모듈 간 금지 사항입니다. 출력물에 하나라도 포함되면 작업이 완료되지 않은 것입니다:
<div onClick>을 버튼 대신 사용하는 것 (a11y §3) — 키보드 비활성, 스크린 리더 미인식.- 회색-색상 텍스트, 또는 4.5:1 미만의 모든 전경/배경 쌍 (a11y §2, impeccable 금지) — 추측 대신 대비 스크립트를 실행하십시오.
- 대체 포커스 링이 없는
outline: none(a11y §5). prefers-reduced-motion가드가 없는 애니메이션 (a11y §7, transitions 규칙) — 더 엄격한 규칙이 우선합니다.- 아랍어 텍스트에
letter-spacing적용 (rtl-arabic §3) — 연결된 스크립트가 깨집니다. - RTL 페이지에서 물리적
left/rightCSS 속성 사용 (rtl-arabic §1) — 논리적 속성을 사용하십시오. - 토큰 파일이 존재할 때 컴포넌트에 하드코딩된 hex/px (tokens §7) — 원시 값은 토큰 파일만이 전달합니다.
- 단일 요소 호버에 GSAP 사용 (
transitions사용) 또는 스크롤 연출 씬에 CSS 트랜지션 사용 (gsap사용). catalog.json에 없는 react-bits 컴포넌트 이름 — 절대 임의로 생성하지 마십시오.- 카드 안에 중첩된 카드, UI의 바운스 이징, 그리고 기타 impeccable 슬롭 —
/impeccable audit가 잡아냅니다. - 히어로/LCP 이미지에
loading="lazy"(web-vitals §2) — 브라우저가 레이아웃 후에야 요청을 발견합니다. - 명시적인
width/height가 없는<img>또는<iframe>(web-vitals §3) — 레이아웃 이동이 보장됩니다. <head>에서defer/async없는 클래식<script src>, 또는document.write(web-vitals §7).font-display가 없는@font-face, 또는 fonts.gstatic.com에preconnect가 없는 Google Fonts 스타일시트 (web-vitals §6).
📦 내부 구조
design-arsenal/ ← 하나의 스킬, 한 번 설치
├── SKILL.md ← 단일 진입점 (이 파일)
├── index.json ← 기계 판독 가능 모듈 인덱스
├── install.sh ← 원클릭 설치 도구 (모든 플랫폼)
├── ATTRIBUTION.md ← 소스 및 라이선스
├── README.md ← الدليل الكامل بالعربية
├── demo/index.html ← 모션 스택의 작동 데모
├── examples/gsap/ ← GSAP 시작 예제 (react/vue/nuxt/vanilla)
└── skills/ ← 내부 모듈 (참조 매뉴얼만)
├── extract-design/ ← designlang: URL → 전체 디자인 시스템 (17개 이상 파일)
├── taste/ ← taste-skill v2: 13가지 안티-슬롭 규칙 + 라이브러리 + 검사기
├── impeccable/ ← impeccable: 24개 명령어 + 60개 이상 탐지 규칙 + 스크립트
├── gsap/ ← 8개 GSAP 모듈: core/timeline/scrolltrigger/react/plugins/…
├── react-bits/ ← 218개 애니메이션 React 컴포넌트 (TS-CSS + TS-Tailwind) + 카탈로그
├── transitions/ ← transitions.dev: 18개 트랜지션 참조 + 토큰
├── playwright-cli/ ← 브라우저 자동화 모듈 + 10개 참조
├── rtl-arabic/ ← 독자: 아랍어/RTL 인터페이스 (논리적 속성, 타이포그래피, 10포인트 감사)
├── a11y/ ← 독자: WCAG 2.2 AA 게이트 + 제로-종속 대비 스크립트
├── design-tokens/ ← 독자: DTCG 아키텍처 + 다중 대상 변환기
└── web-vitals/ ← 독자: Core Web Vitals 플레이북 + 정적 HTML 린터
모든 모듈 디렉토리에는 MANUAL.md (이전의 자체 SKILL.md)가 포함되어 있습니다. 이 루트 SKILL.md만 존재하기 때문에, 에이전트는 정확히 하나의 도구를 등록하고 로드합니다 — 스킬 확산, 중복 트리거, 7개의 설치된 스킬로 인한 컨텍스트 비대화가 없습니다.
🚀 빠른 시작
제로-투-랜딩페이지 (전체 파이프라인):
- (선택적 정찰) 경쟁사 URL 1~2개에서
extract→ 토큰 + 패턴. taste→ 브리프 읽기, 방향 추론(타입/팔레트/레이아웃 패밀리), 금지 사항 적용.- 빌드.
transitions에서 모션,react-bits에서 준비된 컴포넌트,gsap에서 씬 작업 가져오기. polish→ 출시 전에/impeccable polish+/impeccable audit실행.verify→ 데스크톱 + 모바일 너비 스크린샷, 아무것도 깨지지 않았는지 확인.
그냥 못생긴 UI 수정? → polish 단독 (시작: /impeccable audit <target>).
그냥 애니메이션? → 마이크로는 transitions, 씬은 gsap, 같은 요소에 둘 다 사용하지 마십시오.
페이지 느림 / vitals 실패? → web-vitals: 마크업 린트, LCP/CLS/INP 플레이북 적용, 그 다음 측정 (§8).
⚙️ 일회성 환경 참고 사항
extract는 **Node 20+**와 Playwright가 필요합니다 (npx designlang <url>가 첫 실행 시 설치를 처리합니다).polish스크립트는skills/impeccable/scripts/에 있는 자체 포함 바이너리입니다.sh가 없는 Windows에서는impeccable.cmd를 사용하십시오.taste스크립트는 제로-종속 Node입니다 (node skills/taste/scripts/lint.mjs src/).web-vitals린터는 제로-종속 Node 18+입니다 (node skills/web-vitals/scripts/webvitals.mjs page.html).verify는npm install -g @playwright/cli+playwright-cli install-browser chromium이 필요합니다.components로컬 소스는 일반 파일입니다 —ts-tailwind/(Tailwind 프로젝트) 또는ts-default/(CSS 프로젝트)에서 복사하거나, 라이브 레지스트리 사용:{"registries":{"@react-bits":"https://reactbits.dev/r/{name}.json"}}를components.json에 추가.- GSAP 예제는
examples/gsap/{vanilla,react,vue,nuxt}에 있습니다.
🧠 에이전트를 위한 규칙
- 하나의 도구, 하나의 진입점. 모든 요청은 이 파일을 통해 라우팅됩니다. 작업이 파이프라인과 일치하면, 파이프라인 순서대로 모듈별로 작업하십시오 — 모듈을 별도로 설치된 스킬로 찾지 마십시오. 이 모듈은 이 하나의 스킬에 내부적으로 포함되어 있습니다.
- 디스크에서 읽을 것. 모듈 경로는 이 파일의 디렉토리를 기준으로 합니다. 실행 전에 모듈의
MANUAL.md를 완전히 읽으십시오. - 일치시키고, 혼합하지 마십시오. 하나의 작업 → 하나의 기본 모듈. 위의 파이프라인 순서로만 모듈을 스택하십시오.
- 각 모듈의 금지 사항을 존중하십시오.
taste는 템플릿화된 외관을 금지합니다.impeccable은 회색-색상, 중첩 카드, 바운스 이징을 금지합니다.transitions와a11y는prefers-reduced-motion가드를 요구합니다.rtl-arabic은 아랍어의 문자 간격 및 RTL 페이지의 물리적left/right를 금지합니다.web-vitals는 지연 히어로, 무차원 미디어, 렌더링 차단 헤드 스크립트를 금지합니다. 규칙이 충돌하면 더 엄격한 규칙이 우선하며,a11y안전 규칙은 모든 미적 선호도보다 우선합니다. - 컴포넌트 이름을 절대 임의로 생성하지 마십시오. react-bits의 경우,
skills/react-bits/catalog.json에 있는 이름만 사용하십시오. 그렇지 않으면taste규칙에 따라 처음부터 빌드하십시오. - 측정하되, 눈대중으로 판단하지 마십시오. 대비 주장은
node skills/a11y/scripts/contrast.mjs에서 나옵니다. 토큰 내보내기는node skills/design-tokens/scripts/convert.mjs에서 나옵니다. 구조적 성능 주장은node skills/web-vitals/scripts/webvitals.mjs에서 나옵니다. 스크립트가 당신의 눈과 의견이 다르면, 스크립트가 우선합니다. - 아랍어 콘텐츠는 rtl-arabic을 통해 라우팅됩니다. 작업에 아랍어 또는 RTL 콘텐츠가 포함되는 순간, 다른 모듈이 주도하더라도 CSS를 작성하기 전에
skills/rtl-arabic/MANUAL.md를 읽으십시오. - 저작자 표시. 7개의 업스트림 모듈은 독립적인 오픈 소스 프로젝트에서 비롯됩니다 — 해당 라이선스를 유지하십시오 (
ATTRIBUTION.md참조). 4개의 독자 모듈 (rtl-arabic, a11y, design-tokens, web-vitals)은 이 번들의 일부입니다.