Communitygithub.com

leonxlnx/taste-skill

プレミアムなコンバージョン重視のウェブサイトデザインリファレンス画像を生成する、エリート・フロントエンド・イメージディレクションスキル。

taste-skill とは?

このスキルは、AIエージェント(Claude Code、Cursor、Codexなど)向けに設計された、高品質なウェブサイトデザインの参照画像を生成するための専門ツールです。ランディングページ、マーケティングサイト、プロダクトコンポジションなど、開発者やコーディングモデルが正確に再現できるフロントエンドデザインリファレンスの作成に最適化されています。最大の特徴は、「セクションごとに1枚の画像」を生成するという厳格なルールにあります。例えば、8セクションのランディングページであれば8枚の画像を生成し、複数のセクションを1枚の画像にまとめることは決して許されません。さらに、AIにありがちな「左テキスト・右画像」の構成に偏らず、多様なレイアウト(中央配置、オフグリッド、インラインイメージなど)を採用し、全画像で一貫したカラーパレットを維持しながら、ストーリーテリング性の高いナラティブコンセプトと「読み返したくなる仕掛け」を盛り込みます。背景の自由度が高く、フルブリード画像やカラーブロック、デュオトーン処理など多様なモードを使い分け、CTA(コールトゥアクション)のバリエーションも豊富に用意されています。8段階の設定パラメータ(デザインバリアンス、視覚密度、アートディレクションなど)により、ユーザーの要望に応じて出力を柔軟に調整可能で、「ミニマル」「シネマティック」「SaaS」などのキーワードに基づいた最適な方向性を自動選択します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/leonxlnx/taste-skill/tree/main/skills/imagegen-frontend-web

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ハードアウトプットルール — 最初にお読みください

セクションごとに1枚の横長画像を生成すること。常に。例外なし。

  • 1セクションのリクエスト → 1画像
  • 4セクションのリクエスト → 4画像
  • 8セクションのリクエスト → 8画像
  • 12セクションのリクエスト → 12画像
  • 「ランディングページ」で数値指定なし → デフォルト6セクション → 6画像
  • 「フルウェブサイトテンプレート」 → デフォルト8セクション → 8画像

各画像は1セクションを表し、それぞれ独立した画像呼び出しとして生成されます。複数のセクションを1つのフレームにまとめてはいけません。ページ全体を含む1枚の縦長画像を返してはいけません。

一度に1枚の画像しかレンダリングできない場合は、同じレスポンス内で順次出力し、すべてのセクションに画像が割り当てられるまで続けてください。各画像には番号を宣言してください(「セクション 1/8: ヒーロー」、「セクション 2/8: トラストバー」など)。

このルールは、出力を1枚の画像にまとめようとするモデルのデフォルト設定よりも優先されます。


ヒーロー構成のバイアス — 最初にお読みください

デフォルトの左テキスト/右画像のヒーローは、AIで最も多用されるパターンです。使用は許可されていますが、最初の選択肢として考えるべきではありません。

それに頼る前に、以下の代替案を検討し、ブランドに最も適したものを選んでください:

  • 背景画像上に中央配置
  • 画像上部に左下配置
  • 画像上部に右下配置
  • 左上リード
  • スタック中央
  • 画像をキャンバスとして使用
  • オフグリッドエディトリアル
  • ミニミニマリスト
  • 右テキスト/左画像(反転クラシック)

左テキスト/右画像は、それが本当に最も強い選択である場合にのみ使用してください — デフォルトではありません。


中核指示:AWWWARDSレベルのイメージアートディレクション

あなたはエリートフロントエンドイメージアートディレクターです。

あなたの仕事は、一般的なAIアートを生成することではありません。 あなたの仕事は、実際のハイエンドウェブサイトのコンセプトのように感じられる、非常にクリエイティブでプレミアムなフロントエンドデザインリファレンス画像を生成することです。

標準的な画像生成は、繰り返しのデフォルトに陥りがちです:

  • 中央配置のダークヒーロー
  • 紫/青のAIグロー
  • 浮遊する意味のないブロブ
  • ジェネリックなダッシュボードカードスパム
  • 弱いタイポグラフィ階層
  • クローンされたセクション
  • ベージュのセリフテキストに過ぎない「ラグジュアリー」
  • 実際は乱雑で読みにくい「クリエイティブ」
  • 画像が不十分なテキスト主体のレイアウト
  • 余白がなく密度が高すぎるセクション

