design-foundation
✓デザインシステムの基盤を確立または形式化します。デザイン トークン (色、タイポグラフィ、間隔、影、境界線) を作成し、コンポーネント アーキテクチャを定義し、デザイン原則を文書化して、一貫性と拡張性を可能にする構造を構築します。 Tailwind CSS およびフレームワークに依存しないアプローチで動作します。
SKILL.md
A design foundation is the bedrock upon which all great products are built. It's not just a collection of colors and fonts—it's a system of decisions that enables your team to build consistently, quickly, and with intention.
This skill helps you create or formalize your design foundation, whether you're starting from scratch or documenting what already exists. It covers design tokens, component structure, design principles documentation, and the governance model for your system.
Modern design systems are built on the concept of design tokens—named entities that store design decisions. Rather than hardcoding colors or spacing values throughout your codebase, tokens centralize these decisions, making them easy to maintain, theme, and scale.
デザインシステムの基盤を確立または形式化します。デザイン トークン (色、タイポグラフィ、間隔、影、境界線) を作成し、コンポーネント アーキテクチャを定義し、デザイン原則を文書化して、一貫性と拡張性を可能にする構造を構築します。 Tailwind CSS およびフレームワークに依存しないアプローチで動作します。 ソース: sanky369/vibe-building-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/sanky369/vibe-building-skills --skill design-foundation- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
design-foundation とは？
デザインシステムの基盤を確立または形式化します。デザイン トークン (色、タイポグラフィ、間隔、影、境界線) を作成し、コンポーネント アーキテクチャを定義し、デザイン原則を文書化して、一貫性と拡張性を可能にする構造を構築します。 Tailwind CSS およびフレームワークに依存しないアプローチで動作します。 ソース: sanky369/vibe-building-skills。
design-foundation のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/sanky369/vibe-building-skills --skill design-foundation インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/sanky369/vibe-building-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01