visual-design-foundations

概要

visual-design-foundations とは？

visual-design-foundations は、視覚的に一貫性がありアクセシブルなインターフェースを構築したいUIデザイナーや開発者向けの実践的なスキルです。タイポグラフィのスケール、カラーテオリー、スペーシングシステム、アイコノグラフィの基礎的な指針を提供し、ウェブやプロダクトのインターフェースにおけるデザイントークンやスタイルガイドの確立を支援します。

このスキルは誰に向いている？

• デザインシステムを構築または改善するUI/UXデザイナー
• スタイルトークンを実装するフロントエンド開発者
• ビジュアル階層や可読性の向上を目指すチーム
• 製品全体の視覚的一貫性を監査・更新する方

解決できる課題

• 拡張可能なタイポグラフィとスペーシングシステムの確立
• アクセシブルなカラーパレット作成のガイド（ダークモード対応含む）
• アイコンシステム設計とビジュアル資産の一貫性の支援
• インターフェースの視覚的階層の監査と改善

使い方

インストール手順

1. 以下のコマンドで visual-design-foundations をインストールします：

   npx skills add https://github.com/wshobson/agents --skill visual-design-foundations
   

2. まず SKILL.md を確認し、基本原則と推奨ワークフローの概要を把握しましょう。
3. 次に以下の補助ファイルを参照してください：
   • references/color-systems.md：知覚的に均一なカラースケールとセマンティックカラートークンについて学べます。
   • references/spacing-iconography.md：8ポイントグリッドとレイアウトの一貫性を保つセマンティックスペーシングトークンを理解します。
   • references/typography-systems.md：モジュラータイポグラフィスケールの構築方法とCSSカスタムプロパティの適用例を紹介します。

ワークフローへの適用

• 推奨されるCSSカスタムプロパティやトークンシステムを自分のリポジトリやFigmaライブラリに統合しましょう。
• モジュラースケールとスペーシングシステムを基準にしつつ、ブランドやプロダクトのニーズに合わせて比率や単位をカスタマイズしてください。
• カラーシステムの指針を参考に、アクセシブルなパレットとセマンティックトークンを生成し、テーマ設定に活用しましょう。

visual-design-foundations が適しているケース

• 新規のデザインシステムやUIライブラリの立ち上げ
• 既存インターフェースの一貫性監査
• ダークモードやテーマバリアントの実装
• アクセシブルで拡張可能なビジュアル資産の構築

適さないケース

• 既に成熟し文書化されたデザインシステムがあるプロジェクト
• 標準的なデザイントークンに依存しない高度にカスタムまたは実験的なビジュアルスタイル

よくある質問

補助ファイルはどこで確認できますか？

Filesタブを開くと、ネストされた参照やヘルパースクリプトを含む全ファイルツリーを確認できます。

visual-design-foundations はFigmaのワークフローに対応していますか？

はい。原則やトークンシステムはFigmaライブラリやデザインシステムファイルに適応可能です。

ダークモードに対応していますか？

もちろんです。このスキルにはアクセシブルなカラーパレット生成とセマンティックトークンのガイドが含まれており、テーマ設定やダークモード対応に不可欠です。

タイポグラフィやスペーシングスケールはどうカスタマイズしますか？

references/typography-systems.md と references/spacing-iconography.md を参照し、モジュラースケールの計算式やCSSプロパティ例を確認してください。プロジェクトに合わせて比率や基本単位を調整できます。

デザインシステムチームに適していますか？

はい。visual-design-foundations はデザイントークンやスタイルガイド、統一感のあるUIパターンの確立や改善を目指すチームに最適です。