Design System

by affaan-mef648e01899bNo license275K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 3 days ago

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

Instructions onlyDesign & Creative
AI-generated overview

Guides building a production-ready design system with tokens, components, theming, and accessibility.

What it does
This skill provides guidance for constructing and maintaining a design system. It covers core elements such as design tokens for color, typography, spacing and shadows, reusable UI components, layout patterns, and SVG icon libraries. It also lists supporting tools like Figma, Storybook, Chromatic and JSON design tokens, plus a checklist covering token definition, component implementation, accessibility testing, documentation and team adoption.
When to use it
Use it when initializing a design system, extending a component library, keeping design and implementation in sync, enforcing accessibility standards, or implementing theming.
Requirements
No scripts are included; it is instructions only. It references Figma, Storybook, Chromatic and JSON-based design tokens as tools, but no credentials, packages or runtime are specified.

デザイン システム

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

使用時期

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

コア要素

1. デザイントークン

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

2. コンポーネント

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

3. レイアウトパターン

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

4. アイコン

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

ツール

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

チェックリスト

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

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

Source and attribution

Source:affaan-m/eccindocs/ja-JP/skills/design-systemat commitef648e0

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Design System Agent Skill | SourceWeft