awesome-design-skills-registry

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Awesome Design Skills Registry

精选设计技能注册表

Skill by ara.so — Design Skills collection.

由ara.so提供的技能——设计技能合集。

Overview

概述

awesome-design-skills is a curated registry of 67 design system skill files optimized for AI-powered agentic tools (Claude Code, Cursor, Codex, Google Stitch). Each skill ships as a folder containing:

```
SKILL.md
```
— AI-agent instructions (tokens, component rules, accessibility constraints, quality gates)
```
DESIGN.md
```
— Human-readable design intent, rationale, and implementation notes

Pull any skill into your project with a single command using the TypeUI CLI.

Official registry: https://typeui.sh/design-skills

awesome-design-skills是一个精心整理的注册表，包含67个针对AI驱动的智能代理工具（Claude Code、Cursor、Codex、Google Stitch）优化的设计系统技能文件。每个技能以文件夹形式提供，包含：

```
SKILL.md
```
— AI代理指令（设计令牌、组件规则、无障碍约束、质量标准）
```
DESIGN.md
```
— 供人类阅读的设计意图、原理和实现说明

使用TypeUI CLI通过一条命令即可将任意技能拉取到你的项目中。

官方注册表： https://typeui.sh/design-skills

Installation

安装

Install TypeUI CLI

安装TypeUI CLI

The TypeUI CLI is the recommended way to pull design skills:

bash

npx typeui.sh pull <slug>

No installation required —

npx

runs the latest version directly.

Alternatively, install globally:

bash

npm install -g typeui.sh

推荐使用TypeUI CLI来拉取设计技能：

bash

npx typeui.sh pull <slug>

无需提前安装——

npx

会直接运行最新版本。

或者全局安装：

bash

npm install -g typeui.sh

Core Commands

核心命令

Pull a Design Skill

拉取设计技能

Pull a specific design skill by slug:

bash

npx typeui.sh pull glassmorphism

This creates a

design-skills/glassmorphism/

folder in your project with:

```
SKILL.md
```
(AI agent instructions)
```
DESIGN.md
```
(human documentation)

通过slug拉取特定设计技能：

bash

npx typeui.sh pull glassmorphism

这会在你的项目中创建

design-skills/glassmorphism/

文件夹，包含：

```
SKILL.md
```
（AI代理指令）
```
DESIGN.md
```
（人类可读文档）

List All Available Skills

列出所有可用技能

Browse all 67 skills interactively:

bash

npx typeui.sh list

Outputs a filterable list with slugs, descriptions, and preview URLs.

交互式浏览全部67个技能：

bash

npx typeui.sh list

输出包含slug、描述和预览链接的可筛选列表。

Pull Multiple Skills

批量拉取技能

Pull multiple skills in one command:

bash

npx typeui.sh pull brutalism glassmorphism claymorphism

一次命令拉取多个技能：

bash

npx typeui.sh pull brutalism glassmorphism claymorphism

Preview Before Pulling

拉取前预览

Visit the web gallery to preview styles before pulling:

bash

undefined

访问网页画廊在拉取前预览样式：

bash

undefined

Open in browser

在浏览器中打开

open https://typeui.sh/design-skills


Or preview a specific skill:

```bash
open https://typeui.sh/design-skills/glassmorphism

open https://typeui.sh/design-skills


或者预览特定技能：

```bash
open https://typeui.sh/design-skills/glassmorphism

Available Design Skills (67 Total)

可用设计技能（共67个）

Style Categories

风格分类

Modern & Minimalist:

```
clean
```
— Clean, minimal design with breathing room
```
flat
```
— Flat design with bold colors and simple shapes
```
contemporary
```
— Modern, balanced, accessible
```
elegant
```
— Refined typography and subtle interactions

Expressive & Creative:

```
brutalism
```
— Bold, raw, unapologetic design
```
glassmorphism
```
— Frosted glass effects with depth
```
claymorphism
```
— Soft, tactile, 3D elements
```
gradient
```
— Vibrant gradients and smooth color transitions
```
artistic
```
— Asymmetric layouts and creative freedom
```
doodle
```
— Hand-drawn, playful, sketch-like
```
colorful
```
— Vibrant, saturated color palettes

Professional & Enterprise:

