Design System

作者 affaan-mef648e01899b無授權條款275K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 天前更新

アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。

僅含說明Design & Creative
AI 產生的概覽

指導建構具備權杖、元件、主題與無障礙支援的正式環境設計系統。

功能
此技能提供建構與維護設計系統的指引。內容涵蓋核心要素，例如顏色、字體排版、間距與陰影的設計權杖，可重複使用的 UI 元件、版面配置模式，以及 SVG 圖示庫。它也列出 Figma、Storybook、Chromatic 與 JSON 設計權杖等輔助工具，並提供一份包含權杖定義、元件實作、無障礙測試、文件撰寫與團隊採用的檢查清單。
適用情境
適用於初始化設計系統、擴充元件庫、讓設計與實作保持同步、落實無障礙標準，或實作主題化時。
執行需求
不含指令碼，僅為說明性內容。它提到 Figma、Storybook、Chromatic 與以 JSON 為基礎的設計權杖等工具，但未指定任何認證資訊、套件或執行環境。

デザイン システム

スケーラブルで保守可能なデザインシステムの構築。

使用時期

  • デザインシステムを初期化
  • コンポーネントライブラリを拡張
  • デザインと実装の間の同期を保つ
  • アクセシビリティ標準を強制
  • テーマング実装

コア要素

1. デザイントークン

色、タイポグラフィ、スペーシング、シャドウの中央コレクション。

2. コンポーネント

ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。

3. レイアウトパターン

ページレイアウト、フォーム、グリッド。

4. アイコン

SVGベースのアイコンライブラリ。

ツール

  • Figma 設計ツール
  • Storybook コンポーネント展示
  • Chromatic ビジュアルテスト
  • Design tokens JSON管理

チェックリスト

  • トークン定義（色、スペーシング、タイプ）
  • 基本コンポーネント実装
  • Storybook設定
  • アクセシビリティテスト
  • ドキュメント作成
  • チーム採用

詳細については、ドキュメントを参照してください。

來源與署名

來源：affaan-m/ecc位於docs/ja-JP/skills/design-system提交ef648e0

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 affaan-m/ecc 的技能

Vue Patterns

affaan-m

Vue 3 Composition API、元件架構、Pinia 狀態管理、Vue Router 與 Nuxt SSR 模式的參考指南。

Software Development275K3 天前更新

Uncloud

affaan-m

使用 uc CLI 管理 Uncloud 叢集的參考指南：部署服務、Caddy 入口、連接埠、擴縮與日誌。

DevOps & Cloud275K3 天前更新

Team Agent Orchestration

affaan-m

以團隊方式協調多個 AI 代理，運用工作項目、看板狀態、分支隔離與合併閘門。

AI & Agents275K3 天前更新

Tasteforge Video

affaan-m

Use for file-driven multimodal image, video, and 3D-asset discovery; taste interviews; distill or apply workflows; style-pack validation; editable EDL/FCPXML export; provenance audits; and offline planning that must fail closed before provider generation.

待分類275K3 天前更新

Taste

affaan-m

為音樂影片與短影音剪輯定義 angelcore / cloud-trance / hyperpop 視覺方向，包含氛圍、剪輯語法與對拍分鏡規劃。

Design & Creative275K3 天前更新

Social Publisher

affaan-m

透過 SocialClaw 工作區 API 在 13 個平台上排程與發佈社群媒體貼文。

Marketing & Sales275K3 天前更新

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