제품 전반에 걸쳐 시각적 및 동작적 일관성을 보장하는 디자인 토큰, 구성 요소 라이브러리, 문서 및 도구의 조정된 세트인 디자인 시스템을 구축하거나 유지 관리할 때 사용합니다. 사용 대상: 시스템 아키텍처 설계, 토큰 형식과 구성 요소 프레임워크 선택, Figma를 코드에 연결, 설계에서 개발까지의 워크플로, 다중 플랫폼 일관성 사용하지 마십시오: 특정 토큰 작성(디자인 토큰 사용), Figma 워크플로(figma 사용), 구성 요소 카탈로그 작성(스토리북 사용), 토큰 변환(스타일 사전 사용), 프레임워크 간 구성 요소(유사분열 사용)
명령줄에서 design-system AI 스킬을 개발 환경에 빠르게 설치
출처: tyler-r-kendrick/agent-skills.
Overview A design system is the single source of truth for an organization's UI — combining design tokens, component libraries, documentation, and tooling into a cohesive ecosystem. It ensures consistency, accelerates development, and bridges the gap between design and engineering.
Token Architecture Design tokens are the atomic values of a design system — colors, spacing, typography, elevation, motion. They flow through three tiers:
| Global | blue-500: #3b82f6 | Raw palette values | | Alias / Semantic | color-primary: {blue-500} | Intent-based references | | Component | button-bg: {color-primary} | Scoped to a specific component |
제품 전반에 걸쳐 시각적 및 동작적 일관성을 보장하는 디자인 토큰, 구성 요소 라이브러리, 문서 및 도구의 조정된 세트인 디자인 시스템을 구축하거나 유지 관리할 때 사용합니다. 사용 대상: 시스템 아키텍처 설계, 토큰 형식과 구성 요소 프레임워크 선택, Figma를 코드에 연결, 설계에서 개발까지의 워크플로, 다중 플랫폼 일관성 사용하지 마십시오: 특정 토큰 작성(디자인 토큰 사용), Figma 워크플로(figma 사용), 구성 요소 카탈로그 작성(스토리북 사용), 토큰 변환(스타일 사전 사용), 프레임워크 간 구성 요소(유사분열 사용) 출처: tyler-r-kendrick/agent-skills.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/tyler-r-kendrick/agent-skills --skill design-system제품 전반에 걸쳐 시각적 및 동작적 일관성을 보장하는 디자인 토큰, 구성 요소 라이브러리, 문서 및 도구의 조정된 세트인 디자인 시스템을 구축하거나 유지 관리할 때 사용합니다. 사용 대상: 시스템 아키텍처 설계, 토큰 형식과 구성 요소 프레임워크 선택, Figma를 코드에 연결, 설계에서 개발까지의 워크플로, 다중 플랫폼 일관성 사용하지 마십시오: 특정 토큰 작성(디자인 토큰 사용), Figma 워크플로(figma 사용), 구성 요소 카탈로그 작성(스토리북 사용), 토큰 변환(스타일 사전 사용), 프레임워크 간 구성 요소(유사분열 사용) 출처: tyler-r-kendrick/agent-skills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/tyler-r-kendrick/agent-skills --skill design-system 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/tyler-r-kendrick/agent-skills