98.8K+ダウンロード
使い方ガイドへスキップ
gpt-taste作者 Leonxlnx

GPT Taste スキル。

Claude Code と Codex 向けの UI デザインスキル：エディトリアルレイアウト、レイアウトのバリエーション、GSAP モーションを一つのフロントエンドスキルに統合。

  • Web & UI
  • UI コード
OpenDesign をダウンロード使い方ガイドを見る
Leonxlnx/taste-skill · skills/gpt-tasteskill/SKILL.mdSKILL.md
--- name: gpt-taste description: Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing. --- ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP) ## 2. AIDA STRUCTURE & SPACING ## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE ## 4. THE GAPLESS BENTO GRID ## 5. ADVANCED GSAP MOTION & HOVER PHYSICS ## 6. COMPONENT ARSENAL & CREATIVITY
2026-09-14 にアップストリームファイルから読み取られたフロントマターとセクション見出し · 全体で 7,857 文字

01 できること

Claude Code と Codex における gpt-taste スキルの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、標準的な LLM のレイアウトバイアスを打ち破る、受賞レベルのフロントエンドデザインエンジニアリングを強制します。

Pythonによるランダム化を利用してレイアウトの繰り返しを防止し、大きなセクション間隔を持つAIDAページ構造を必須とし、超ワイドコンテナを使ってヒーロー見出しを2〜3行に制限し、grid-flow-denseを用いて数学的に完璧な隙間のないbentoグリッドを構築し、ピン留め・スタッキング・スクラブアニメーションのための高度なGSAP ScrollTriggerを実装し、タイポグラフィ内にインラインのマイクロ画像を直接埋め込み、「SECTION 01」のようなメタラベルや6行に折り返される狭いコンテナを禁止します。UIコードを出力する前に、すべてのページでdesign_plan検証ブロックが必要です。

生成されるもの

  • GSAP ScrollTriggerアニメーションと数学的に完璧なグリッドを備えたReact/UIコード
プロンプト例を見る ↗

仕組み

  1. 01
    プロンプトシードからPythonランダム化をシミュレートする

    UIコードを書く前に、ユーザープロンプトの文字数を使ってPythonスクリプトをシミュレートし、1つのヒーローアーキテクチャ、1つのタイポグラフィスタック、3つのコンポーネントアーキテクチャ、2つのGSAPパラダイムを決定論的に選択します。

  2. 02
    AIDAフレームワークでページを構造化する

    Attention（シネマティックなヒーロー）、Interest（高密度なbentoグリッド）、Desire（GSAPスクロール効果）、Action（大きなCTAとフッター）に従ってページを構築します。

  3. 03
    数学的精度で隙間のないbentoグリッドを構築する

    すべてのbentoグリッドでTailwindのgrid-flow-denseを使用し、col-spanとrow-spanの値が完全にかみ合い、空の隙間や欠けた角がないことを数学的に検証します。

  4. 04
    高度なGSAP ScrollTriggerアニメーションを実装する

    分割レイアウトによるスクロールピン留め、画像のスケール・フェード効果、順次の不透明度変化によるスクラブテキストリビール、動的なカードスタッキングのために、ScrollTriggerを使った本物のGSAPを記述します。

  5. 05
    必須のDesign_plan検証を出力する

    React/UIコードを書く前に、Python RNGの実行、AIDAチェック、2〜3行保証のためのヒーロー数式検証、bentoの密度証明、ラベルスイープ確認を含むdesign_planブロックを出力します。

02 適合性を確認

gpt-taste Skill をいつ使用するか

このような UI デザイン作業の場合は、Claude Code または Codex で gpt-taste スキルを使用してください。適用範囲と制限は、スキル自体のファイルから取得されています。

適している場合

  • シネマティックでモーション豊富なGSAPスクロール効果を必要とする受賞歴のあるフロントエンドページ
  • 数学的に完璧なbentoグリッドを備えた高密度エディトリアルレイアウト
  • LLM出力の繰り返しパターンを打ち破るレイアウトの多様性が必要なプロジェクト
  • 高度なGSAP ScrollTriggerによるピン留め、スタッキング、スクラビングを必要とするインターフェース

境界を知る

  • モーションのない静的なインターフェースは厳格に禁止されています

提供すべきもの

  • 必要なものGSAP — SKILL.md で必須として記載されています。

03 スキルの内部

gpt-tasteスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する6つの具体的な指示、デフォルト、制限 — ファイルの中でも結果を変える部分です。

  1. ヒーロー見出しは最大2〜3行に制限

    H1にはmax-w-5xlやmax-w-6xlのような超ワイドコンテナを使用し、clamp(3rem, 5vw, 5.5rem)でフォントサイズを小さくして、見出しが2〜3行を超えないようにします。

  2. メタラベルは永久に禁止

    「SECTION 01」「SECTION 04」「QUESTION 05」「ABOUT US」のようなラベルは永久に禁止されています。安っぽく非プロフェッショナルに見えるため、完全に削除してください。

  3. タイポグラフィスタックはInterフォントを除外

    Satoshi、Cabinet Grotesk、Outfit、Geistの中から選択してください。Interフォントは明確に禁止されており、決して使用してはいけません。

  4. コードや出力に絵文字を使用しない

    コード、コメント、あらゆる出力において絵文字を一切使用せず、厳密にプロフェッショナルな体裁を維持します。

  5. オーバーフローラッパーで横スクロールを防ぐ

    画面外のアニメーションによる横スクロールバーの発生を確実に防ぐため、ページ全体を overflow-x-hidden w-full max-w-full クラスを持つ main 要素で囲みます。

  6. ボタンテキストのコントラストを完璧にすることが必須

    ボタンは、暗い背景には白いテキスト、明るい背景には暗いテキストを使用し、完全に判読可能でなければなりません。テキストが見えないことは失敗です。

