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今天更新