技能 design-system-patterns
📦
design-system-patterns
內容修訂 r1 安全 ⚙️ 外部命令🌐 網路存取
建構可擴展的設計系統
當 tokens、themes 和 components 各自成長時，設計系統往往會變得不一致。此 skill 提供 token 階層、theme switching、component APIs 和治理的模式。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "design-system-patterns" from https://skillstore.io/skills/wshobson-design-system-patterns.md and its manifest at https://skillstore.io/api/skills/wshobson-design-system-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「design-system-patterns」。 為 SaaS dashboard 規劃 design tokens。
預期結果:
- 包含 primitive、semantic 和 component tokens 的分層 token model。
- 針對 text、surface、border、spacing 和 interaction tokens 的命名規則。
- 針對 token 變更版本控管和使用方式文件化的指引。
正在使用「design-system-patterns」。 審查 dark mode 實作。
預期結果:
- 以 CSS custom properties 為基礎的 theme contract。
- 針對 system preference detection 和已儲存 user preference 的建議。
- 針對 contrast、reduced motion 和 forced color support 的檢查。
正在使用「design-system-patterns」。 設計可重用 component library 方法。
預期結果:
- 針對 variants、sizes、slots 和 composition 的 component API 建議。
- 針對 keyboard behavior 和 ARIA attributes 的 accessibility 預期。
- 面向使用者和遷移規劃的文件主題。
安全審計
安全v4 • 2026/7/7 開啟版本化報告
All static findings are false positives. The content is documentation examples and public links. No prompt injection, command execution, exfiltration, or malicious intent was found.
4
已掃描檔案
1,899
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (18)
references/component-architecture.md:102-145 references/design-tokens.md:320-330 references/design-tokens.md:330-333 references/design-tokens.md:333-336 references/theming-architecture.md:191-278 references/theming-architecture.md:296-303 references/theming-architecture.md:305-312 references/theming-architecture.md:314-322 references/theming-architecture.md:449-468 SKILL.md:57-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-141 SKILL.md:141-201 SKILL.md:201-205 SKILL.md:205-254 SKILL.md:254-258 SKILL.md:258-310
🌐 網路存取 (5)
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/wshobson-design-system-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-design-system-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/wshobson-design-system-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
wshobson. (2026). design-system-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-design-system-patterns/audits/4BibTeX 引用
@techreport{wshobson-wshobson-design-system-patterns-2026,
author = {wshobson},
title = {design-system-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-design-system-patterns/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-system-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/wshobson-design-system-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-design-system-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 45
架構
85
可維護性
87
內容
71
社群
83
規範符合度
你可以打造什麼
建立 Token 基礎
在建構共享 UI library 之前，定義 token 分類、命名規則和平台輸出。
規劃 Theme Switching
使用穩定的 CSS custom property contracts 實作 light、dark、high contrast 和 system themes。
標準化 Component APIs
使用 compound components、variant systems 和 accessibility patterns，讓可重用 components 更可預期。
試試這些提示
初階 Token 計畫
使用此 skill，為新 web app 中的 colors、typography、spacing 和 radii 設計基本 token 階層。
Theme 架構審查
使用此 skill 審查我目前的 CSS variables，並提出使用 semantic tokens 的 light 和 dark theme 架構。
Component Library API 設計
使用此 skill，為 buttons、accordions、badges 和 form controls 設計包含 variants 和 accessibility states 的 component API 模式。
進階多平台系統
使用此 skill，定義包含 Style Dictionary outputs、治理規則和遷移指引的 multi-brand token pipeline。
最佳實務
- 使用 semantic token names 表達意圖，並將原始值保留在 primitive tokens 中。
- 針對真實 components、accessibility states 和 platform outputs 測試每個 theme。
- 將 token 和 component 變更視為有版本的 API 變更，並附上 migration notes。
避免
- 當 tokens 應該表達決策時，不要在 components 內 hardcode colors 和 spacing。
- 當 CSS variables 可以承載 theme contract 時，不要建立 theme-specific component branches。
- 不要在未記錄 usage、accessibility behavior 和 design ownership 的情況下新增 variants。
常見問題
這個 skill 會產生完整的設計系統嗎？
不會。它提供 patterns、examples 和 planning guidance，供你依產品和技術堆疊調整。
它可以協助 dark mode 嗎？
可以。它涵蓋 CSS custom properties、React theme providers、system preference detection 和持久化的 theme choices。
它支援 mobile design tokens 嗎？
可以。它描述 CSS、iOS 和 Android 的 multi-platform token output 概念。
Figma integration 是自動的嗎？
不會。它會討論 Figma-to-code workflows 和 token pipeline structure，但不會連接到 Figma。
誰應該使用這個 skill？
設計系統工程師、前端開發者和 UI 平台團隊可以使用它來組織共享 UI 基礎。
它是否包含 security-sensitive behavior？
未發現已確認的敏感行為。經審查的風險指標是文件範例和公開資源連結。
開發者詳細資訊
作者
wshobson授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
36e07d5e13068e5be64447e8f20b427cf2cbd21a
維護新鮮度
2026/7/18
使用量
9 次下載 · 290 次瀏覽