04 実際に使う

Claude Code または Codex に gpt-taste をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

gpt-taste を Claude Code、Codex、または他のエージェントに追加する

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste

skills/gpt-tasteskill/SKILL.md用の汎用skills CLIコマンドです。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初の UI デザインタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Build a landing page for [product name] showcasing [three key features]. Use a cinematic hero with inline typography images, a gapless bento grid for the feature cards, GSAP scroll pinning to reveal testimonials as the user scrolls, and horizontal accordion components for the FAQ section. Include a massive CTA section at the bottom.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • ヒーローの見出しが max-w-5xl や max-w-6xl のような超幅広コンテナで2〜3行に収まっているか確認する
  • bento グリッドが grid-flow-dense を使用し、空白のない状態で数学的に噛み合っているか確認する
  • SECTION 01 や QUESTION 05 のようなメタラベルがすべて削除されているか確認する
  • 暗い背景に白いテキスト、明るい背景に暗いテキストで、ボタンテキストのコントラストが完璧であるか確認する
  • ページ構成が、ナビゲーション、Attention（注意）のヒーロー、Interest（興味）のbento、Desire（欲求）のGSAP、Action（行動）のフッターというAIDAフレームワークに従っているか確認する
  • ヒーローセクションにスタンプアイコンやスパムタグが存在しないか確認する

OpenDesignでは gpt-tasteをそのSKILL.mdリンクからインポートします：Plugins → Add → Skill → Import from link、その後トップバーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill ブランチ main
スキルファイル
skills/gpt-tasteskill/SKILL.md 検証時に記録されたコンテンツチェックサム、コミット ccbc156
License
MIT LICENSE より。
リポジトリスター数
86,946 2026年9月14日時点のGitHubスナップショット（Leonxlnx/taste-skillリポジトリ全体。このカタログには11のスキルが含まれています）。gpt-tasteの評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

  1. コア指令：AWWWARDSレベルのデザインエンジニアリングこのスキルを、レイアウト生成における統計的なLLMのバイアスを打破するエリートなデザインエンジニアリングとして位置づけます
  2. Pythonによる真のランダム化（ループの打破）プロンプトの文字数からレイアウトを決定論的に選択し、繰り返しを防ぐシミュレートされた Python スクリプトの使用を必須とします
  3. AIDA構造とスペーシングAttention、Interest、Desire、Actionのフレームワークを要求し、各セクション間に py-32 md:py-48 という大規模な縦方向のパディングを設けます
  4. ヒーローの構造と「2行の鉄則」超幅広コンテナを強制し、見出しは最大2〜3行までとし、6行の折り返しを引き起こす狭いコンテナを禁止します
  5. すき間のないbentoグリッドgrid-flow-dense の使用と、col-spanおよびrow-spanの値が空白を一切残さないことの数学的検証を要求します
  6. 高度なGSAPモーションとホバー物理演算スクロールピン留め、画像のスケールフェード、スクラブ式テキストリビール、カードスタッキング、ホバー時のトランスフォーム効果を定義します
  7. コンポーネントの武器庫と創造性インライン組み込みのタイポグラフィ画像、横型アコーディオン、無限マーキー、証言カルーセルをランダム選定用に列挙します
  8. コンテンツ、アセット、厳格な禁止事項メタラベルを永久に禁止し、CSSフィルターを用いたpicsum画像のシード指定を規定し、overflow-x-hiddenラッパーを要求します
  9. 必須のプリフライト <design_plan>UIコードを書く前に、PythonのRNG、AIDAチェック、ヒーローの計算、bentoの密度証明を含む検証ブロックを要求します
スキル自身による説明
エリート UX/UI & 高度な GSAP モーションエンジニア。レイアウトのバリエーションのための Python 駆動の真の乱数化、厳格な AIDA ページ構造、幅広のエディトリアルタイポグラフィ（6行折り返しを禁止）、隙間のないベントグリッド、厳格な GSAP ScrollTriggers（ピン留め、スタック、スクラビング）、インラインマイクロ画像、大きなセクション間隔を徹底します。

SKILL.md のフロントマター説明。ファイル全体は約 7,857 文字です。GitHub でファイル全体を読む。

06 インストールする前に

gpt-tasteスキルに関する質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルはなぜUIコードを生成する前にPythonでランダム化を行うのですか？

LLMは本質的に怠惰で、統計的バイアスにより常に最初のレイアウト候補を選んでしまいます。このスキルは、あなたのプロンプトの文字数を決定的なシードとして使用するPythonスクリプトをシミュレートし、多様なヒーロー構造、タイポグラフィスタック、コンポーネント、GSAPアニメーションの選択を強制することで、単調な出力を防ぎます。

GPT テイスト

実際の UI デザインタスクで gpt-taste を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから gpt-taste をインポートして、上記のプロンプトを貼り付け、結果の前にプランを読んでください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応