```
enterprise
```
— Conservative, scalable, accessible
```
corporate
```
— Professional, trustworthy, structured
```
dashboard
```
— Data-dense interfaces with clear hierarchy
```
application
```
— Functional, utilitarian UI patterns

Specialized:

```
agentic
```
— AI-first design patterns for agentic workflows
```
claude
```
— Claude Code-optimized design tokens
```
bento
```
— Grid-based card layouts
```
levels
```
— Gaming-inspired progression UI
```
cafe
```
— Warm, inviting, community-focused

Full list of 67 skills: https://typeui.sh/design-skills

现代极简风：

```
clean
```
— 简洁、极简的设计，留有充足留白
```
flat
```
— 扁平化设计，搭配大胆色彩和简单形状
```
contemporary
```
— 现代、平衡、无障碍的设计
```
elegant
```
— 精致排版与微妙交互效果

创意表现力风：

```
brutalism
```
— 大胆、原始、毫不妥协的设计
```
glassmorphism
```
— 具有层次感的毛玻璃效果
```
claymorphism
```
— 柔软、有触感的3D元素
```
gradient
```
— 鲜艳渐变与平滑色彩过渡
```
artistic
```
— 不对称布局与创作自由
```
doodle
```
— 手绘风格、活泼俏皮的草图式设计
```
colorful
```
— 鲜艳饱和的调色板

专业企业风：

```
enterprise
```
— 保守、可扩展、无障碍的设计
```
corporate
```
— 专业、可信、结构化的设计
```
dashboard
```
— 数据密集型界面，层次清晰
```
application
```
— 功能性、实用型UI模式

特殊领域风：

```
agentic
```
— 面向智能代理工作流的AI优先设计模式
```
claude
```
— 针对Claude Code优化的设计令牌
```
bento
```
— 基于网格的卡片布局
```
levels
```
— 受游戏启发的进度式UI
```
cafe
```
— 温暖、有吸引力、社区导向的设计

完整67个技能列表： https://typeui.sh/design-skills

Using Design Skills with AI Agents

与AI代理工具配合使用设计技能

Claude Code (Claude Desktop)

Claude Code（Claude桌面版）

Pull the skill into your project:

bash

npx typeui.sh pull agentic

Reference it in your conversation:

@design-skills/agentic/SKILL.md

Build a dashboard using this design system

Claude Code reads
```
SKILL.md
```
and generates code following:
- Color tokens
- Typography scale
- Component patterns
- Accessibility rules
- Quality gates

将技能拉取到项目中：

bash

npx typeui.sh pull agentic

在对话中引用：

@design-skills/agentic/SKILL.md

使用此设计系统构建仪表盘

Claude Code读取
```
SKILL.md
```
并遵循以下规则生成代码：
- 颜色令牌
- 排版比例
- 组件模式
- 无障碍规则
- 质量标准

Cursor

Pull the skill:

bash

npx typeui.sh pull glassmorphism

Add to
```
.cursorrules
```
or reference directly:

Use the design system defined in design-skills/glassmorphism/SKILL.md

Cursor applies the design tokens when generating UI code.

拉取技能：

bash

npx typeui.sh pull glassmorphism

添加到
```
.cursorrules
```
或直接引用：

使用design-skills/glassmorphism/SKILL.md中定义的设计系统

Cursor在生成UI代码时应用设计令牌。

Codex / GitHub Copilot

Pull the skill:

bash

npx typeui.sh pull brutalism

Open
```
SKILL.md
```
in your editor alongside your code files
Copilot reads context and suggests components matching the design system

拉取技能：

bash

npx typeui.sh pull brutalism

在编辑器中同时打开
```
SKILL.md
```
和代码文件
Copilot读取上下文并提供符合设计系统的组件建议

File Structure

文件结构

After pulling a skill, your project structure:

your-project/
├── design-skills/
│   ├── glassmorphism/
│   │   ├── SKILL.md        # AI agent instructions
│   │   └── DESIGN.md       # Human documentation
│   ├── brutalism/
│   │   ├── SKILL.md
│   │   └── DESIGN.md
│   └── claymorphism/
│       ├── SKILL.md
│       └── DESIGN.md
├── src/
└── package.json

拉取技能后，你的项目结构如下：

