SkillAtlasSkill 详情

basic

A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code...

审核状态：已审核Quality 72Security 82

复制安装命令

用 Codex 或 Claude 安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它先审查 Skill 页面再帮你安装。

复制前请先查看来源、License 和安全提示。

项目 README

来源文件：README.md

抓取于 2026年8月15日

Awesome Design Skills Awesome

awesome-design-skills

A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.

Each skill now ships as a folder with:

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

Preview all design skills on TypeUI

Design Skills

Agentic
Agentic
npx typeui.sh pull agentic 		Ant
Ant
npx typeui.sh pull ant 		Roku
Roku
npx typeui.sh pull roku
Artistic
Artistic
npx typeui.sh pull artistic 		Bento
Bento
npx typeui.sh pull bento 		Bold
Bold
npx typeui.sh pull bold
Brutalism
Brutalism
npx typeui.sh pull brutalism 		Cafe
Cafe
npx typeui.sh pull cafe 		Claymorphism
Claymorphism
npx typeui.sh pull claymorphism
Claude
Claude
npx typeui.sh pull claude 		Clean
Clean
npx typeui.sh pull clean 		Codex
Codex
npx typeui.sh pull codex
Colorful
Colorful
npx typeui.sh pull colorful 		Contemporary
Contemporary
npx typeui.sh pull contemporary 		Corporate
Corporate
npx typeui.sh pull corporate
Cosmic
Cosmic
npx typeui.sh pull cosmic 		Creative
Creative
npx typeui.sh pull creative 		Enterprise
Enterprise
npx typeui.sh pull enterprise
Dithered
Dithered
npx typeui.sh pull dithered 		Doodle
Doodle
npx typeui.sh pull doodle 		Dramatic
Dramatic
npx typeui.sh pull dramatic
Editorial
Editorial
npx typeui.sh pull editorial 		Square
Square
npx typeui.sh pull square 		Pulse
Pulse
npx typeui.sh pull pulse
Stitch
Stitch
npx typeui.sh pull stitch 		Expressive
Expressive
npx typeui.sh pull expressive 		Fantasy
Fantasy
npx typeui.sh pull fantasy
Fiction
Fiction
npx typeui.sh pull fiction 		Flat
Flat
npx typeui.sh pull flat 		Friendly
Friendly
npx typeui.sh pull friendly
Futuristic
Futuristic
npx typeui.sh pull futuristic 		Glassmorphism
Glassmorphism
npx typeui.sh pull glassmorphism 		Gradient
Gradient
npx typeui.sh pull gradient
Immersive
Immersive
npx typeui.sh pull immersive 		Impeccable
Impeccable
npx typeui.sh pull impeccable 		Levels
Levels
npx typeui.sh pull levels
Lingo
Lingo
npx typeui.sh pull lingo 		Power
Power
npx typeui.sh pull power 		Material
Material
npx typeui.sh pull material
Matrix
Matrix
npx typeui.sh pull matrix 		Minimal
Minimal
npx typeui.sh pull minimal 		Modern
Modern
npx typeui.sh pull modern
Mono
Mono
npx typeui.sh pull mono 		Neon
Neon
npx typeui.sh pull neon 		Neobrutalism
Neobrutalism
npx typeui.sh pull neobrutalism
Neumorphism
Neumorphism
npx typeui.sh pull neumorphism 		Pacman
Pacman
npx typeui.sh pull pacman 		Paper
Paper
npx typeui.sh pull paper
Perspective
Perspective
npx typeui.sh pull perspective 		Premium
Premium
npx typeui.sh pull premium 		Professional
Professional
npx typeui.sh pull professional
Basic
Basic
npx typeui.sh pull basic 		Refined
Refined
npx typeui.sh pull refined 		Retro
Retro
npx typeui.sh pull retro
Riso
Riso
npx typeui.sh pull riso 		Sega
Sega
npx typeui.sh pull sega 		Shadcn
Shadcn
npx typeui.sh pull shadcn
Geometric
Geometric
npx typeui.sh pull geometric 		Sketch
Sketch
npx typeui.sh pull sketch 		Skeumorphism
Skeumorphism
npx typeui.sh pull skeumorphism
Sleek
Sleek
npx typeui.sh pull sleek 		Spacious
Spacious
npx typeui.sh pull spacious 		Storytelling
Storytelling
npx typeui.sh pull storytelling
Terracotta
Terracotta
npx typeui.sh pull terracotta 		Tetris
Tetris
npx typeui.sh pull tetris 		Vibrant
Vibrant
npx typeui.sh pull vibrant
Vintage
Vintage
npx typeui.sh pull vintage

