技能 ui-design-system
📦

ui-design-system

內容修訂 r1 安全 ⚙️ 外部命令

產生 UI 設計系統

團隊在手動定義顏色、間距與字體排印時，往往會失去一致性。此技能可協助 Claude、Codex 與 Claude Code 產生清晰的設計權杖與交接指引。

支援: Claude Codex Code(CC)
Maintain this Skill? Claim it 📊 75 尚可

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求
Review the Skillstore skill "ui-design-system" from https://skillstore.io/skills/alirezarezvani-ui-design-system.md and its manifest at https://skillstore.io/api/skills/alirezarezvani-ui-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/alirezarezvani-ui-design-system.md 已簽名 manifest GET /api/skills/alirezarezvani-ui-design-system/manifest 已簽名 lockfile GET /api/skills/alirezarezvani-ui-design-system/lockfile

測試它

正在使用「ui-design-system」。 為 #0066CC 產生一套 modern 權杖系統。

預期結果:

  • 已為品牌色產生完整的權杖集。
  • 結果包含主要、次要、中性色、語意與表面顏色群組。
  • 它也包含字體排印、間距、尺寸、邊框、陰影、動畫、中斷點與 z-index 值。

正在使用「ui-design-system」。 為前端交接準備權杖。

預期結果:

  • 交接內容包含 CSS 或 SCSS 專案的匯出指引。
  • 開發者會收到用於版面、字體、顏色、層級、動效與響應式行為的命名權杖群組。
  • 設計師會收到可與現有品牌規則比較的摘要。

正在使用「ui-design-system」。 協助記錄元件標準。

預期結果:

  • 此技能可以為共用 UI 模式概述元件架構。
  • 它可以將權杖選擇與元件狀態、間距及響應式行為連結起來。
  • 它可以納入關於對比、焦點狀態與互動目標的無障礙提醒。

安全審計

安全
v7 • 2026/7/9 開啟版本化報告

All six static findings are false positives based on the reviewed context. The flagged terms are design-system wording, color values, and markdown command formatting rather than command-and-control behavior, reconnaissance, or shell execution.

3
已掃描檔案
851
分析行數
0
複核項目
0
已忽略的誤報

風險因素

⚙️ 外部命令 (1)
SKILL.md:22
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: claude 檢視審計紀錄 →
分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告
安全評估

複製報告連結

https://skillstore.io/skills/alirezarezvani-ui-design-system/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/alirezarezvani-ui-design-system/security.svg)](https://skillstore.io/skills/alirezarezvani-ui-design-system?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/alirezarezvani-ui-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/alirezarezvani-ui-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/alirezarezvani-ui-design-system.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 引用

alirezarezvani. (2026). ui-design-system security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/alirezarezvani-ui-design-system/audits/7

BibTeX 引用

@techreport{alirezarezvani-alirezarezvani-ui-design-system-2026, author = {alirezarezvani}, title = {ui-design-system security audit report (audit version 7)}, institution = {Skillstore}, year = {2026}, number = {7}, url = {https://skillstore.io/skills/alirezarezvani-ui-design-system/audits/7}, 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: "ui-design-system security audit report (audit version 7)" version: "unspecified" type: report authors: - name: "alirezarezvani" date-released: "2026-07-09" url: "https://skillstore.io/skills/alirezarezvani-ui-design-system/audits/7" identifiers: - type: other value: "skillstore:alirezarezvani-ui-design-system:audit:7" description: "Skillstore immutable audit report identifier"

比較變體

3 個可安裝變體

每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。

為何此變體排名第一

Skillstore 評分最高
AbdulSamad94 推薦

abdulsamad94-ui-design-system

Skillstore 評分 76
證據置信度 高
Skillstore 使用量 24
已更新

2026-10-20

davila7

davila7-ui-design-system

Skillstore 評分 75
證據置信度 高
Skillstore 使用量 22
已更新

2026-09-09

alirezarezvani 目前

alirezarezvani-ui-design-system

Skillstore 評分 75
證據置信度 高
Skillstore 使用量 20
已更新

2026-10-23

Skillstore 評分

評分依據 證據置信度: 高
45
架構
85
可維護性
87
內容
70
社群
83
規範符合度

你可以打造什麼

啟動新的設計系統

從品牌色產生第一組顏色、間距、字體排印、陰影與中斷點權杖。

準備開發者交接

以適合網頁的格式匯出權杖，並說明元件應如何使用共用值。

標準化產品 UI

為需要在多個產品區域共用設計決策的團隊建立一致的尺度。

試試這些提示

建立基本權杖 
使用 ui-design-system 技能，為品牌色 #0066CC 產生一組 modern 設計權杖集。顯示權杖類別的簡短摘要。
匯出網頁權杖 
為品牌色 #3B82F6 以 playful 風格產生設計權杖。將它們匯出供 CSS 專案使用，並說明每個權杖群組應該用在哪裡。
規劃元件使用方式 
使用產生的權杖，為按鈕、卡片、表單與導覽建立元件指引簡報。為每個元件群組加入無障礙備註。
稽核設計系統 
依據 ui-design-system 指引檢閱我目前的權杖策略。找出顏色、間距、字體排印、中斷點與開發者交接中的不一致之處。

最佳實務

  • 先使用摘要匯出，讓設計師能在實作前檢閱權杖涵蓋範圍。
  • 每個產品區域使用一種風格預設，以避免混合的視覺規則。
  • 發布前，根據無障礙需求驗證產生的顏色與元件狀態。

避免

  • 不要在未經設計審查的情況下，將產生的權杖視為最終品牌核准。
  • 不要將產生的間距尺度與無關的手動間距值混用。
  • 匯出供正式環境使用的權杖時，不要略過開發者交接備註。

常見問題

此技能會產生什麼？
它會產生顏色、字體排印、間距、尺寸、邊框、陰影、動效、中斷點與 z-index 值的設計權杖。
支援哪些匯出格式？
隨附的產生器支援 JSON、CSS 與 SCSS 輸出格式。
它可以建立完整的品牌系統嗎？
它可以建立很好的起點，但品牌策略與視覺核准仍需要人工設計審查。
它有助於無障礙嗎？
它包含無障礙指引，但團隊仍應在真實介面中測試對比、焦點狀態與螢幕行為。
誰應該使用此技能？
它適合需要共用權杖指引的 UI 設計師、前端開發者與設計系統負責人使用。
它需要外部服務嗎？
不需要。列出的能力是本機 Python 權杖產生器與支援性的設計系統指示。

開發者詳細資訊

授權

MIT

Skillstore 修訂

r1

版本提示

作者未聲明版本。

儲存庫

https://github.com/alirezarezvani/claude-skills/tree/main/product-team/ui-design-system

引用

7db9b9f06e0ab79c575b58bc48c4d8dc9849f424

維護新鮮度

2026/7/18

使用量

11 次下載 · 208 次瀏覽

檔案結構

📁 scripts/

📄 design_token_generator.py

📄 marketplace_content.json

📄 SKILL.md

alirezarezvani 的更多技能

查看全部

相關技能

查看全部