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 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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" 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.1 | $0.00097 | $0.00958 |
| Opus 5.5 | $0.00039 | $0.00383 |
| Sonnet 5.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 1mo 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.
- 1mo 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.0004 per session on Opus 5.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
Webdesign
Designs and integrates web interfaces via DirectDesign (inline, Anthropic frontend-design philosophy, the default) or NativeDesign (/design artboards plus /design-sync design-system sync). USE WHEN web design, UI design, artboards, design variants, create prototype, design system, design sync, redesign site, mockup…
figma-to-coded-html
Convert Figma designs into self-contained, shareable single-file HTML with all UI elements coded in HTML/CSS/SVG and only actual photographs embedded as inline base64. Use this skill whenever the user asks to convert a Figma file/URL to HTML, export Figma designs as code, create HTML from Figma, turn a Figma mockup…
high-end-website-design
End-to-end pipeline for producing ULTRA high-end, novel, single-file HTML landing pages and presentation slides featuring AI-generated hero imagery and seamlessly looping AI video backgrounds. Combines Gemini Nano Banana Pro for cinematic stills, ByteDance Seedance 2.0 for native looping video clips (firstFrameUrl ==…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.