Quick Start

Pull any design skill directly into your project using the TypeUI CLI:

npx typeui.sh pull <slug>

For example, to pull the Glassmorphism design skill:

npx typeui.sh pull glassmorphism

Or browse all available skills interactively:

npx typeui.sh list

What is a Design Skill?

A design skill is a folder containing SKILL.md and DESIGN.md.

SKILL.md acts as the instruction source for AI agents and LLMs. It contains:

  • Brand & mission — the design philosophy and visual identity
  • Style foundations — typography scale, color palette, spacing system
  • Component families — buttons, inputs, cards, modals, navigation, and more
  • Accessibility rules — WCAG 2.2 AA compliance, keyboard-first interactions
  • Writing tone — content and voice guidelines
  • Do/Don't rules — explicit patterns and anti-patterns
  • Quality gates — testable acceptance criteria for code review

DESIGN.md is a companion document for human readers and maintainers. It captures:

  • Design overview — concise summary of the visual direction
  • Rationale and references — context for why patterns/tokens exist
  • Maintenance notes — guidance for keeping design decisions aligned over time

When an AI agent reads a skill file, it follows the SKILL.md guidelines to generate UI code that is consistent, accessible, and true to the design system.

Usage

Pull a skill into your project

Use the TypeUI CLI to pull any skill by its slug:

npx typeui.sh pull <slug>

The CLI will fetch the SKILL.md file from this registry and write it to your configured provider paths (e.g., .cursor/skills/, .claude/, etc.). The companion DESIGN.md remains in this repo alongside each skill for reference and maintenance.

Specify providers

Target specific agentic tools when pulling:

npx typeui.sh pull glassmorphism -p cursor,claude

Preview before writing

Use --dry-run to see what would be written without making changes:

npx typeui.sh pull glassmorphism --dry-run

Browse and pull interactively

List all available skills with preview links, then pull one:

npx typeui.sh list

Generate a custom skill

Run the interactive prompts to create your own design system skill:

npx typeui.sh generate

Registry Structure

Each skill lives in its own folder under skills/:

skills/
├── index.json          # Slug-keyed map for fast CLI lookups
├── glassmorphism/
│   ├── SKILL.md        # AI-agent instruction file
│   └── DESIGN.md       # Human-readable design companion
├── brutalism/
│   ├── SKILL.md
│   └── DESIGN.md
├── minimal/
│   ├── SKILL.md
│   └── DESIGN.md
└── ...

The index.json file maps each slug to its skill path:

{
  "glassmorphism": {
    "slug": "glassmorphism",
    "name": "Glassmorphism",
    "skillPath": "skills/glassmorphism/SKILL.md"
  }
}

When you run npx typeui.sh pull <slug>, the CLI reads this index, resolves the skill path, and fetches the corresponding SKILL.md file. DESIGN.md is stored next to each skill for human-facing documentation.

Contributing

Contributions are welcome! If you'd like to add a new design skill to the registry:

  1. Create a new folder under skills/ with your slug name
  2. Add a SKILL.md file following the existing format
  3. Add a companion DESIGN.md file in the same folder
  4. Add an entry to skills/index.json
  5. Submit a pull request

Please ensure your skill file includes all required sections: mission, brand, style foundations, component families, accessibility rules, writing tone, do/don't rules, and quality gates.

License

MIT License © Built and maintained by Bergside.

Sponsors

A huge thank you to the companies supporting our open-source work.

Skybridge
Skybridge

Want to see your logo here? Become a sponsor.

其他

低风险

  • 来源需自行核对维护者身份。
  • 包含脚本或命令调用，安装前请复核。
  • 可能需要外部 token、网络权限或第三方服务。
  • 未检测到高风险命令。
  • 扫描发现：0 条。

Codex — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/bergside/awesome-design-skills.git
  3. 将 "skills/basic" 文件夹复制到 Codex 的 skills 目录中。
  4. 重启 Codex 让新的 skill 生效。

