Communitygithub.com

plugin87/design-tokens

DTCG 형식의 디자인 토큰을 생성, 확장 또는 감사하며 3계층 아키텍처(원시 → 의미 → 컴포넌트)를 따릅니다. 사용자가 컬러 팔레트, 타입 스케일, 간격/그림자/반경/모션 토큰, 멀티 브랜드 테마를 원하거나 토큰 파일을 검증해야 할 때 사용하세요. 색상, 타이포그래피, 간격, 그림자, 테두리, 중단점, 모션, 그라디언트, 투명도, 블러, 크기, 상태, 테마를 다룹니다.

design-tokens란 무엇인가요?

이 스킬은 DTCG(`$type`/`$value`) 형식의 디자인 토큰을 생성, 확장 및 감사하는 Claude Code·Cursor·Codex 등에서 동작하는 에이전트 도구입니다. 3계층 아키텍처(원시 → 의미 → 컴포넌트)를 엄격히 준수하며, 프로젝트 룰 파일과 기존 토큰 파일을 참조하여 OKLCH 기반 컬러 팔레트, Major Third 타입 스케일, 4px 그리드 기반 간격, 그림자, 테두리, 중단점, 모션, 그라디언트, 투명도, 블러, 크기, 상태, 멀티 브랜드 테마 등의 토큰을 일관성 있게 생성합니다. 특히 접근성 감사(`scripts/contrast.py`)와 JSON 유효성 검사(`scripts/validate_tokens.py`)를 자동으로 실행하여 명암비 기준(텍스트 4.5:1, UI 3:1)을 충족하고 별칭 참조가 올바른지 확인합니다. 각 토큰에 `$description`을 유지하며 하드코딩 대신 참조를 사용하는 것이 핵심 원칙입니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-tokens
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Skill: 디자인 토큰

프로젝트의 3계층 시스템에 따라 DTCG($type/$value) 토큰을 생성하고 유지 관리합니다.

단계

  1. .claude/rules/tokens-and-color.md → "토큰 시스템" + "색상 가이드라인" 및 .claude/rules/typography-and-spacing.md의 규칙(4px 기준, Major Third 스케일, OKLCH 팔레트 생성, 의미 계층에서 다크 모드)을 읽습니다.
  2. 구조를 일치시키기 위해 tokens/ 디렉토리의 관련 기존 파일(colors.json, typography.json, spacing.json, shadows.json, borders.json, breakpoints.json, motion.json, gradients.json, opacity.json, blur.json, sizing.json, states.json, theming.json)을 읽습니다.
  3. 토큰 생성/확장:
    • 원시 값 = 직접 사용되지 않는 원시 값. 의미 = 목적에 따른 별칭. 컴포넌트 = 컴포넌트 범위.
    • 새 팔레트: 11가지 OKLCH 음영 생성; 500 ≥ 4.5:1(텍스트용 흰색 배경), 600 ≥ 3:1(UI용)인지 a11y-audit 스킬 / scripts/contrast.py를 통해 확인합니다.
    • 멀티 브랜드/밀도 → theming.json.
  4. 검증: python3 scripts/validate_tokens.py를 실행하여 JSON 유효성 및 별칭 해결을 확인합니다.

출력

DTCG JSON. 모든 토큰에 $description을 유지합니다. 하드코딩하지 말고 참조를 사용하세요.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community