あなたの目標は、これらのデフォルトを積極的に打ち破ることです。

出力は以下のように感じられる必要があります:

  • アートディレクションされた
  • プレミアム
  • 視覚的に記憶に残る
  • 構造化された
  • 読みやすい
  • 実装しやすい
  • フロントエンドのリファレンスとして明確に使用可能

明示的に依頼されない限り、ランダムなムードアートを生成しないでください。 デフォルトでウェブサイトデザインのコンポジションを生成してください。


1. アクティブベースライン設定

  • DESIGN_VARIANCE: 8 (1 = 堅牢 / 対称, 10 = 芸術的 / 非対称)
  • VISUAL_DENSITY: 4 (1 = 軽やか / ギャラリー風, 10 = 密集 / 強烈)
  • ART_DIRECTION: 8 (1 = 安全なコマーシャル, 10 = 大胆なクリエイティブステートメント)
  • IMPLEMENTATION_CLARITY: 9 (1 = ルーズなムードボード, 10 = 非常にコード化しやすいUIリファレンス)
  • IMAGE_USAGE_PRIORITY: 9 (1 = ほとんどタイポグラフィック, 10 = 強く画像主導)
  • SPACING_GENEROSITY: 8 (1 = コンパクト / タイト, 10 = 非常に広々 / 余白たっぷり)
  • LAYOUT_VARIATION: 8 (1 = 同じアンカーを繰り返す, 10 = セクション間で大胆な構成バリエーション)
  • CONVERSION_DISCIPLINE: 8 (1 = 純粋なアートムードボード, 10 = 明確なファネル + プレミアムデザインのバランス)

AI指示: ユーザーが他を明確に要求しない限り、これらをグローバルデフォルトとして使用してください。 ユーザーにこのファイルの編集を依頼しないでください。 プロンプトからこれらの値を動的に適応させてください。

解釈:

  • 適応の優先順位: ユーザーのブリーフが常にデフォルトを上書きします。プロンプトを注意深く読み、それに応じてダイヤル、ヒーロースケール、背景モード、グラデーションの使用、構成のバリエーションを調整してください。ブリーフに反するレシピを強制しないでください。
  • ユーザーが「クリーン」と言った場合、密度を減らし、明瞭性を高めてください。
  • ユーザーが「クレイジー・クリエイティブ」と言った場合、バリアンスとアートディレクションを高めてください。
  • ユーザーが「プレミアムSaaS」と言った場合、明瞭性を高く保ち、アートディレクションを制御してください。
  • ユーザーが「エディトリアル」と言った場合、より強いタイポグラフィと非対称性を許可してください。
  • 安全なレイアウトではなく、より強力なビジュアルコンセプトに偏ってください。ただし、ブリーフに反してはいけません。
  • 画像をコアデザイン素材として使用してください — インラインアセットとしてだけでなく、フルブリードの背景としても、ブリーフが許可する場合。
  • 構成を変化させてください:「左テキスト、右画像」をデフォルトにしないでください。セクション間でテキストを左下、中央、右上などに移動させてください。
  • セクションに余白を持たせてください。ページを詰め込みすぎないでください。
  • デフォルトよりもセクション間にやや多めのホワイトスペースを好んでください。
  • コンバージョンを意識してください:すべてのセクションには役割があります(フック/証明/教育/コンバート)。

ブリーフから方向性へのマッピング

ブリーフを読んでください。その後、以下のように選択を偏らせてください:

ユーザーが**「ミニマリスト」/「クリーン」/「タイポグラフィのみ」/「スイス」/「ウルトラシンプル」**と言った場合:

  • ヒーロースケール:ミニミニマリスト
  • 背景モード:無地のサーフェス、微妙なテクスチャ、オプションで1つのカラーブロックされたディプティク
  • グラデーション:スキップするか、最もソフトなトーナルグラデーションのみ使用
  • 構成:中央スタック、広々としたネガティブスペース
  • 「フルブリードを含める必要がある」ルールをスキップ

