design-system-generator

デザインシステムジェネレーター

自然言語による説明をデザイントレンドに照らし合わせるデザインシステムジェネレーターです。Swiss Modern、Neobrutalism、Glassmorphism、その他20種類以上のデザイントレンドに対応しています。トレンドマッチングスクリプトと、包括的なデザインパターンライブラリが含まれています。

このスキルを使用するタイミング

次のような場合に有効化します：

• 「デザインシステム」、「デザイントレンド」、「トレンドマッチャー」
• 「Swiss Modern」、「Neobrutalism」、「Glassmorphism」
• 「デザインスタイルのマッチング」、「デザイントレンドの提案」
• 「コンポーネントライブラリのトレンド」、「モダンなデザインパターン」

次の用途には使用しません：

• 個別のコンポーネントの実装 → design-system-creator
• ダークモードに特化した作業 → dark-mode-design-expert
• タイポグラフィのみ → typography-expert
• アクセシビリティ監査 → color-contrast-auditor

主な機能

このスキルには、自然言語による説明を次のような特定のデザイントレンドに対応付けるトレンドマッチングスクリプトが用意されています。

• Swiss Modern（すっきり、ミニマル、プロフェッショナル）
• Neobrutalism（大胆、強烈、ドラマチック）
• Glassmorphism（透明、すりガラス）
• Neumorphism（柔らかい、触感のある、浮き上がった）
• Dark Mode（ナイトモード、OLED に最適化）
• Hyperminimalism（本質的、穏やか、禅）
• Maximalism（鮮やか、カラフル、豊か）
• Cyberpunk（ネオン、未来的、ゲーム向け）
• Retrofuturism（ビンテージSF、アーケード）
• 3D Immersive（WebGL、AR、インタラクティブ）
• Motion Design（アニメーション、マイクロインタラクション）
• Bold Typography（大きな文字、動きのある表現）
• Collage（スクラップブック、芸術的）
• Sustainable Design（倫理的、アクセシブル）
• Claymorphism（柔らかい、丸みのある、遊び心のある）
• Terminal Aesthetic（等幅フォント、CLI）
• Web3/Crypto（グラデーション、ブロックチェーン）
• Botanical/Organic（自然、土のような色合い）

使用方法

トレンドマッチャースクリプトを実行します。

npx ts-node scripts/match-trend.ts "description of desired design"

スクリプトは説明を分析し、一致したキーワードとスコアを添えて、最も適合するデザイントレンドを返します。