curl -L -o design-token-generator.skill "https://aiskillstore.io/v1/agent/skills/606c04de-5861-4374-abea-f14f22cf5e43/download?platform=ClaudeCode"
{
"tool": "download_skill",
"arguments": {
"skill_id": "606c04de-5861-4374-abea-f14f22cf5e43",
"platform": "ClaudeCode"
}
}
{
"mcpServers": {
"skill-store": {
"url": "https://aiskillstore.io/mcp/"
}
}
}
Generate and convert design system tokens (color, typography, spacing) across CSS variables, Tailwind config, Figma Tokens, and WCAG contrast audit
호환 플랫폼: any
검사 결과: ["메타데이터 경고: 권장 필드 없음: 'requirements' (SKILL.md v2 권장)", "메타데이터 경고: 권장 필드 없음: 'changelog' (SKILL.md v2 권장)"]
✅ 보안 위험 항목이 발견되지 않았습니다.
AI 검수 단계
스킬 메타데이터에서 `network: false`, `filesystem: false`, `subprocess: false`로 선언되어 있으며, 제공된 `main.py` 및 `lib/tokens.py` 코드에서 해당 권한을 사용하는 어떠한 시도도 발견되지 않았습니다. `os.path` 사용은 모듈 임포트를 위한 표준적인 방식으로 파일 시스템 접근으로 간주하지 않습니다. 정적 분석 결과 또한 'approved' 상태이며, 어떠한 위험 요소나 난독화, 금지된 실행 파일 사용이 보고되지 않았습니다. 코드는 순수하게 디자인 토큰을 생성, 변환, 감사하는 기능에 집중하고 있으며, 사용자 데이터를 무단으로 수집하거나 외부로 전송하는 기능은 없습니다. 전반적인 코드 품질은 스킬의 목적에 부합하며, 안전하게 배포될 수 있다고 판단됩니다.
이 스킬의 대표적인 입출력 예시입니다. 에이전트는 이 예시를 보고 스킬 호출 방법과 결과 형태를 이해할 수 있습니다.
Generate full design token set for a Brutalist design system
{
"action": "generate",
"preset": "Brutalist"
}
{
"action": "generate",
"ok": true,
"result": {
"preset": "Brutalist",
"token_count": 12,
"tokens": {
"color": {
"accent": "#ff0000",
"background": "#f5f5dc",
"primary": "#000000",
"secondary": "#ffffff",
"surface": "#ffffff",
"text": "#000000"
},
"spacing": {
"base": "8px",
"scale": 2
},
"typography": {
"font_family_base": "\u0027Courier New\u0027, monospace",
"font_size_base": "16px",
"font_size_scale": 1.333,
"line_height_base": 1.2
}
}
}
}
Convert token JSON to CSS custom properties
{
"action": "css",
"tokens": {
"color": {
"accent": "#ff0000",
"background": "#f5f5dc",
"primary": "#000000"
},
"spacing": {
"base": "8px"
},
"typography": {
"font_family_base": "\u0027Courier New\u0027, monospace",
"font_size_base": "16px"
}
}
}
{
"action": "css",
"ok": true,
"result": {
"css": "CSS string with :root { --color-primary: #000000; --color-accent: #ff0000; ... } block",
"variable_count": 5
}
}
Convert tokens to tailwind.config.js theme section
{
"action": "tailwind",
"tokens": {
"color": {
"accent": "#ff0000",
"primary": "#000000"
},
"spacing": {
"base": "8px"
},
"typography": {
"font_family_base": "\u0027Courier New\u0027, monospace",
"font_size_base": "16px"
}
}
}
{
"action": "tailwind",
"ok": true,
"result": {
"color_count": 2,
"tailwind_config": "module.exports = { theme: { extend: { colors: { primary: \u0027#000000\u0027, accent: \u0027#ff0000\u0027 }, fontFamily: { base: [\u0027Courier New\u0027, \u0027monospace\u0027] } } } };"
}
}
Convert tokens to Figma Tokens Plugin compatible JSON
{
"action": "figma",
"tokens": {
"color": {
"accent": "#ff0000",
"primary": "#000000"
},
"spacing": {
"base": "8px"
}
}
}
{
"action": "figma",
"ok": true,
"result": {
"figma_tokens": "Figma Tokens Plugin JSON with global token set containing color.primary and color.accent value/type objects",
"token_count": 3
}
}
Check color pairs for WCAG AA and AAA accessibility compliance
{
"action": "audit",
"tokens": {
"color": {
"accent": "#ff0000",
"background": "#f5f5dc",
"primary": "#000000",
"secondary": "#ffffff",
"text": "#000000"
}
}
}
{
"action": "audit",
"ok": true,
"result": {
"findings": [
{
"aa": false,
"aaa": false,
"pair": "accent on background",
"ratio": 3.2,
"recommendation": "Increase contrast \u2014 AA requires 4.5:1 for normal text"
}
],
"pairs_checked": 4,
"summary": {
"aa_fail": 1,
"aa_pass": 3,
"aaa_pass": 2
},
"wcag_compliant": false
}
}
Generate Cyberpunk tokens with dark mode variants included
{
"action": "generate",
"include_dark_mode": true,
"preset": "Cyberpunk"
}
{
"action": "generate",
"ok": true,
"result": {
"preset": "Cyberpunk",
"token_count": 14,
"tokens": {
"color": {
"accent": "#ff00ff",
"background": "#0d0208",
"primary": "#00ff41",
"secondary": "#0d0208",
"surface": "#1a0a1a",
"text": "#00ff41"
},
"dark": {
"background": "#000000",
"surface": "#0d0208",
"text": "#00ff41"
},
"spacing": {
"base": "8px"
},
"typography": {
"font_family_base": "\u0027Share Tech Mono\u0027, monospace",
"font_size_base": "14px"
}
}
}
}
Clean minimal design system with neutral tones
{
"action": "generate",
"preset": "Minimal"
}
{
"action": "generate",
"ok": true,
"result": {
"preset": "Minimal",
"token_count": 11,
"tokens": {
"color": {
"accent": "#3b82f6",
"background": "#ffffff",
"primary": "#1a1a1a",
"secondary": "#6b7280",
"surface": "#f9fafb",
"text": "#111827"
},
"spacing": {
"base": "4px"
},
"typography": {
"font_family_base": "\u0027Inter\u0027, sans-serif",
"font_size_base": "16px",
"font_size_scale": 1.25
}
}
}
}
Returns structured error when tokens field is missing
{
"action": "css"
}
{
"action": "css",
"error": {
"code": "MISSING_FIELD",
"message": "Field \u0027tokens\u0027 is required for action \u0027css\u0027"
},
"ok": false
}
모든 예시는 에이전트 API로도 조회 가능:
/v1/agent/skills/606c04de-5861-4374-abea-f14f22cf5e43/schema
아직 리뷰가 없습니다. 첫 번째 리뷰를 남겨보세요!