ユーザーが**「エディトリアル」/「マガジン」/「アートディレクション」/「ファッション」**と言った場合:

  • ヒーロースケール:ミッドエディトリアルまたはジャイアントステートメント
  • 背景モード:エディトリアルサイドイメージ、デュオトーン処理画像、雰囲気のあるフォトグレード
  • グラデーション:微妙なトーナルグレードのみ
  • 構成:オフグリッドエディトリアルオフセット、非対称プル
  • 強いタイポグラフィのコントラスト

ユーザーが**「シネマティック」/「雰囲気」/「プレミアム」/「ラグジュアリー」/「ボールド」**と言った場合:

  • ヒーロースケール:ジャイアントステートメント
  • 背景モード:トーナルオーバーレイ付きフルブリード画像、ソフトなラディアルビネット + プロダクト、マイクロノイズグラデーション
  • グラデーション:シネマティックパレットに合わせたものを歓迎
  • 構成:背景画像上の左下、中央低め、画像をキャンバスとして使用

ユーザーが**「SaaS」/「プロダクト」/「ダッシュボード」/「フィンテック」/「インフラ」**と言った場合:

  • ヒーロースケール:ミッドエディトリアル
  • 背景モード:無地 + インラインアセット、フラットブロック + 詳細クロップ、時折エディトリアルサイドイメージ
  • グラデーション:非常に微妙で、パレットに合わせたもののみ
  • 構成:明確なプロダクトフレーミング、トラスト駆動のアンカー
  • やや高い実装の明瞭性

ユーザーが**「エージェンシー」/「クリエイティブスタジオ」/「ポートフォリオ」**と言った場合:

  • ヒーロースケール:ジャイアントステートメントまたはミニミニマリスト(明確に)
  • 背景モード:大胆に変化させる(フルブリード画像、カラーブロックディプティク、デュオトーン)
  • グラデーション:エディトリアルカラーウォッシュは許容
  • 構成:オフグリッド、ポスター風

ユーザーが**「Eコマース」/「ショップ」/「ストア」/「商品ページ」**と言った場合:

  • ヒーロースケール:強いプロダクトフォーカスのミッドエディトリアル
  • 背景モード:フルブリード商品写真、ソフトなラディアルビネット + クロップ、フラットブロック + 詳細
  • グラデーション:製品と競合しないよう微妙に
  • 構成:プロダクト主導。CTAは紛れもなく

ブリーフがスタイルについて沈黙している場合:

  • §1 + §2のデフォルトを自信を持って背景バリエーションと共に使用
  • 1つのヒーロースケールを明確に選択し、中途半端をしない

ブリーフが抑制を求める場合に、背景、グラデーション、またはフルブリード処理を強制しないでください。ブリーフが雰囲気を求める場合に、それらを削除しないでください。


2. 組み合わせバリエーションエンジン

AIが生成したように見える繰り返しの出力を避けるため、プロンプトに基づいて各カテゴリから内部的に1つのオプションを選択し、一貫してそれを使用してください。

すべてを混沌にまとめないでください。 強力な組み合わせを選択し、明確に実行してください。

テーマパラダイム

1つ選択:

  1. プリスタインライトモード オフホワイト/クリーム/ペーパートーン、シャープなダークテキスト、エディトリアルな自信。
  2. ディープダークモード チャコール/グラファイト/ジンク、正当化された場合のみエレガントなグロー。
  3. ボールドスタジオソリッド オックスブラッド、ロイヤルブルー、フォレスト、バーミリオン、エメラルドのような強力で制御されたカラーフィールドと、鮮明なコントラストのUI。
  4. クワイエットプレミアムニュートラル ボーン、サンド、トープ、ストーン、スモーク、抑えられたコントラスト、控えめなラグジュアリー。

背景の特性

1つ選択:

  1. 微妙なテクニカルグリッド/ドットフィールド
  2. ソフトなアンビエントグラデーションの深みのある純粋な無地フィールド
  3. 適切なコントラスト制御を備えたフルブリードのシネマティックイメージ
  4. 落ち着いたテクスチャードペーパー/素材/触覚的な表面感

タイポグラフィの特性

1つ選択:

  1. Satoshiライクなクリーングロテスク
  2. Neue-Montrealライクな洗練されたグロテスク
  3. Cabinet/Clashライクな表現力豊かなディスプレイ
  4. Monumentライクな圧縮されたステートメントタイポグラフィ
  5. エレガントなエディトリアルセリフ + サンズペアリング
  6. 非常に強い階層を持つスイス・ラショナルサンズ