your-project/
├── design-skills/
│   ├── glassmorphism/
│   │   ├── SKILL.md        # AI代理指令
│   │   └── DESIGN.md       # 人类可读文档
│   ├── brutalism/
│   │   ├── SKILL.md
│   │   └── DESIGN.md
│   └── claymorphism/
│       ├── SKILL.md
│       └── DESIGN.md
├── src/
└── package.json

Anatomy of SKILL.md

SKILL.md的结构

A typical

SKILL.md

file contains:

典型的

SKILL.md

文件包含：

1. Brand & Mission

1. 品牌与使命

markdown

undefined

markdown

undefined

Brand & Mission

品牌与使命

A design system focused on glass-like surfaces with depth and blur.

undefined

专注于具有层次感和模糊效果的类玻璃表面的设计系统。

undefined

2. Color Tokens

2. 颜色令牌

markdown

undefined

markdown

undefined

Color Palette

调色板

Primary: hsl(220, 90%, 56%)
Background: hsl(220, 20%, 10%)
Surface: hsl(220, 20%, 16%) with 40% opacity
Border: hsl(0, 0%, 100%) with 10% opacity

undefined

Primary: hsl(220, 90%, 56%)
Background: hsl(220, 20%, 10%)
Surface: hsl(220, 20%, 16%) （40%不透明度）
Border: hsl(0, 0%, 100%) （10%不透明度）

undefined

3. Typography

3. 排版

markdown

undefined

markdown

undefined

Typography

排版

Font family: Inter, system-ui, sans-serif
Scale: 12px, 14px, 16px, 20px, 24px, 32px, 48px
Line height: 1.5 for body, 1.2 for headings

undefined

字体家族: Inter, system-ui, sans-serif
字号比例: 12px, 14px, 16px, 20px, 24px, 32px, 48px
行高: 正文1.5，标题1.2

undefined

4. Component Patterns

4. 组件模式

markdown

undefined

markdown

undefined

Button

按钮

Background: rgba(255, 255, 255, 0.1)
Backdrop-filter: blur(10px)
Border: 1px solid rgba(255, 255, 255, 0.2)
Padding: 12px 24px
Border-radius: 12px

undefined

背景: rgba(255, 255, 255, 0.1)
背景模糊: blur(10px)
边框: 1px solid rgba(255, 255, 255, 0.2)
内边距: 12px 24px
圆角: 12px

undefined

5. Accessibility Rules

5. 无障碍规则

markdown

undefined

markdown

undefined

Accessibility

无障碍

WCAG 2.2 AA compliant contrast ratios (4.5:1 for text)
Keyboard-first navigation (Tab, Enter, Escape)
Focus visible: 2px solid ring with 2px offset
ARIA labels on all interactive elements

undefined

符合WCAG 2.2 AA对比度标准（文本4.5:1）
键盘优先导航（Tab、Enter、Escape）
可见焦点状态：2px实心环，偏移2px
所有交互元素添加ARIA标签

undefined

6. Quality Gates

6. 质量标准

markdown

undefined

markdown

undefined

Quality Gates

质量标准

All interactive elements keyboard-accessible
Color contrast passes WCAG AA
Focus states visible
Loading states for async actions
Error messages actionable and clear

undefined

所有交互元素支持键盘访问
颜色对比度通过WCAG AA标准
焦点状态可见
异步操作添加加载状态
错误消息清晰且可操作

undefined

DESIGN.md Overview

DESIGN.md概述

DESIGN.md

is the human companion to

SKILL.md

. It includes:

Design Overview: High-level visual direction
Rationale: Why these tokens/patterns exist
References: Links to inspiration (Dribbble, Behance, etc.)
Maintenance Notes: How to keep the system aligned

Example snippet:

markdown

undefined

DESIGN.md

是

SKILL.md

的人类配套文档，包含：

设计概述： 高层视觉方向
设计原理： 这些令牌/模式存在的原因
参考资料： 灵感来源链接（Dribbble、Behance等）
维护说明： 如何保持系统一致性

示例片段：

markdown

undefined

Design Overview

设计概述

Glassmorphism creates depth through layered, semi-transparent surfaces. Inspired by Apple's Big Sur and Microsoft Fluent Design.

