设计系统创建指南：构建一致UI组件库的最佳实践与AI提示

design-system-creation by aj-geddes/useful-ai-prompts

177 周安装量

144 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill design-system-creation

设计用户体验前端架构

🇨🇳中文介绍

设计系统创建

概述

设计系统是一套结构化的组件、指南和原则，旨在确保一致性、加速开发并提高产品质量。

何时使用

多个产品界面或团队
扩展设计一致性
减少冗余组件开发
改进设计与开发之间的交接
创建跨团队的共享语言
构建可复用组件
记录设计标准

快速开始

最小工作示例：

Design System Structure:

Foundation Layer:
  Typography:
    - Typefaces (Roboto, Inter)
    - Font sizes (scale: 12, 14, 16, 20, 28, 36, 48)
    - Font weights (Regular, Medium, Bold)
    - Line heights and letter spacing

Colors:
  - Primary brand color (#2196F3)
  - Secondary colors
  - Neutral palette (grays)
  - Semantic colors (success, error, warning)
  - Dark mode variants

Spacing:
  - Base unit: 4px
  - Scale: 4, 8, 12, 16, 24, 32, 48, 64px
  - Apply consistently across UI

Shadows & Elevation:
  - Elevation 0 (flat)
  - Elevation 1, 2, 4, 8, 16 (increasing depth)
  - Used for modals, cards, overlays
// ... (see reference guides for full implementation)

参考指南

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
设计系统组件	设计系统组件
组件文档	组件文档
设计系统治理	设计系统治理
设计系统文档	设计系统文档

🇺🇸English

Design System Creation

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

A design system is a structured set of components, guidelines, and principles that ensure consistency, accelerate development, and improve product quality.

When to Use

Multiple product interfaces or teams
Scaling design consistency
Reducing redundant component development
Improving design-to-dev handoff
Creating shared language across teams
Building reusable components
Documenting design standards

Quick Start

Minimal working example:

Design System Structure:

Foundation Layer:
  Typography:
    - Typefaces (Roboto, Inter)
    - Font sizes (scale: 12, 14, 16, 20, 28, 36, 48)
    - Font weights (Regular, Medium, Bold)
    - Line heights and letter spacing

Colors:
  - Primary brand color (#2196F3)
  - Secondary colors
  - Neutral palette (grays)
  - Semantic colors (success, error, warning)
  - Dark mode variants

Spacing:
  - Base unit: 4px
  - Scale: 4, 8, 12, 16, 24, 32, 48, 64px
  - Apply consistently across UI

Shadows & Elevation:
  - Elevation 0 (flat)
  - Elevation 1, 2, 4, 8, 16 (increasing depth)
  - Used for modals, cards, overlays
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Design System Components	Design System Components
Component Documentation	Component Documentation
Design System Governance	Design System Governance
Design System Documentation	Design System Documentation

Best Practices

✅ DO

Start with essential components
Document every component thoroughly
Include code examples
Test components across browsers
Include accessibility guidance
Version the design system
Have clear governance
Communicate updates proactively
Gather feedback from users
Maintain incrementally

❌ DON'T

Create too many components initially
Skip documentation
Ignore accessibility
Make breaking changes without migration path
Allow inconsistent implementations
Ignore user feedback
Let design system stagnate
Create components without proven need
Make components too prescriptive
Ignore performance impact

Weekly Installs

140

Repository

aj-geddes/usefu…-prompts

GitHub Stars

116

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode122

gemini-cli120

codex116

cursor112

claude-code112

github-copilot101