madebymustafa/design-taste

これは何？

主な機能

• 01ブリーフの読み取り、デザインの方向性の宣言、LLMの既定パターンの回避に対応する中核スキル
• 02それぞれ異なるビジュアルアイデンティティを持ち、変更前・変更後のデモが付属する10種類のジャンルパック
• 03タイポグラフィ、色、モーション、アクセシビリティ、UXコピー、パフォーマンス向けのCraftスキル
• 04トークン駆動のCSS、セマンティックHTML、重要度順のコードレビューに対応するコードスキル
• 05Claude Code、Cursor、Codex、opencode、Cline、Rooを対象とするインストールスクリプト

ユースケース

• テンプレートのように見せずに、AIコーディングエージェントでランディングページやマーケティングサイトを生成する
• AIで構築するフロントエンドプロジェクト全体で、一貫したビジュアルの方向性を保つ
• エージェントが生成したUIを、ありきたりなパターンやアクセシビリティ上の不足がないかレビューする
• 3層構造を文書化したデザイントークンシステムを構築する

クイックスタート

1. 1

   リポジトリをクローンする

   git clone https://github.com/madebymustafa/design-taste.git
2. 2

   プロジェクトフォルダーに移動する

   cd design-taste
3. 3

   すべてのスキルをエージェントにインストールする

   ./scripts/install.sh

使う前に知っておきたいこと

• !Genre packsは個性の強いビジュアルアイデンティティなので、プロジェクトごとに1つ選んでください。

収録されている特集

トピック

よくある質問

design-taste とは？

Claude Code、Codex、Cursor、opencodeのUI生成を、ありきたりなものから意図的にデザインされたものへ導く、24種類のオープンソースエージェントスキル集です。 AIコーディングエージェントが生成するインターフェースは、インディゴのグラデーション、中央揃えのヒーロー、3つの機能カード、デフォルトフォントといった同じパターンになりがちです。design-tasteは、各エージェントのskillsディレクトリに置くプレーンな指示ファイルであるエージェントスキルを集め、こうした既定のパターンから出力を引き離します。中核となるスキルでは、ブリーフの読み取り、デザインの方向性の決定、よくあるLLMのパターンの排除、事前チェックリストの実行を扱います。

design-taste は無料で使えますか？ライセンスは？

design-taste は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

design-taste は今もメンテナンスされていますか？

半年以内に更新あり。design-taste の最終コミットは 2026年8月15日 です。

design-taste は何に使えますか？

テンプレートのように見せずに、AIコーディングエージェントでランディングページやマーケティングサイトを生成する AIで構築するフロントエンドプロジェクト全体で、一貫したビジュアルの方向性を保つ エージェントが生成したUIを、ありきたりなパターンやアクセシビリティ上の不足がないかレビューする 3層構造を文書化したデザイントークンシステムを構築する

design-taste のインストール方法は？

リポジトリをクローンする: git clone https://github.com/madebymustafa/design-taste.git プロジェクトフォルダーに移動する: cd design-taste すべてのスキルをエージェントにインストールする: ./scripts/install.sh

design-taste はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/madebymustafa/design-taste