design-system by anthropics/knowledge-work-plugins
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system如果你看到不熟悉的占位符或需要检查哪些工具已连接,请参阅 CONNECTORS.md。
管理你的设计系统——进行一致性审计、记录组件或设计新样式。
/design-system audit # 完整系统审计
/design-system document [component] # 记录一个组件
/design-system extend [pattern] # 设计一个新组件或样式
定义视觉语言的原子值:
可复用的 UI 元素,定义了:
组合组件的常见 UI 解决方案:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
## 设计系统审计
### 摘要
**已审查组件:** [X] | **发现问题:** [X] | **得分:** [X/100]
### 命名一致性
| 问题 | 组件 | 建议 |
|-------|------------|----------------|
| [命名不一致] | [列表] | [建议采用的标准] |
### 令牌覆盖率
| 类别 | 已定义 | 发现的硬编码值 |
|----------|---------|----------------------|
| 颜色 | [X] | [X] 处硬编码十六进制值 |
| 间距 | [X] | [X] 处任意值 |
| 排版 | [X] | [X] 处自定义字体/大小 |
### 组件完整性
| 组件 | 状态 | 变体 | 文档 | 得分 |
|-----------|--------|----------|------|-------|
| Button | ✅ | ✅ | ⚠️ | 8/10 |
| Input | ✅ | ⚠️ | ❌ | 5/10 |
### 优先行动项
1. [影响最大的改进]
2. [第二优先级]
3. [第三优先级]
## 组件: [名称]
### 描述
[此组件是什么以及何时使用它]
### 变体
| 变体 | 使用场景 |
|---------|----------|
| [Primary] | [主要操作] |
| [Secondary] | [辅助操作] |
### 属性 / Props
| 属性 | 类型 | 默认值 | 描述 |
|----------|------|---------|-------------|
| [prop] | [type] | [default] | [description] |
### 状态
| 状态 | 视觉 | 行为 |
|-------|--------|----------|
| 默认 | [描述] | — |
| 悬停 | [描述] | [交互] |
| 激活 | [描述] | [交互] |
| 禁用 | [描述] | 不可交互 |
| 加载 | [描述] | [动画] |
### 可访问性
- **角色**: [ARIA 角色]
- **键盘**: [Tab、Enter、Escape 行为]
- **屏幕阅读器**: [被朗读为...]
### 要与不要
| ✅ 要 | ❌ 不要 |
|------|---------|
| [最佳实践] | [反面模式] |
### 代码示例
[适合框架的代码片段]
## 新组件: [名称]
### 问题
[此组件解决的用户需求或填补的空白]
### 现有样式
| 相关组件 | 相似性 | 为何不足 |
|-------------------|-----------|---------------------|
| [Component] | [共享部分] | [缺失部分] |
### 提议的设计
#### API / 属性
| 属性 | 类型 | 默认值 | 描述 |
|----------|------|---------|-------------|
| [prop] | [type] | [default] | [description] |
#### 变体
| 变体 | 使用场景 | 视觉 |
|---------|----------|--------|
| [Variant] | [Scenario] | [Description] |
#### 状态
| 状态 | 行为 | 备注 |
|-------|----------|-------|
| 默认 | [描述] | — |
| 悬停 | [描述] | [交互] |
| 禁用 | [描述] | 不可交互 |
| 加载 | [描述] | [动画] |
#### 使用的令牌
- 颜色: [哪些令牌]
- 间距: [哪些令牌]
- 排版: [哪些令牌]
### 可访问性
- **角色**: [ARIA 角色]
- **键盘**: [预期的交互]
- **屏幕阅读器**: [被朗读为...]
### 待解决问题
- [需要设计评审的决策]
- [需要解决的边界情况]
如果 ~~design tool 已连接:
如果 ~~knowledge base 已连接:
每周安装次数
235
仓库
GitHub 星标
10.3K
首次出现
11 天前
安全审计
安装于
gemini-cli226
opencode226
codex225
cursor225
cline224
kimi-cli224
If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.
Manage your design system — audit for consistency, document components, or design new patterns.
/design-system audit # Full system audit
/design-system document [component] # Document a component
/design-system extend [pattern] # Design a new component or pattern
Atomic values that define the visual language:
Reusable UI elements with defined:
Common UI solutions combining components:
## Design System Audit
### Summary
**Components reviewed:** [X] | **Issues found:** [X] | **Score:** [X/100]
### Naming Consistency
| Issue | Components | Recommendation |
|-------|------------|----------------|
| [Inconsistent naming] | [List] | [Standard to adopt] |
### Token Coverage
| Category | Defined | Hardcoded Values Found |
|----------|---------|----------------------|
| Colors | [X] | [X] instances of hardcoded hex |
| Spacing | [X] | [X] instances of arbitrary values |
| Typography | [X] | [X] instances of custom fonts/sizes |
### Component Completeness
| Component | States | Variants | Docs | Score |
|-----------|--------|----------|------|-------|
| Button | ✅ | ✅ | ⚠️ | 8/10 |
| Input | ✅ | ⚠️ | ❌ | 5/10 |
### Priority Actions
1. [Most impactful improvement]
2. [Second priority]
3. [Third priority]
## Component: [Name]
### Description
[What this component is and when to use it]
### Variants
| Variant | Use When |
|---------|----------|
| [Primary] | [Main actions] |
| [Secondary] | [Supporting actions] |
### Props / Properties
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| [prop] | [type] | [default] | [description] |
### States
| State | Visual | Behavior |
|-------|--------|----------|
| Default | [description] | — |
| Hover | [description] | [interaction] |
| Active | [description] | [interaction] |
| Disabled | [description] | Non-interactive |
| Loading | [description] | [animation] |
### Accessibility
- **Role**: [ARIA role]
- **Keyboard**: [Tab, Enter, Escape behavior]
- **Screen reader**: [Announced as...]
### Do's and Don'ts
| ✅ Do | ❌ Don't |
|------|---------|
| [Best practice] | [Anti-pattern] |
### Code Example
[Framework-appropriate code snippet]
## New Component: [Name]
### Problem
[What user need or gap this component addresses]
### Existing Patterns
| Related Component | Similarity | Why It's Not Enough |
|-------------------|-----------|---------------------|
| [Component] | [What's shared] | [What's missing] |
### Proposed Design
#### API / Props
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| [prop] | [type] | [default] | [description] |
#### Variants
| Variant | Use When | Visual |
|---------|----------|--------|
| [Variant] | [Scenario] | [Description] |
#### States
| State | Behavior | Notes |
|-------|----------|-------|
| Default | [Description] | — |
| Hover | [Description] | [Interaction] |
| Disabled | [Description] | Non-interactive |
| Loading | [Description] | [Animation] |
#### Tokens Used
- Colors: [Which tokens]
- Spacing: [Which tokens]
- Typography: [Which tokens]
### Accessibility
- **Role**: [ARIA role]
- **Keyboard**: [Expected interactions]
- **Screen reader**: [Announced as...]
### Open Questions
- [Decision that needs design review]
- [Edge case to resolve]
If ~~design tool is connected:
If ~~knowledge base is connected:
Weekly Installs
235
Repository
GitHub Stars
10.3K
First Seen
11 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli226
opencode226
codex225
cursor225
cline224
kimi-cli224
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装