design-system-generator-skill は何をしますか？
🎨 1つのカラーを入力するだけで、完全なデザインシステムが出力されます。プロダクション対応のデザインシステムを生成するためのAIエージェントスキルです。
概要
このスキルは、AIエージェントが単一のベースカラーから包括的なデザインシステムを生成できるようにします。入力された1色から、カラーパレット、タイポグラフィ、スペーシング、その他のデザイントークンが自動的に計算され、一貫性のあるデザインシステムが構築されます。
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIエージェント
使い方
- ベースカラー（例：
#3B82F6やblue-500）を指定します。 - 好みに応じてオプション（例：出力フォーマット、テーマタイプ）を設定します。
- スキルを実行すると、完全なデザインシステムが生成されます。
出力例
生成されるデザインシステムには以下が含まれます：
- カラーパレット: プライマリ、セカンダリ、ニュートラル、アクセント、成功、警告、エラー色
- タイポグラフィ: フォントファミリー、フォントサイズスケール、行の高さ、太さ
- スペーシング: マージン、パディング、グリッドシステム
- シャドウ: ドロップシャドウ、エレベーションレベル
- ボーダーラジウス: 角丸のサイズ
- コンポーネント: ボタン、カード、フォーム、その他のUI要素のスタイル
環境変数
このスキルは特別な環境変数を必要としません。
ライセンス
MIT