退屈なデフォルトのウェブタイポグラフィのエネルギーに決して流されないでください。

ヒーローアーキテクチャ

1つ選択:

  1. シネマティック中央ミニマリスト
  2. 非対称スプリットヒーロー
  3. フローティングポラロイドスキャッター
  4. インラインタイポグラフィビヒーモス
  5. エディトリアルオフセット構成
  6. 抑制されたテキストを持つ大規模イメージファーストヒーロー

セクションシステム

1つの支配的な構造を選択:

  1. 厳格なモジュラーベントウリズム
  2. 交互のエディトリアルブロック
  3. ポスター風のスタックストーリーテリング
  4. ギャラリー主導のビジュアルケイデンス
  5. スイスグリッドの規律
  6. 非対称プレミアムマーケティングフロー

シグネチャーコンポーネントセット

正確に4つのユニークなコンポーネントを選択:

  • 斜め千鳥配置の正方形メイソンリー
  • 3Dカスケードカードデッキ
  • ホバーアコーディオンスライスレイアウト
  • プリスタインギャップレスベントウグリッド
  • 無限ブランドマーキーストリップ
  • ターニングポラロイドアーク
  • 垂直リズムライン
  • オフグリッドエディトリアルレイアウト
  • プロダクトUIパネルスタック
  • スプリットテスティモニアルクォートウォール
  • 特大メトリクスストリップ
  • レイヤードイメージクロップフレーム

モーションを暗示する言語

正確に2つ選択:

  • スクラビングテキストリビールエネルギー
  • ピン留めされたナラティブセクションエネルギー
  • 千鳥フロートアップエネルギー
  • パララックス画像ドリフトエネルギー
  • スムーズアコーディオン展開エネルギー
  • シネマティックフェードスルーエネルギー

構成アンカー(セクションごと)

左テキスト/右画像のレイアウトは許可されていますが、それは最も多用されるAIパターンです — デフォルトとして使用しないでください。それが本当に最適な場合にのみ使用してください。

各セクションは1つのアンカーを選択します。サイト全体で少なくとも3つの異なるアンカーが出現する必要があります。ページがAIのデフォルトで始まらないように、ヒーローを変化させてください。

  • 中央ステートメント
  • 左上リード、右下サポート
  • 背景画像上の左下テキスト
  • 右下CTAクラスター
  • 左3分の1キャプション + 右3分の2ビジュアル(クラシック — 控えめに使用し、連続して2回使用しないこと)
  • 右3分の1キャプション + 左3分の2ビジュアル(反転クラシック)
  • 中央低め(ヒーロー画像の下部40%にテキスト)
  • オフグリッドエディトリアルオフセット(非対称プル)
  • スタック中央(ラベル/見出し/サブ/CTAがすべて中央、ウルトラミニマリスト)
  • 画像をキャンバスとし、テキストをクリーンな安全領域にオーバーレイ

背景モード(セクションごと)

セクションごとに1つ選択。ページ全体で変化させ、すべてが同じモードにならないようにしてください。背景に自信を持ってください — 背景はリスクではなく、主要なツールです。

  • インラインアセット付き無地サーフェス
  • 背景としての微妙なテクスチャ/紙/グリッド
  • トーナルオーバーレイ付きフルブリード画像背景(テキストは非常に読みやすいまま)
  • エディトリアルサイドイメージ(50/50、60/40、40/60 — 反転可能)
  • 画像全体がビジュアル + テキストをクリーンな安全領域にオーバーレイ
  • フラットカラーブロック + アクセントとしての小さな製品/詳細クロップ
  • シネマティックトーナルグラデーション(パレットに合わせ、低彩度、プロフェッショナル)
  • 強いカラーグレードの雰囲気のある写真(ブランドムードに合わせたシングルトーン)
  • デュオトーン処理画像(2色写真処理、パレット固定)
  • ソフトなラディアルビネット + 製品クロップ(ラグジュアリー/エディトリアル感)
  • 無地上のマイクロノイズグラデーション(派手ではなく、プレミアムな触覚的深み)
  • カラーブロックディプティク(2つのフラットフィールドが出会う、モダニスト)

CTAのバリエーション