毛玻璃效果通过分层半透明表面创造层次感。灵感来自Apple的Big Sur和Microsoft Fluent Design。

Rationale

设计原理

Blur effects create visual hierarchy without heavy shadows
Translucency allows background content to remain contextually visible
Works well in dark mode with reduced eye strain

undefined

模糊效果无需厚重阴影即可创建视觉层次
半透明性使背景内容保持上下文可见
在深色模式下使用可减少眼部疲劳

undefined

Code Examples

代码示例

React Component Using Glassmorphism Skill

使用毛玻璃技能的React组件

tsx

import React from 'react';

export function GlassCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div
      className="glass-card"
      style={{
        background: 'rgba(255, 255, 255, 0.1)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        borderRadius: '12px',
        padding: '24px',
      }}
    >
      <h2 style={{ fontSize: '24px', fontWeight: 600, marginBottom: '16px' }}>
        {title}
      </h2>
      {children}
    </div>
  );
}

tsx

import React from 'react';

export function GlassCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div
      className="glass-card"
      style={{
        background: 'rgba(255, 255, 255, 0.1)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        borderRadius: '12px',
        padding: '24px',
      }}
    >
      <h2 style={{ fontSize: '24px', fontWeight: 600, marginBottom: '16px' }}>
        {title}
      </h2>
      {children}
    </div>
  );
}

Tailwind CSS Config for Brutalism Skill

适用于粗野主义技能的Tailwind CSS配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#FF6B00',
        background: '#FFFFFF',
        text: '#000000',
        border: '#000000',
      },
      fontFamily: {
        sans: ['Space Grotesk', 'monospace'],
        display: ['Space Mono', 'monospace'],
      },
      borderWidth: {
        DEFAULT: '3px',
        thick: '6px',
      },
      boxShadow: {
        brutal: '8px 8px 0 0 #000000',
      },
    },
  },
};

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#FF6B00',
        background: '#FFFFFF',
        text: '#000000',
        border: '#000000',
      },
      fontFamily: {
        sans: ['Space Grotesk', 'monospace'],
        display: ['Space Mono', 'monospace'],
      },
      borderWidth: {
        DEFAULT: '3px',
        thick: '6px',
      },
      boxShadow: {
        brutal: '8px 8px 0 0 #000000',
      },
    },
  },
};

CSS Variables from Enterprise Skill

来自企业技能的CSS变量

css

