Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/global-mindee/way/design-systemnpx skills add Global-mindee/WAY --skill design-systemgit clone --depth 1 https://github.com/Global-mindee/WAYWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/global-mindee/way/design-system)<a href="https://agentmods.dev/skills/global-mindee/way/design-system"><img src="https://agentmods.dev/badge/skills/global-mindee/way/design-system.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00097 | $0.00958 |
| Opus 5 | $0.00048 | $0.00479 |
| Sonnet 5 | $0.00019 | $0.00192 |
| Haiku 4.5 | $0.00010 | $0.00096 |
Grade A, and why
design-system scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Design System Skill
사용 시점
이 스킬은 다음 작업에 자동 활성화됩니다:
- 새 웹사이트 / 랜딩 페이지 제작
- React / Next.js 컴포넌트 비주얼 스타일 결정
- shadcn/ui 테마 커스터마이징
- Tailwind CSS 기반 UI 구현
- 특정 브랜드 스타일로 UI 생성 요청
- 색상, 타이포그래피, 레이아웃 결정
워크플로
- 브랜드 확인: 사용자에게 참고 브랜드 확인 (또는 아래 표에서 분위기에 맞는 것 추천)
- 레퍼런스 로드:
references/{brand}.md를 Read 툴로 읽기 - 적용: 해당 파일의 9개 섹션 (색상/타이포/컴포넌트/레이아웃/그림자/반응형/AI 프롬프트) 기반으로 UI 구현
- 접근성 우선:
accessibility-wcag스킬과 충돌 시 WCAG 기준 우선 적용
브랜드 레퍼런스 목록
| 브랜드 | 분위기 | 주요 색상 | 파일 |
|---|---|---|---|
| Claude | 따뜻함, editorial, 페이퍼 톤 | Parchment #f5f4ed, Terracotta #c96442 |
references/claude.md |
| Linear | Dark-first, 샤프, 미니멀 | Deep black, 보라 악센트 | references/linear.md |
| Stripe | Clean, 신뢰감, 파스텔 | White, Indigo #635bff |
references/stripe.md |
| Vercel | Monochrome, 모던 개발자 툴 | Black/White, Geist 폰트 | references/vercel.md |
공통 원칙 (브랜드 무관)
색상
- CSS 변수로 정의 → 다크모드 대응 용이
- 시맨틱 이름 사용:
--color-primary,--color-surface,--color-text-secondary - WCAG AA 색상 대비 4.5:1 이상 준수
컴포넌트
- shadcn/ui 기반 확장 우선
- Tailwind CSS 유틸리티 클래스 우선, 커스텀 CSS 최소화
- 상태별 스타일 명시: default / hover / focus / active / disabled
타이포그래피
- 폰트 계층 최대 3단계: display → body → caption
next/font사용으로 CLS 방지- body line-height 최소 1.5 이상
반응형
- Mobile-first 작성:
sm:md:lg:순서 - 터치 타겟 최소 44×44px
사용 예시
사용자: "Claude 스타일의 랜딩 페이지 hero 섹션 만들어줘"
→ references/claude.md 읽기 → Section 2(색상) + Section 4(버튼) + Section 9(AI 프롬프트) 적용
사용자: "Linear처럼 다크 모드 대시보드 카드 컴포넌트"
→ references/linear.md 읽기 → 해당 카드 스타일 적용
사용자: "결제 폼 UI, Stripe 느낌으로"
→ references/stripe.md 읽기 → 폼/인풋/버튼 스타일 적용
레퍼런스 추가 방법
새 브랜드가 필요하면 npx getdesign@latest add {brand} 로 DESIGN.md를 받아
references/{brand}.md 로 저장 후 위 테이블에 항목 추가.
사용 가능한 전체 브랜드: airbnb, airtable, apple, cursor, figma, framer, notion,
spotify, stripe, supabase, tesla, uber, vercel, zapier 등 66개.
(전체 목록: npx getdesign@latest list)
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 75 lines · 97 tokens per session scan A 8b0194c37ee7
design-system is a skill published in the GitHub repository Global-mindee/WAY (11 stars, last pushed 1mo ago), licensed MIT. It adds 97 tokens to every session and 958 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
Art
Static visual content across 20+ formats — diagrams, mermaid, infographics, D3 dashboards, comics, icons, wallpaper — via Nano Banana Pro (default), Nano Banana, and Flux. USE WHEN art, illustration, diagram, flowchart, infographic, header image, blog social thumbnail, visualize, generate image, mermaid, architecture…
CreateCLI
Generates production-ready TypeScript CLIs via a 3-tier template system (manual arg parsing, Commander.js, oclif), each shipping full implementation, docs, package.json, strict config, JSON output, and exit-code compliance. USE WHEN create CLI, build CLI, command-line tool, wrap API, add command, upgrade tier…
Daemon
Manage the public daemon profile — a digital representation of what you're working on. DaemonAggregator reads LifeOS sources (TELOS, KNOWLEDGE, PROJECTS, MEMORY/WORK, identity) → daemon-data.json. SecurityFilter strips names/paths/credentials via deterministic patterns (NOT LLM). Workflows: UpdateDaemon, ReadDaemon…
BiasCheck
Three-layer bias analysis on any URL, file, or text — auto-fetches the content and any cited study, then audits data-level biases, source conflicts of interest, and journalism-added distortions, separating what the data supports from what's editorialized. USE WHEN bias analysis, analyze bias, bias check, check this…
DetectAI
Detects AI-generated writing four ways — a heuristic audit against a catalog of known AI patterns, deterministic statistical signals (n-gram entropy, burstiness, repetition, stylometry — features never verdicts), an empirical Pangram score calibrated against known-human baselines, and a keyless scan for watermark and…
Interview
Evidence-grounded context refresh: reads constitutional files, TELOS, and CURRENTSTATE/IDEALSTATE dimension files via TelosFreshness, pulls observed data (Oura sleep/HRV, Conduit app-time, work registry, git, expenses via StateEvidence), and drives a peer conversation that opens with claim-vs-evidence contradictions…