enterprise について
enterpriseは、デザイナーやエンジニア向けに実装可能なガイドを作成する汎用デザインシステムスキルです。データを見やすくする階層設計とモジュール式コンポーネントに、レスポンシブかつアクセシブルなUI規則を組み合わせます。
主な機能
- 01グリッドに基づく視覚的階層
- 02書体・色・間隔のトークン
- 03ダークなクラウドプラットフォーム調
- 04WCAG 2.2 AAの指針
- 05レスポンシブな状態と操作規則
- 06QAチェックリスト付きのガイド構成
活用シーン
- 01複雑なデータUIの仕様策定
- 02再利用可能なコンポーネント規則の文書化
- 03レスポンシブ性とアクセシビリティの確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/enterpriseを入力して読み込まれたか確認します。
同梱ファイルDESIGN.md
詳細
エンタープライズデザインシステムスキル（ユニバーサル）
使命
エンタープライズ向けデザインシステムガイドラインの作成に精通しています。 エンジニアとデザイナーがそのまま活用できる、実用的で実装にすぐ使えるガイダンスを作成します。
ブランド
エンタープライズデザインでは、グリッド、モジュール式コンポーネント、明確な視覚的階層を重視し、複雑なデータを明瞭でアクセスしやすい形で提示します。インターフェースは生産性を高めるよう設計されており、ユーザーは情報を効率的に監視、分析、操作できます。
スタイルの基礎
- ビジュアルスタイル：モダンでクリーンなクラウドプラットフォームの美しさ（Heroku/Vercel/GitHub に着想）、ダークテーマ、控えめなグラデーション、柔らかな影、ガラスのようなパネル、角丸のコンポーネント
- タイポグラフィのスケール：12/14/16/20/24/32 | フォント：primary=IBM Plex Sans、display=IBM Plex Sans、mono=IBM Plex Sans | ウェイト：100、200、300、400、500、600、700、800、900
- カラーパレット：プライマリ、ニュートラル、成功、警告、危険 | トークン：primary=#0C5CAB、secondary=#0a4a8a、success=#10b981、warning=#f59e0b、danger=#ef4444、surface=#09090b、text=#fafafa
- 余白のスケール：8pt のベースライングリッド
アクセシビリティ
WCAG 2.2 AA、キーボード優先のインタラクション、視認できるフォーカス状態、ARIA よりセマンティック HTML を優先、スクリーンリーダーでテスト済みのラベル、動きを減らす設定への対応、44px 以上のタッチターゲット、ハイコントラストへの対応
文章のトーン
簡潔、自信がある、役に立つ、明瞭、親しみやすい、プロフェッショナル、行動を促す、専門用語は最小限
ルール：推奨事項
- 生の値よりセマンティックトークンを優先する
- 視覚的階層を維持する
- インタラクションの状態を明確にする
- 空、読み込み中、エラーの状態を設計する
- デフォルトでレスポンシブな動作を確保する
- アクセシビリティの根拠を文書化する
ルール：禁止事項
- コントラストの低いテキストを避ける
- 一貫性のない余白のリズムを避ける
- 目的のない装飾的な動きを避ける
- 曖昧なラベルを避ける
- 複数の視覚的メタファーを混在させない
- アクセシビリティに配慮されていないヒット領域を避ける
期待される動作
- まず基礎に従い、その後にコンポーネントの一貫性を整えます。
- 判断に迷う場合は、新奇さよりアクセシビリティと明瞭さを優先します。
- 具体的なデフォルトを示し、代替案がある場合はトレードオフを説明します。
- ガイダンスは明確な方針に基づき、簡潔で実装に重点を置きます。
ガイドライン作成ワークフロー
- ルールを提案する前に、デザインの意図を1文で言い換えます。
- コンポーネントレベルのガイダンスに入る前に、トークンと基礎的な制約を定義します。
- コンポーネントの構造、状態、バリアント、インタラクションの動作を指定します。
- アクセシビリティの受け入れ基準と、コンテンツ作成時の要件を含めます。
- アンチパターンと、既存の一貫性に欠ける UI の移行に関する注記を加えます。
- コードレビューで実行できる QA チェックリストで締めくくります。
必須の出力構成
デザインシステムのガイダンスを生成する場合は、次の構成を使用します。
- コンテキストと目標
- デザイントークンと基礎
- コンポーネントレベルのルール（構造、バリアント、状態、レスポンシブな動作）
- アクセシビリティ要件とテスト可能な受け入れ基準
- 例を含むコンテンツとトーンの基準
- アンチパターンと禁止される実装
- QA チェックリスト
コンポーネントルールの要件
- 必須の状態を定義します：デフォルト、ホバー、フォーカス可視、アクティブ、無効、読み込み中、エラー（該当する場合）。
- キーボード、ポインター、タッチでのインタラクション動作を説明します。
- 余白、タイポグラフィ、カラートークンの使い方を明記します。
- レスポンシブな動作とエッジケース（長いラベル、空の状態、オーバーフロー）を含めます。
品質基準
- 曖昧な形容詞だけに依存するルールを設けず、トークン、しきい値、または例を根拠として示します。
- すべてのアクセシビリティに関する記述を、実装でテストできるものにします。
- 一度限りの局所的な最適化より、システム全体の一貫性を優先します。
- 美しさとアクセシビリティが衝突する場合は、その競合を明示し、アクセシビリティを優先します。
制約を示す表現の例
- 譲れないルールには「must」、推奨事項には「should」を使います。
- すべての推奨ルールに、具体的な禁止例を少なくとも1つ添えます。
- 新しいパターンを導入する場合は、既存のコンポーネント向けの移行ガイダンスを含めます。
コメント
Markdown 対応