Design System

作者 anthropicsae1513ea94dc无许可证27K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库今天更新

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

精选仅含说明Design & Creative
AI 生成的概览

审计、记录或扩展设计系统，涵盖设计令牌、组件与模式。

功能
该技能以审计、记录和扩展三种模式管理设计系统。审计会检查命名一致性、令牌覆盖率和组件完整度，并生成带评分的报告和优先行动项。记录模式产出组件参考文档，涵盖变体、属性、状态、无障碍说明和推荐与禁忌；扩展模式则提出新组件或模式方案，包含 API、所用令牌和待决问题。
适用场景
适用于检查设计系统中组件之间的命名不一致或硬编码值，为组件的变体、状态和无障碍说明编写文档，或设计符合现有系统的新模式。
运行要求
不附带脚本，仅为说明文档。文中提到可选的连接器：设计工具用于审计组件，知识库用于发布文档。

/design-system

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.

Usage

/design-system audit                    # Full system audit/design-system document [component]     # Document a component/design-system extend [pattern]         # Design a new component or pattern

Components of a Design System

Design Tokens

Atomic values that define the visual language:

  • Colors (brand, semantic, neutral)
  • Typography (scale, weights, line heights)
  • Spacing (scale, component padding)
  • Borders (radius, width)
  • Shadows (elevation levels)
  • Motion (durations, easings)

Components

Reusable UI elements with defined:

  • Variants (primary, secondary, ghost)
  • States (default, hover, active, disabled, loading, error)
  • Sizes (sm, md, lg)
  • Behavior (interactions, animations)
  • Accessibility (ARIA, keyboard)

Patterns

Common UI solutions combining components:

  • Forms (input groups, validation, submission)
  • Navigation (sidebar, tabs, breadcrumbs)
  • Data display (tables, cards, lists)
  • Feedback (toasts, modals, inline messages)

Principles

  1. Consistency over creativity — The system exists so teams don't reinvent the wheel
  2. Flexibility within constraints — Components should be composable, not rigid
  3. Document everything — If it's not documented, it doesn't exist
  4. Version and migrate — Breaking changes need migration paths

Output — Audit

markdown
## 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 Actions1. [Most impactful improvement]2. [Second priority]3. [Third priority]

Output — Document

markdown
## 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]

Output — Extend

markdown
## 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 Connectors Available

If ~~design tool is connected:

  • Audit components directly in Figma — check naming, variants, and token usage
  • Pull component properties and layer structure for documentation

If ~~knowledge base is connected:

  • Search for existing component documentation and usage guidelines
  • Publish updated documentation to your wiki

Tips

  1. Start with an audit — Know where you are before deciding where to go.
  2. Document as you build — It's easier to document a component while designing it.
  3. Prioritize coverage over perfection — 80% of components documented beats 100% of 10 components.

来源与署名

来源：anthropics/knowledge-work-plugins位于design/skills/design-system提交ae1513e

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 anthropics/knowledge-work-plugins 的技能

Ticket Deflector

anthropics

精选

Reads a forwarded customer email or ticket, pulls order and refund status from a payments connector (PayPal, Square, or Stripe) or Shopify, account history from the CRM, and open tickets from a support desk (Zoho Desk), drafts a tone-matched reply in the owner's writing voice, and can issue a refund through the payments connector with explicit owner approval. With Shopify connected it also runs a proactive order-triage mode that surfaces orders needing attention — unfulfilled past the promised window, payment problems, pending refunds, stuck shipments — and drafts the next action for each before the customer has to ask. Use when the user says "draft a response," "answer this customer," "where's my order," "I want a refund," "check my orders," or "anything about to blow up."

待分类27K今天更新

Tax Season Organizer

anthropics

精选

Prepares tax-season materials for the owner's accountant, not tax advice. US federal tax; a non-US business gets its closed-books packet instead. Two modes: (1) quarterly estimated tax from YTD net income in the ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books); (2) year-end 1099 prep, scanning the ledger, PayPal, and Stripe for contractors paid over USD 600 into a 1099-NEC list with missing W-9 flags. Any tax request routes first to /tax-prep, which confirms the books are closed and reconciled before running this skill. Use this skill directly only when the owner says the period's books are already closed: "books are closed, now do the 1099s," "run the quarterly estimate off the closed numbers," or "just the contractor W-9 list."

待分类27K今天更新

Tax Prep

anthropics

精选

基于已结账的账目准备税务材料：季度预估缴税明细，或年终 1099-NEC 清单与会计师资料包。

Business & Finance27K今天更新

Smb Onboard

anthropics

精选

引导小微企业主完成首次设置：连接工具、运行一次体现价值的配方、记录业务背景并设定每周检查节奏。

Productivity & Workflow27K今天更新

Smb Router

anthropics

精选

将小企业主的需求转接到合适的插件技能或命令，并说明可用功能。

Productivity & Workflow27K今天更新

Month End Prep

anthropics

精选

Reconciles the accounting ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books) against PayPal, Shopify, Square, and Stripe settlements, flags transactions that need attention, suspicious duplicates, and missing receipts, then writes a plain-English P&L narrative and exports a close packet (xlsx + one-page PDF). This is the first link of the /close-month command; a request to close the month or the books routes there, and the command runs this skill before refreshing the forecast and distributing the packet. Use this skill directly only when the owner wants the reconciliation alone, with no forecast refresh and no distribution: "just reconcile, no packet," "what's missing from the books," "flag the duplicates and missing receipts," or "write the P&L narrative for this month."

待分类27K今天更新

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative179K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative179K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative179K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新