mcpField
D
design-system-creation

design-system-creation

github.com/aj-geddes设计与 UI373539 次安装34 周前更新
代码仓库

关于 design-system-creation

用于规划和记录设计系统的技能，面向需要在多个产品间保持界面一致的团队。内容涵盖可复用组件、设计标准、文档与治理。

主要功能

  1. 01设计系统结构与基础规范
  2. 02可复用组件规划
  3. 03组件文档编写指导
  4. 04治理与版本管理实践
  5. 05无障碍与测试指导

适用场景

  1. 01统一多个产品的设计
  2. 02减少重复组件开发
  3. 03改进设计到开发的交接

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/design-system-creation确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
component-documentation.md
design-system-components.md
design-system-documentation.md
design-system-governance.md
templates/
component-template.tsx

详细介绍

设计系统创建

目录

概述

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

适用场景

  • 多个产品界面或团队
  • 扩大设计一致性
  • 减少重复的组件开发
  • 改进设计到开发的交接
  • 在团队间建立共同语言
  • 构建可复用组件
  • 记录设计标准

快速入门

最简可运行示例：

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)

参考指南

references/ 目录中的详细实现：

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

最佳实践

✅ 应该
  • 从必要组件开始
  • 详细记录每个组件
  • 包含代码示例
  • 在不同浏览器中测试组件
  • 提供无障碍指南
  • 对设计系统进行版本管理
  • 建立清晰的治理机制
  • 主动传达更新
  • 收集用户反馈
  • 逐步维护
❌ 不应该
  • 一开始就创建过多组件
  • 跳过文档编写
  • 忽视无障碍
  • 在没有迁移路径的情况下进行破坏性更改
  • 放任实现方式不一致
  • 忽视用户反馈
  • 任由设计系统停滞
  • 创建未经证实有必要的组件
  • 对组件限制过多
  • 忽视性能影响

评论

支持 Markdown