UI/UX Pro Max 设计系统构建

Model: minimax-m3 | ¥0.20/call
UI设计Claude Opus 4.7视觉设计设计系统构建

设计系统构建：nextlevelbuilder/ui-ux-pro-max-skill: design-syste，适用于界面设计与视觉资产创作。

Calls: 1

Skill Documentation

UI/UX Pro Max 设计系统构建

摘要

设计系统构建：nextlevelbuilder/ui-ux-pro-max-skill: design-syste，适用于界面设计与视觉资产创作。

> 来源: nextlevelbuilder/ui-ux-pro-max-skill (113k stars) — 67 种 UI 风格 + 161 套配色

> 原文件: .claude/skills/design-system/SKILL.md

> 模型推荐: claude-opus-4-7 (设计美学)

这个 skill 是干嘛的

nextlevelbuilder 在 113k stars 的 ui-ux-pro-max-skill 仓库里整理的 UI/UX 设计系统 — 67 种 UI 风格一键切换 + 161 套配色 + 99 条 UX 规范。让 AI Agent 产出符合企业级设计标准的前端界面。

michael 强调"skill 要有相应的指导功能,指导用户使用",所以加了下面两节让 Agent 和用户对接。

---

🤖 Agent 使用说明

1. 用户提到"设计 / 改 UI / 配色 / 视觉"时触发

2. skill 优先于通用 design-sense 跑(因为它有 67 种风格选择)

3. 涉及"改颜色 / 字体 / 布局"前先问用户偏好(品牌色 / 风格)

4. 完工前跑 audit 自检

5. 完工后输出可执行的设计建议

👤 用户需要做什么?

1. 告诉 Agent 你要做什么样的设计(品牌页 / 产品页 / Dashboard / Banner / Slides)

2. 如果 Agent 反问"受众是谁 / 品牌色 / 风格倾向",按提示回答

3. 全程 Agent 自动化,你只需回答决策点

---

原 skill 内容(nextlevelbuilder/ui-ux-pro-max-skill/.claude/skills/design-system/SKILL.md,截断到 12k chars)

---

name: design-system

description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

argument-hint: "[component or token]"

license: MIT

metadata:

author: claudekit

version: "1.0.0"

---

Design System

Token architecture, component specifications, systematic design, slide generation.

When to Use

Token Architecture

Load: `references/token-architecture.md`

Three-Layer Structure

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

**Example:**

/* Primitive */
--color-blue-600: #2563EB;

/* Semantic */
--color-primary: var(--color-blue-600);

/* Component */
--button-bg: var(--color-primary);

Quick Start

**Generate tokens:**

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

**Validate usage:**

node scripts/validate-tokens.cjs --dir src/

References

| Topic | File |

|-------|------|

| Token Architecture | `references/token-architecture.md` |

| Primitive Tokens | `references/primitive-tokens.md` |

| Semantic Tokens | `references/semantic-tokens.md` |

| Component Tokens | `references/component-tokens.md` |

| Component Specs | `references/component-specs.md` |

| States & Variants | `references/states-and-variants.md` |

| Tailwind Integration | `references/tailwind-integration.md` |

Component Spec Pattern

| Property | Default | Hover | Active | Disabled |

|----------|---------|-------|--------|----------|

| Background | primary | primary-dark | primary-darker | muted |

| Text | white | white | white | muted-fg |

| Border | none | none | none | muted-border |

| Shadow | sm | md | none | none |

Scripts

| Script | Purpose |

|--------|---------|

| `generate-tokens.cjs` | Generate CSS from JSON token config |

| `validate-tokens.cjs` | Check for hardcoded values in code |

| `search-slides.py` | BM25 search + contextual recommendations |

| `slide-token-validator.py` | Validate slide HTML for token compliance |

| `fetch-background.py` | Fetch images from Pexels/Unsplash |

Templates

| Template | Purpose |

|----------|---------|

| `design-tokens-starter.json` | Starter JSON with three-layer structure |

Integration

**With brand:** Extract primitives from brand colors/typography

**With ui-styling:** Component tokens → Tailwind config

**Skill Dependencies:** brand, ui-styling

**Primary Agents:** ui-ux-designer, frontend-developer

Slide System

Brand-compliant presentations using design tokens + Chart.js + contextual decision system.

Source of Truth

| File | Purpose |

|------|---------|