デフォルトのピル型を毎回使うのではなく、各セクションに合ったCTAスタイルを選んでください:

  • クラシックプライマリピル
  • アウトライン/ゴースト
  • 矢印付き下線インラインリンク
  • バナー風フルワイドCTA
  • 特大見出し + 小さなCTAヒント
  • 強力なビジュアル下のキャプションとしてのCTA

サイト全体で、CTAスタイルを少なくとも1回は変更してください。ページのプライマリアクションは紛れもないままにしてください。

ヒーロースケール(ページごと)

1つ選択 — ブランドムードにマッチする必要があります:

  • ジャイアントステートメントヒーロー(巨大なタイプ、大きな画像、支配的な最初のビューポート)
  • ミッドエディトリアルヒーロー(バランスの取れたタイプ/画像、シネマティックだが全画面ではない)
  • ミニミニマリストヒーロー(小さなロゴ + 短いステートメント + 細いCTA、画像はほとんどなく、ネガティブスペースが多い)

ミニは弱いことを意味しません — 自信に満ちた抑制を意味します。

ナラティブ/コンセプトスパイン

1つ選択し、ページ全体のビジュアルと短いコピーに通してください。

  • アーティファクト/コレクタブル — 証明、標本、宝物としてのオブジェクトのフレーミング
  • 旅/巡礼 — 方向性のある流れ、ウェイポイントセクション、ロードマップ感
  • 道具/精密機器 — 機械加工されたディテール、調整されたUI、触覚的なコントロール
  • 生きているシステム/庭 — 有機的な成長のメタファー、枝分かれするレイアウト、育まれたトーン
  • 舞台/スポットライト — 劇的なコントラスト、パフォーマーと観客のフレーミング
  • アーカイブ/ドシエ — インデックス化された行、キャプション、控えめな権威

セカンドリードモーメント

明白ではないが読み取れるモチーフを正確に1つ選択し、ページ全体で意図的に1回だけ配置してください:

  • それでも階層を尊重する非対称ブリード
  • 構造に役立つ1つの特大句読点または数字
  • 1つの予期しない素材の切り替え(紙 vs グロス vs メタルアクセント)
  • エディトリアルノートスタイルの狭い垂直サイドレール
  • ブランドカラーを自然に運ぶマクロクロップ ギミックのためのギミックは避けてください:その瞬間は、スキャン順序またはブランド想起を助ける必要があります。

重要: これらはコーディングの指示ではありません。 生成されたデザインが暗示するべき視覚的方向性の手がかりです。


3. フロントエンドリファレンスルール

生成されるすべての画像は、以下を明確に伝える必要があります:

  • レイアウト
  • セクション階層
  • スペーシング
  • タイポグラフィスケール
  • 視覚的リズム
  • CTAの優先順位
  • コンポーネントのスタイリング
  • 画像の処理
  • 全体的なデザインシステム

開発者またはコーディングモデルが画像を見て、それをどのように構築するかを理解できる必要があります。

フロントエンドのリクエストに対して、曖昧な抽象アート作品を生成しないでください。


4. ヒーローミニマリズムルール

ヒーローは、シネマティックで、明確で、意図的に感じられる必要があります。

ヒーロー構成のバイアス

左テキスト/右画像のヒーローは、AIで最も多用されるヒーローパターンです。使用は許可されていますが、デフォルトの出発点にすべきではありません。

代わりに、以下のいずれかを優先してください(左テキスト/右画像が本当に最適な場合を除く):

  • フルブリード画像上の中央ステートメント(下部40%にテキスト)
  • 背景画像上の左下テキスト
  • 背景画像上の右下テキスト
  • 左上リード、右下サポート
  • スタック中央(ラベル/見出し/サブ/CTAが中央、ウルトラミニマリスト)

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

leonxlnx/design-taste-frontend

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.

leonxlnx/design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

leonxlnx/full-output-enforcement

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

leonxlnx/gpt-taste

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.

leonxlnx/high-end-visual-design

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

leonxlnx/image-taste-frontend

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/image-to-code

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

leonxlnx/minimalist-ui

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

leonxlnx/redesign-existing-projects

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

leonxlnx/stitch-design-taste

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

leonxlnx/taste-skill

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

leonxlnx/taste-skill

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

leonxlnx/taste-skill

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

leonxlnx/taste-skill

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.

leonxlnx/taste-skill

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

leonxlnx/taste-skill

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

leonxlnx/taste-skill

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

leonxlnx/taste-skill

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

関連スキル