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
Compatible Platforms any
Findings: ["메타데이터 경고: 권장 필드 없음: 'requirements' (SKILL.md v2 권장)", "메타데이터 경고: 권장 필드 없음: 'changelog' (SKILL.md v2 권장)"]
✅ No security risks found.
AI Review Stage
스킬 메타데이터에서 `network: false`, `filesystem: false`, `subprocess: false`로 선언되어 있으며, 제공된 `main.py` 및 `lib/tokens.py` 코드에서 해당 권한을 사용하는 어떠한 시도도 발견되지 않았습니다. `os.path` 사용은 모듈 임포트를 위한 표준적인 방식으로 파일 시스템 접근으로 간주하지 않습니다. 정적 분석 결과 또한 'approved' 상태이며, 어떠한 위험 요소나 난독화, 금지된 실행 파일 사용이 보고되지 않았습니다. 코드는 순수하게 디자인 토큰을 생성, 변환, 감사하는 기능에 집중하고 있으며, 사용자 데이터를 무단으로 수집하거나 외부로 전송하는 기능은 없습니다. 전반적인 코드 품질은 스킬의 목적에 부합하며, 안전하게 배포될 수 있다고 판단됩니다.
Representative input/output examples for this skill. Agents can use these to understand how to invoke the skill and what output to expect.
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
}
All examples are also available via the agent API:
/v1/agent/skills/606c04de-5861-4374-abea-f14f22cf5e43/schema
No reviews yet. Be the first to leave one!