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 从公开仓库中收录这些内容。

举报或申请下架