Codex — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Codex 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Codex 让新的 skill 生效。

Claude Code — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/bergside/awesome-design-skills.git
  3. 将 "skills/basic" 文件夹复制到 Claude Code 的 skills 目录中。
  4. 重启 Claude Code 让新的 skill 生效。

Claude Code — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Claude Code 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Claude Code 让新的 skill 生效。

Cursor — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/bergside/awesome-design-skills.git
  3. 将 "skills/basic" 文件夹复制到 Cursor 的 skills 目录中。
  4. 重启 Cursor 让新的 skill 生效。

Cursor — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Cursor 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Cursor 让新的 skill 生效。

GitHub Copilot — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/bergside/awesome-design-skills.git
  3. 将 "skills/basic" 文件夹复制到 GitHub Copilot 的 skills 目录中。
  4. 重启 GitHub Copilot 让新的 skill 生效。

GitHub Copilot — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 GitHub Copilot 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 GitHub Copilot 让新的 skill 生效。

Windsurf — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/bergside/awesome-design-skills.git
  3. 将 "skills/basic" 文件夹复制到 Windsurf 的 skills 目录中。
  4. 重启 Windsurf 让新的 skill 生效。

Windsurf — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Windsurf 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: basic
description: Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
license: MIT
metadata:
  author: typeui.sh

Basic Design System Skill (Universal)

Mission

You are an expert design-system guideline author for Basic. Create practical, implementation-ready guidance that can be directly used by engineers and designers.

Brand

Basic design style defines the visual language of books, magazines, and reports, ranging from clean minimalism to ornate, expressive, or retro aesthetics

Style Foundations

  • Visual style: modern, editorial
  • Typography scale: desktop-first expressive scale | Fonts: primary=Nunito, display=Oswald, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
  • Color palette: primary, neutral, success, warning, danger | Tokens: primary=#A855F7, secondary=#0A1829, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#0A1829
  • Spacing scale: 4/8/12/16/24/32

Accessibility

WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support

Writing Tone

concise, confident, professional

Rules: Do

  • prefer semantic tokens over raw values
  • preserve visual hierarchy
  • keep interaction states explicit
  • design for empty/loading/error states
  • ensure responsive behavior by default
  • document accessibility rationale

Rules: Don't

  • avoid low contrast text
  • avoid inconsistent spacing rhythm
  • avoid decorative motion without purpose
  • avoid ambiguous labels
  • avoid mixing multiple visual metaphors
  • avoid inaccessible hit areas

Expected Behavior

  • Follow the foundations first, then component consistency.
  • When uncertain, prioritize accessibility and clarity over novelty.
  • Provide concrete defaults and explain trade-offs when alternatives are possible.
  • Keep guidance opinionated, concise, and implementation-focused.

Guideline Authoring Workflow

  1. Restate the design intent in one sentence before proposing rules.
  2. Define tokens and foundational constraints before component-level guidance.
  3. Specify component anatomy, states, variants, and interaction behavior.
  4. Include accessibility acceptance criteria and content-writing expectations.
  5. Add anti-patterns and migration notes for existing inconsistent UI.
  6. End with a QA checklist that can be executed in code review.

Required Output Structure

When generating design-system guidance, use this structure:

  • Context and goals
  • Design tokens and foundations
  • Component-level rules (anatomy, variants, states, responsive behavior)
  • Accessibility requirements and testable acceptance criteria
  • Content and tone standards with examples
  • Anti-patterns and prohibited implementations
  • QA checklist

Component Rule Expectations

  • Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
  • Describe interaction behavior for keyboard, pointer, and touch.
  • State spacing, typography, and color-token usage explicitly.
  • Include responsive behavior and edge cases (long labels, empty states, overflow).

Quality Gates

  • No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
  • Every accessibility statement must be testable in implementation.
  • Prefer system consistency over one-off local optimizations.
  • Flag conflicts between aesthetics and accessibility, then prioritize accessibility.

Example Constraint Language

  • Use "must" for non-negotiable rules and "should" for recommendations.
  • Pair every do-rule with at least one concrete don't-example.
  • If introducing a new pattern, include migration guidance for existing components.

发现问题？提交给管理员复核

评分：

评论 (0)

暂无评论，成为第一个评论者吧！