:root {
  /* Colors */
  --color-primary: hsl(210, 100%, 50%);
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(210, 20%, 98%);
  --color-border: hsl(210, 20%, 88%);
  --color-text: hsl(210, 20%, 14%);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

css

:root {
  /* 颜色 */
  --color-primary: hsl(210, 100%, 50%);
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(210, 20%, 98%);
  --color-border: hsl(210, 20%, 88%);
  --color-text: hsl(210, 20%, 14%);

  /* 排版 */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Common Patterns

常见模式

Pattern 1: Multi-Skill Projects

模式1：多技能项目

Use multiple skills for different sections:

bash

undefined

为不同板块使用多个技能：

bash

undefined

Landing page uses Glassmorphism

落地页使用毛玻璃风格

npx typeui.sh pull glassmorphism

Dashboard uses Enterprise

仪表盘使用企业风格

npx typeui.sh pull enterprise

Marketing uses Gradient

营销页面使用渐变风格

npx typeui.sh pull gradient


Reference each skill in the appropriate component folder:

src/ ├── landing/ # Uses design-skills/glassmorphism/SKILL.md ├── dashboard/ # Uses design-skills/enterprise/SKILL.md └── marketing/ # Uses design-skills/gradient/SKILL.md

undefined

npx typeui.sh pull gradient


在对应组件文件夹中引用各技能：

src/ ├── landing/ # 使用design-skills/glassmorphism/SKILL.md ├── dashboard/ # 使用design-skills/enterprise/SKILL.md └── marketing/ # 使用design-skills/gradient/SKILL.md

undefined

Pattern 2: Custom Overrides

模式2：自定义覆盖

Pull a base skill and override specific tokens:

bash

npx typeui.sh pull clean

Edit

design-skills/clean/SKILL.md

markdown

undefined

拉取基础技能并覆盖特定令牌：

bash

npx typeui.sh pull clean

编辑

design-skills/clean/SKILL.md

：

markdown

undefined

Color Palette (Customized)

调色板（自定义）

Primary: hsl(280, 90%, 56%) /* Changed from blue to purple */
Background: hsl(0, 0%, 100%)
Text: hsl(0, 0%, 10%)

undefined

Primary: hsl(280, 90%, 56%) /* 从蓝色改为紫色 */
Background: hsl(0, 0%, 100%)
Text: hsl(0, 0%, 10%)

undefined

Pattern 3: Git Workflow

模式3：Git工作流

Commit design skills to your repository:

bash

git add design-skills/
git commit -m "Add glassmorphism and enterprise design skills"
git push

Now all team members and AI agents reference the same design system.

将设计技能提交到仓库：

bash

git add design-skills/
git commit -m "添加毛玻璃和企业设计技能"
git push

现在所有团队成员和AI代理都引用同一设计系统。

Pattern 4: Monorepo Setup

模式4：单仓库多包配置

Pull skills at the root or per package:

bash

undefined

在根目录或每个包中拉取技能：

bash

undefined

Root-level (shared across packages)

根目录级别（所有包共享）

npx typeui.sh pull enterprise

Package-specific

特定包

cd packages/web npx typeui.sh pull glassmorphism

cd ../mobile npx typeui.sh pull friendly

undefined

cd packages/web npx typeui.sh pull glassmorphism

cd ../mobile npx typeui.sh pull friendly

undefined

Configuration

配置

Custom Output Directory

自定义输出目录

Specify a custom directory for design skills:

bash

npx typeui.sh pull glassmorphism --output ./docs/design-system

指定设计技能的自定义目录：

bash

npx typeui.sh pull glassmorphism --output ./docs/design-system

Environment Variables

环境变量

If you fork the TypeUI CLI or self-host the registry:

bash

undefined

如果你fork了TypeUI CLI或自行托管注册表：

bash

undefined

.env

TYPEUI_REGISTRY_URL=https://your-registry.com/api


Then pull from your custom registry:

```bash
export TYPEUI_REGISTRY_URL=https://your-registry.com/api
npx typeui.sh pull custom-skill

TYPEUI_REGISTRY_URL=https://your-registry.com/api


然后从自定义注册表拉取：

```bash
export TYPEUI_REGISTRY_URL=https://your-registry.com/api
npx typeui.sh pull custom-skill

Troubleshooting

故障排除

Skill Not Found

技能未找到

If a skill slug is invalid:

bash

npx typeui.sh pull nonexistent-skill

如果技能slug无效：

bash

npx typeui.sh pull nonexistent-skill

Error: Skill "nonexistent-skill" not found in registry

错误：注册表中未找到技能"nonexistent-skill"


**Solution:** List available skills:

```bash
npx typeui.sh list

Or browse at https://typeui.sh/design-skills


**解决方案：** 列出可用技能：

```bash
npx typeui.sh list

或浏览https://typeui.sh/design-skills

Network Timeout

网络超时

If the registry is unreachable:

bash

npx typeui.sh pull glassmorphism

如果无法访问注册表：

bash

npx typeui.sh pull glassmorphism

Error: Request timeout

错误：请求超时


**Solution:** Check your internet connection or try again later.


**解决方案：** 检查网络连接或稍后重试。

Permission Denied

权限拒绝

npx

cannot create the

design-skills/

folder:

bash

npx typeui.sh pull glassmorphism

如果

npx

无法创建

design-skills/

文件夹：

bash

npx typeui.sh pull glassmorphism

Error: EACCES: permission denied, mkdir 'design-skills'

错误：EACCES: 权限被拒绝，无法创建目录'design-skills'


**Solution:** Run with elevated permissions or change directory ownership:

```bash
sudo npx typeui.sh pull glassmorphism

Or:

bash

sudo chown -R $USER:$USER .
npx typeui.sh pull glassmorphism


**解决方案：** 使用提升权限运行或更改目录所有权：

```bash
sudo npx typeui.sh pull glassmorphism

或：

bash

sudo chown -R $USER:$USER .
npx typeui.sh pull glassmorphism

Stale Cache

缓存过期

If you're seeing outdated skill content:

Solution: Clear

npx

cache:

bash

npx clear-npx-cache
npx typeui.sh pull glassmorphism

Or force-reinstall:

bash

npm install -g typeui.sh@latest
typeui.sh pull glassmorphism

如果看到过期的技能内容：

解决方案： 清除

npx

缓存：

bash

npx clear-npx-cache
npx typeui.sh pull glassmorphism

或强制重新安装：

bash

npm install -g typeui.sh@latest
typeui.sh pull glassmorphism

Advanced Usage

高级用法

Programmatic Access

程序化访问

If you're building tooling that integrates the registry:

javascript

import { fetch } from 'node-fetch';

async function fetchSkill(slug) {
  const response = await fetch(`https://typeui.sh/api/skills/${slug}`);
  const data = await response.json();
  return data;
}

const glassmorphism = await fetchSkill('glassmorphism');
console.log(glassmorphism.skill_md); // SKILL.md content
console.log(glassmorphism.design_md); // DESIGN.md content

如果你正在构建集成注册表的工具：

javascript

import { fetch } from 'node-fetch';

async function fetchSkill(slug) {
  const response = await fetch(`https://typeui.sh/api/skills/${slug}`);
  const data = await response.json();
  return data;
}

const glassmorphism = await fetchSkill('glassmorphism');
console.log(glassmorphism.skill_md); // SKILL.md内容
console.log(glassmorphism.design_md); // DESIGN.md内容

Creating Custom Skills

创建自定义技能

Fork the registry and create your own skill:

bash

git clone https://github.com/bergside/awesome-design-skills.git
cd awesome-design-skills/skills
mkdir my-custom-skill

Create

SKILL.md

and

DESIGN.md

markdown

<!-- skills/my-custom-skill/SKILL.md -->

Fork注册表并创建自己的技能：

bash

git clone https://github.com/bergside/awesome-design-skills.git
cd awesome-design-skills/skills
mkdir my-custom-skill

创建

SKILL.md

和

DESIGN.md

：

markdown

<!-- skills/my-custom-skill/SKILL.md -->

My Custom Skill

我的自定义技能

Brand & Mission

品牌与使命

A custom design system for internal tools.

为内部工具打造的自定义设计系统。

Color Palette

调色板

Primary: hsl(180, 80%, 50%)
Background: hsl(0, 0%, 98%)


Submit a pull request to add your skill to the registry.

Primary: hsl(180, 80%, 50%)
Background: hsl(0, 0%, 98%)


提交拉取请求将你的技能添加到注册表。

Integration with Other Tools

与其他工具集成

Storybook

Document design tokens in Storybook:

tsx

// .storybook/preview.tsx
import { SKILL_MD } from '../design-skills/glassmorphism/SKILL.md';

export const parameters = {
  docs: {
    page: () => <Markdown>{SKILL_MD}</Markdown>,
  },
};

在Storybook中记录设计令牌：

tsx

// .storybook/preview.tsx
import { SKILL_MD } from '../design-skills/glassmorphism/SKILL.md';

export const parameters = {
  docs: {
    page: () => <Markdown>{SKILL_MD}</Markdown>,
  },
};

Figma Variables

Figma变量

Export design tokens from

SKILL.md

to Figma variables:

bash

undefined

将

SKILL.md

中的设计令牌导出到Figma变量：

bash

undefined

Use a community plugin or script

使用社区插件或脚本

npx figma-export design-skills/glassmorphism/SKILL.md

undefined

npx figma-export design-skills/glassmorphism/SKILL.md

undefined

Design Linter

设计代码检查

Lint your codebase against

SKILL.md

rules:

bash

npx design-lint --skill design-skills/enterprise/SKILL.md src/

(Example tool — replace with your preferred linter)

根据

SKILL.md

规则检查代码库：

bash

npx design-lint --skill design-skills/enterprise/SKILL.md src/

（示例工具——替换为你偏好的检查工具）

Best Practices

最佳实践

Commit design skills to version control — Keep design and code in sync
Reference SKILL.md in AI agent prompts — Use
```
@design-skills/slug/SKILL.md
```
in Cursor/Claude
Update DESIGN.md when you override tokens — Document why you diverged
Use one skill per product area — Landing (Glassmorphism), Dashboard (Enterprise), Docs (Clean)
Pull skills early in the project — Establish design foundations before building components