Communitygithub.com

plugin87/token-build

토큰 빌드 파이프라인을 설정하거나 실행합니다 — DTCG tokens/*.json(진실 공급원)을 Style Dictionary / Tokens Studio / W3C DTCG 내보내기를 통해 플랫폼 아티팩트(CSS 변수, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose)로 변환합니다. 사용자가 토큰에서 플랫폼 테마 파일 생성, 토큰 CI 연결 또는 멀티 플랫폼 토큰 출력을 원할 때 사용하세요.

token-build란 무엇인가요?

이 스킬은 DTCG 형식의 토큰 소스 파일(`tokens/*.json`)을 여러 플랫폼에 맞춘 최종 테마 아티팩트로 변환하는 완전한 빌드 파이프라인을 제공합니다. 웹(CSS 변수, Tailwind v4 @theme), 모바일(iOS Asset Catalog, Android colors.xml/Compose), 타입드 JS/TS 등 다양한 출력을 지원하며, Style Dictionary를 기본 도구로 사용합니다. Tokens Studio(Figma 연동), W3C DTCG 내보내기, 또는 사용자 정의 스크립트 옵션도 제공하여 유연성을 높였습니다. CI 파이프라인에 통합되어 `tokens/*.json` 변경 시 자동 유효성 검사(`validate_tokens.py`)와 재생성을 수행하며, 커밋된 아티팩트가 최신 상태인지 확인합니다. 대비 검사(`contrast.py`)를 통한 색상 접근성, 델타 기반의 테마 오버라이드(다크/브랜드/밀도) 규칙을 준수합니다.

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

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

스킬: 토큰 빌드

DTCG 토큰 진실 공급원을 플랫폼에 맞는 출력물로 변환합니다. 토큰은 한 번 작성되고, 모든 플랫폼 출력물이 생성됩니다.

단계

  1. workflows/token-build.md를 읽으십시오(아키텍처, 도구 옵션, 해상도 규칙, 출력 대상, CI).
  2. 도구를 선택하십시오: Style Dictionary(멀티 플랫폼, 기본값), Tokens Studio(Figma 소유 토큰 — figma-integration과 함께 사용), W3C DTCG 내보내기, 또는 소형 사용자 정의 스크립트(scripts/validate_tokens.py를 모델로 삼음).
  3. 해상도 규칙을 준수하십시오: 플랫폼별로 별칭을 최종 값으로 해석하고, 시맨틱 및 컴포넌트 토큰을 노출하며(프리미티브는 내부 유지), 베이스 + 다크/브랜드/밀도 오버라이드(tokens/theming.json)를 델타로만 내보내고, $type으로 형식을 지정하십시오.
  4. 요청된 대상을 생성하십시오: CSS :root 변수, Tailwind v4 @theme, 타입드 JS/TS, iOS Asset Catalog + Color.DS/Spacing, Android colors.xml/Compose 테마.
  5. CI를 연결하십시오: tokens/*.json 변경 시 scripts/validate_tokens.py 실행, 재생성, 커밋된 아티팩트가 최신이 아니면 실패 처리; scripts/contrast.py로 색상을 검증하십시오.

검증(완료 기준)

  • python3 scripts/validate_tokens.py가 통과되어야 합니다(미해결 별칭 없음).
  • 재생성 시 커밋된 아티팩트와 diff가 없어야 합니다.
  • 다크/브랜드/밀도 출력은 전체 복사본이 아닌 델타만 포함해야 합니다.

Individual skills in this repo

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

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

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/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/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community