mcpField
A
awesome-design-skills

awesome-design-skills

github.com/podoデザイン・UI29189 回インストール1 日前に更新
リポジトリ

awesome-design-skills について

awesome-design-skillsは、typeui.shでインストールできるデザインスタイルのスキル集です。各スキルにはエージェント向け指示書とデザインの解説があり、色、タイポグラフィ、余白、モーションなどの選択を揃えられます。

主な機能

  1. 0167種類のデザインスタイルを収録
  2. 02コマンドラインで閲覧・インストール
  3. 03SKILL.mdとDESIGN.mdを収録
  4. 04色・タイポグラフィ・余白・モーションを網羅

活用シーン

  1. 01インターフェース作業のビジュアルスタイル選定
  2. 02glassmorphismやeditorialなどのスタイル導入
  3. 03エージェントに一貫したデザイン制約を設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill awesome-design-skills

インストール後、Claude Code で/awesome-design-skillsを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

awesome-design-skills

カタログの概要 — 全登録項目：bergside/awesome-design-skills

スタイルスキルをインストールする

利用可能なスキルを確認します：

npx typeui.sh list

特定のスタイルをインストールします：

npx typeui.sh pull <slug>
# examples:
npx typeui.sh pull glassmorphism
npx typeui.sh pull brutalism
npx typeui.sh pull claymorphism
npx typeui.sh pull editorial
npx typeui.sh pull bento

スキルはローカルのエージェントディレクトリにインストールされ、すぐに利用できます。

利用可能なスタイル（全67種類）

美的なムード：agentic、ant、artistic、bento、bold、brutalism、cafe、claymorphism、clean、colorful、contemporary、corporate、cosmic、creative、dashboard、dithered、doodle、dramatic、editorial、elegant、energetic、enterprise、expressive、fantasy、fiction、flat、friendly、futuristic、glassmorphism、gradient、immersive、luxury、minimal、modern、mono、neobrutalism、neon、neumorphism、paper、perspective、premium、professional、publication、refined、retro、riso、simple、sketch、skeuomorphism、sleek、spacious、storytelling、vibrant、vintageなど。

機能

レジストリ内の各スキルには、以下が含まれます：

  • SKILL.md — エージェント向けの指示：トークンパレット、コンポーネントのルール、アクセシビリティの制約、品質基準
  • DESIGN.md — 人間が読める説明：ブランドの使命、スタイルの基礎、推奨・非推奨のパターン

エージェントは両方のファイルを読み込み、色、タイポグラフィ、余白、影、動き、口調など、あらゆるUIタスクで美的スタイルを一貫して適用します。

使用しない場合

  • 機能的なデザインツール（Figma、トークン、アクセシビリティ監査） — 関連するツールスキルを使用します
  • 実際の製品向けのブランド固有トークン — design-tokens-skill を使用するか、独自の DESIGN.md を作成します
  • Material Design 3 / プラットフォームのHIG — material-3-skill または platform-design-skills を使用します

コメント

Markdown 対応