Agent Skills › jjongguet/oh-my-product › design-system

design-system

GitHub

用于提取、创建或同步设计系统令牌，支持从URL、代码或图片获取色彩、排版等数据，并更新DESIGN.md及生成多格式配置文件。

skills/design-system/SKILL.md jjongguet/oh-my-product

Trigger Scenarios

用户需要提取设计令牌需要同步设计系统配置

Install

npx skills add jjongguet/oh-my-product --skill design-system -g -y

More Options

Use without installing

npx skills use jjongguet/oh-my-product@design-system

指定 Agent (Claude Code)

npx skills add jjongguet/oh-my-product --skill design-system -a claude-code -g -y

安装 repo 全部 skill

npx skills add jjongguet/oh-my-product --all -g -y

预览 repo 内 skill

npx skills add jjongguet/oh-my-product --list

SKILL.md

Frontmatter

{
    "name": "design-system",
    "aliases": [
        "\/design-system",
        "extract tokens",
        "sync design",
        "design tokens",
        "color palette"
    ],
    "description": "Activate when the user wants to extract, sync, or manage design system tokens. Pulls color palettes, typography scales, spacing tokens from URLs or existing code and updates DESIGN.md.",
    "primaryRole": "designer"
}

Design System Skill (oh-my-product)

Use this skill when the user wants to extract, create, or synchronize design system tokens.

Capabilities

Token Extraction — Extract design tokens from:
- Live URLs (color palette, typography, spacing from computed styles)
- Existing CSS/SCSS/Tailwind config files
- Figma exports or design specs
- Screenshot images (via multimodal analysis)
DESIGN.md Sync — Update DESIGN.md sections:
- Color Palette & Roles (Section 2)
- Typography Rules (Section 3)
- Layout Principles (Section 5)
- Depth & Elevation (Section 6)
Token Format Generation — Output tokens as:
- CSS custom properties (--color-primary: #hex)
- Tailwind config extensions
- SCSS variables
- JSON token files (Style Dictionary compatible)

Workflow

Source — Identify where tokens come from (URL, file, image, manual spec)
Extract — Parse and normalize token values
Map — Assign semantic roles (primary, secondary, accent, surface, etc.)
Write — Update DESIGN.md and/or generate token config files
Verify — Check contrast ratios, validate completeness

Token Categories

Category	Required Tokens
Colors	primary, secondary, accent, background, surface, text, border, error, success, warning
Typography	heading (h1-h6), body, caption, overline font specs
Spacing	scale from 4px base (4, 8, 12, 16, 24, 32, 48, 64, 96)
Elevation	shadow-sm, shadow-md, shadow-lg, shadow-xl
Radius	sm (4px), md (8px), lg (16px), full (9999px)

Rules

Always output tokens with semantic names, never raw values only
Validate color contrast ratios (WCAG AA: 4.5:1 for text, 3:1 for large text)
Preserve existing DESIGN.md sections when updating — only modify relevant sections
Generate both human-readable (DESIGN.md) and machine-readable (CSS/JSON) outputs