| `docs/brand-guidelines.md` | Brand identity, voice, colors |

| `assets/design-tokens.json` | Token definitions (primitive→semantic→component) |

| `assets/design-tokens.css` | CSS variables (import in slides) |

| `assets/css/slide-animations.css` | CSS animation library |

Slide Search (BM25)

# Basic search (auto-detect domain)
python scripts/search-slides.py "investor pitch"

# Domain-specific search
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# Contextual search (Premium System)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration

Decision System CSVs

| File | Purpose |

|------|---------|

| `data/slide-strategies.csv` | 15 deck structures + emotion arcs + sparkline beats |

| `data/slide-layouts.csv` | 25 layouts + component variants + animations |

| `data/slide-layout-logic.csv` | Goal → Layout + break_pattern flag |

| `data/slide-typography.csv` | Content type → Typography scale |

| `data/slide-color-logic.csv` | Emotion → Color treatment |

| `data/slide-backgrounds.csv` | Slide type → Image category (Pexels/Unsplash) |

| `data/slide-copy.csv` | 25 copywriting formulas (PAS, AIDA, FAB) |

| `data/slide-charts.csv` | 25 chart types with Chart.js config |

Contextual Decision Flow

1. Parse goal/context
        ↓
2. Search slide-strategies.csv → Get strategy + emotion beats
        ↓
3. For each slide:
   a. Query slide-layout-logic.csv → layout + break_pattern
   b. Query slide-typography.csv → type scale
   c. Query slide-color-logic.csv → color treatment
   d. Query slide-backgrounds.csv → image if needed
   e. Apply animation class from slide-animations.css
        ↓
4. Generate HTML with design tokens
        ↓
5. Validate with slide-token-validator.py

Pattern Breaking (Duarte Sparkline)

Premium decks alternate between emotions for engagement:

"What Is" (frustration) ↔ "What Could Be" (hope)

System calculates pattern breaks at 1/3 and 2/3 positions.

Slide Requirements

**ALL slides MUST:**

1. Import `assets/design-tokens.css` - single source of truth

2. Use CSS variables: `var(--color-primary)`, `var(--slide-bg)`, etc.

3. Use Chart.js for charts (NOT CSS-only bars)

4. Include navigation (keyboard arrows, click, progress bar)

5. Center align content

6. Focus on persuasion/conversion

Chart.js Integration

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Use brand coral
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

Token Compliance

/* CORRECT - uses token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* WRONG - hardcoded */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

Reference Implementation

Working example with all features:

assets/designs/slides/claudekit-pitch-251223.html

Command

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Best Practices

1. Never use raw hex in components - always reference tokens

2. Semantic layer enables theme switching (light/dark)

3. Component tokens enable per-component customization

4. Use HSL format for opacity control

5. Document every token's purpose

6. **Slides must import design-tokens.css and use var() exclusively**

常见问题（FAQ）

使用「设计系统构建」这个 skill 能解决什么问题?

本 skill 专注于设计系统构建，nextlevelbuilder/ui-ux-pro-max-skill: design-system。它将相关流程标准化，帮助用户更快拿到可靠结果，减少重复手工操作。

什么情况下适合使用「设计系统构建」?

当你需要在设计系统构建相关工作中获得稳定、可复用的产出时最适合——无论是单次任务还是纳入日常工作流，都能直接调用。

使用「设计系统构建」前需要准备什么?

提供设计目标、品牌偏好或参考素材，越具体产出越贴合需求。

FAQ

👤 用户需要做什么?

1. 告诉 Agent 你要做什么样的设计(品牌页 / 产品页 / Dashboard / Banner / Slides)

2. 如果 Agent 反问"受众是谁 / 品牌色 / 风格倾向",按提示回答

3. 全程 Agent 自动化,你只需回答决策点

---

使用「设计系统构建」这个 skill 能解决什么问题?

本 skill 专注于设计系统构建，nextlevelbuilder/ui-ux-pro-max-skill: design-system。它将相关流程标准化，帮助用户更快拿到可靠结果，减少重复手工操作。

什么情况下适合使用「设计系统构建」?

当你需要在设计系统构建相关工作中获得稳定、可复用的产出时最适合——无论是单次任务还是纳入日常工作流，都能直接调用。

使用「设计系统构建」前需要准备什么?

提供设计目标、品牌偏好或参考素材，越具体产出越贴合需求。

Open AIMS China Panel