味覚スキル実世界テスト - AIエージェントのフロントエンド美観をワンクリックで改善
今日はフロントエンド開発者向けの情報をいくつかご紹介します。正直なところ、現在のAIエージェントのフロントエンドの中には、見た目がひどいものがあります。レイアウトが中央揃えすぎている、カードが重なり合っている、グラデーションが過剰に使われている、余白や階層構造が不自然、アニメーションのリズム感に欠ける、フォントや間隔が統一されていないなどです。
今日は、フロントエンド開発者にとって役立つ情報をいくつかご紹介します。
正直に言うと、今はいくつかあります。 AI Agent フロントエンドのデザインは極めて劣悪で、レイアウトは中央揃えすぎ、カードは積み重ねられ、グラデーションは過剰に使用され、余白や階層構造は不自然で、アニメーションはリズム感に欠け、フォントや間隔は洗練さに欠ける。結果としてウェブページは安っぽく見え、Codexはその典型的な例である。
数日前、GitHubでこの問題を解決できそうな「Taste Skill」というプロジェクトをようやく見つけました。AI Agent 美観の悪さという問題が原因で、プロジェクトのリポジトリには約4万個のスターが付けられている。
味覚スキルは AI Agent フロントエンドデザインスキルライブラリは、 AI テンプレートベースで画一的、かつ美的魅力に欠けるフロントエンドデザインは排除しましょう。
レイアウト、タイポグラフィ、モーションエフェクト、スペーシング、視覚的密度、デザイン言語といった要素（元々はデザイン経験がなければ判断できなかったもの）を、誰でも簡単に判断できるものへと変える。 AI Agent パフォーマンスを向上させるには、SKILL.md の指示を読み、実行してください。 AI インターフェース生成時の設計判断。
Taste Skillには現在、さまざまな目的のためのスキルモジュールが含まれており、各モジュールは特定の問題を解決するように設計されています。
- design-taste-frontendデフォルトのスキルは、要件に基づいてデザイン言語を推測し、レイアウトの多様性、アニメーションの強度、情報密度など、いくつかの重要な側面を通じて出力を制御します。
- gpt-taste：適切な GPT/Codex の厳格版では、レイアウト変更、GSAP アニメーション、およびテンプレート解除に関して、より高い要件が課せられます。
- image-to-codeまずウェブページの参照画像を作成し、それから… AI シナリオはフロントエンドコードに復元されます。
- redesign-existing-projects既存プロジェクトを修正するために使用します。まず、既存のUIを確認し、レイアウト、間隔、階層構造、ビジュアルスタイルに関する問題を修正します。
- high-end-visual-design視覚的なスタイルは、高級感があり、抑制が効いていて洗練されており、柔らかなコントラスト、余白、フォントの質感、そして自然なアニメーション効果を強調している。
- minimalist-uiNotionやLinearに似た、モダンでミニマルな製品インターフェースを備えているため、SaaS、ツール型製品、開発者向け製品、コンテンツベースのバックエンドなどに適しています。
- industrial-brutalist-ui工業的なスタイル、粗削りな質感、スイス製のフォント、強いコントラスト、そして実験的なレイアウトが特徴で、より個性的でシャープな視覚表現に適しています。
- full-output-enforcement制約条件に使用されます AI 不完全な解答、プレースホルダー、または省略されたコードだけを提供するのではなく、適切な処理方法を提供してください。 Agent 問題は出力が不完全であることです。
- 画像生成スキルこれには、ウェブサイトのビジュアルドラフト、モバイルインターフェースフロー、ブランドビジュアルボードなどの参照画像を生成するために使用されるimagegen-frontend-web、imagegen-frontend-mobile、およびbrandkitが含まれ、それらはCodex、Cursor、または...に渡されます。 Claude コードの実装。
npx skills add https://github.com/Leonxlnx/taste-skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"- コーデックス試験1
スキルありの場合とスキルなしの場合の両方についてウェブページを生成し、結果を比較してみましょう。
プロンプトワード：
ゼロから実装するのを手伝ってください。AI Agent 製品ウェブサイトのホームページには、特別な機能は一切使用されていません。
製品名：LoopPilot
製品ポジショニング：チームを支援するツール自動タスクの計画、実行、およびレビュー AI Agent 作業台。
対象ユーザー：独立系開発者、小規模チームAI プロダクトマネージャー。
ページスタイル：典型的なSaaSテンプレートのような雰囲気、広範囲にわたる青紫のグラデーション、過剰なカードの配置は避けてください。洗練された、抑制された、明確な情報階層構造でありながら、未来的でツールのような美学を取り入れたスタイルを目指します。
以下の項目にご記入ください。
- ホームページ全体をデザインする
- 商品名、メインタイトル、サブタイトル、メインCTA、およびセカンダリCTAが含まれます。
– 3つの主要な機能を紹介します。自動タスクを細分化し、継続的に実行し、レビューと最適化を行う。
製品インターフェースのプレビュー領域は必須ですが、標準的なダッシュボードテンプレートに似せてはなりません。
―最初の画面には、明確な視覚的記憶ポイントを設けるべきです。
- デザインスタイルの要件
– テンプレートを使用しないレイアウトを使用して、すべてのコンテンツを中央揃えや縦並びにならないようにしてください。
フォントの階層構造は明確であるべきであり、タイトルはインパクトがありながらも粗雑であってはならない。
配色を3～5色の主要色に限定する。
アニメーション効果は許容範囲内だが、単に技術力を誇示するためではなく、情報を伝えるためのものであるべきだ。
– このページは、モバイル端末とデスクトップ端末の両方に対応させる必要があります。
- 法規要件
完全な実行可能なコードを直接出力してください。
プレースホルダーは使用しないでください。また、重要なコードを省略しないでください。
デザインの提案をするだけでなく、実際にページを実装してください。
コンポーネントを使用する場合は、すべてのコンポーネントが完全に記述されていることを確認してください。
スタイル設定が必要な場合は、完全なCSS/Tailwindクラスを提供してください。
- 受入基準
– ページは以下のように表示されるべきではありません AI デフォルトで生成されたSaaSテンプレート
- 明確な視覚的階層、分かりやすいCTA
– スクリーンショットは、モバイル端末で9時16分に有効なものでなければなりません。
– すべてのテキストは、はみ出したり重なったりしてはいけません。
最終的な成果物は、実際の製品発表会のホームページに似たものになるはずです。
まず、設計の方向性について簡単に説明し、その後、完全な実装例を示してください。
スキル機能のないバージョンは、「中央揃えのタイトル＋3枚のカード＋青紫のグラデーション」という、典型的なSaaSホームページのレイアウトに従っていません。
しかし、製品の使い勝手は良くありません。右側のワークベンチは、どちらかというと装飾的なイメージです。ユーザーは大きなタイトルやグラフィックに惹かれますが、結局、この製品がチームの作業をどのように支援するのか、あるいはどのようにクローズドループを形成するのかを理解できません。
モバイル端末でも閲覧可能ですが、タイトルの改行がやや唐突です。
味覚スキルを使う：
プロンプトワード：
Taste Skillのdesign-taste-frontendツールとfull-output-enforcementツールを使って、ゼロから実装するのを手伝ってください。AI Agent 製品の公式サイトホームページ。
製品名：LoopPilot
製品ポジショニング：チームを支援するツール自動タスクの計画、実行、およびレビュー AI Agent 作業台。
対象ユーザー：独立系開発者、小規模チームAI プロダクトマネージャー。
ページスタイル：典型的なSaaSテンプレートのような雰囲気、広範囲にわたる青紫のグラデーション、過剰なカードの配置は避けてください。洗練された、抑制された、明確な情報階層構造でありながら、未来的でツールのような美学を取り入れたスタイルを目指します。
以下の項目にご記入ください。
- ホームページ全体をデザインする
- 商品名、メインタイトル、サブタイトル、メインCTA、およびセカンダリCTAが含まれます。
– 3つの主要な機能を紹介します。自動タスクを細分化し、継続的に実行し、レビューと最適化を行う。
製品インターフェースのプレビュー領域が必要ですが、通常のダッシュボードテンプレートのような見た目であってはなりません。
―最初の画面には、明確な視覚的記憶ポイントを設けるべきです。
- デザインスタイルの要件
– テンプレートを使用しないレイアウトを使用して、すべてのコンテンツを中央揃えや縦並びにならないようにしてください。
フォントの階層構造は明確であるべきであり、タイトルはインパクトがありながらも粗雑であってはならない。
配色を3～5色の主要色に限定する。
アニメーション効果は許容されるが、単に技術力を誇示するためではなく、情報を伝えるためのものであるべきだ。
– このページは、モバイル端末とデスクトップ端末の両方に対応させる必要があります。
- 法規要件
完全な実行可能なコードを直接出力してください。
プレースホルダーは使用しないでください。また、重要なコードを省略しないでください。
デザインの提案をするだけでなく、実際にページを実装してください。
コンポーネントを使用する場合は、すべてのコンポーネントが完全に記述されていることを確認してください。
スタイル設定が必要な場合は、完全なCSS/Tailwindクラスを提供してください。
- 受入基準
– ページは次のように表示されるべきではありません AI デフォルトで生成されたSaaSテンプレート
- 明確な視覚的階層構造、分かりやすいCTA
– スクリーンショットは、モバイル端末で9時16分に有効なものでなければなりません。
– すべてのテキストは、はみ出したり重なったりしてはいけません。
最終的な成果物は、実際の製品発表会のホームページに似たものになるはずです。
まず、設計の方向性について簡単に説明し、その後、完全な実装例を示してください。
Taste Skillに上部ナビゲーションバーが追加されたことで、見た目が格段に良くなりました。最近では、上部にナビゲーションバーがないウェブサイトなんてほとんどないですよね？
右側の製品プレビューは、もはや単なる抽象的な図ではなく、ユーザーは段階的なテキストを通して製品の流れを理解できるようになりました。
モバイル版もより成熟しており、機能が独立した情報ブロックとして整理され、読み上げ順序もより自然になっている。
- コーデックス試験2
もちろん、既存のプロジェクトもTaste Skillを使ってリファクタリングできます。
プロンプトワード：
既存プロジェクトのホームページを再デザインするために、Taste Skill の redesign-existing-projects、minimalist-ui、high-end-visual-design、および full-output-enforcement ツールをご活用ください。
プロジェクトの場所：
D:\360MoveData\Users\win\Desktop\公众号\wechat-topic-dashboard-ugly-homepage
背景：
こちらは「WeChat公式アカウントトピック管理プラットフォーム」の公式ホームページです。製品名はContent Deskです。WeChat公式アカウント、小紅書、動画アカウント、知乎などのプラットフォームで活動するコンテンツチームを対象としており、トピック選定、担当者の割り当て、進捗状況の追跡、コンテンツの閲覧などを支援します。 AI 推薦するそしてコンテンツの提示方法。
現在の問題点：
現在のページには必要な機能と情報がすべて揃っているが、見た目は非常にテンプレート的だ。
青・紫・ピンクのグラデーションが濃すぎる。
―誇張された見出し
- ページが過度に中央揃えになっている
- カードの積み重ねは深刻です
– CTAの繰り返し
―商品のスクリーンショットは装飾的なものであり、実際の商品とは異なります。
- 緩やかな情報階層
モバイル端末での読書経路は非常に長い
全体的に見て、普通の AI 生成されたSaaSランディングページ
リファクタリングの目標：
製品のテーマやコア情報を変更することなく、コンテンツ運用ツールのウェブサイトとして、よりプロフェッショナルで、抑制の効いた、信頼できるホームページにリファクタリングしてください。最終的な成果物は、テンプレートページではなく、ローンチ準備中の実際のSaaS製品の公式ウェブサイトに似たものになるべきです。
以下の項目にご記入ください。
- 最初の画面復元
– 製品名をContent Deskのままにする
– 製品ポジショニングの維持：コンテンツチーム向けのWeChat公式アカウントのトピック管理プラットフォーム。
– 明確なメインタイトル、サブタイトル、メインのCTA、およびセカンダリのCTAが必要です。
「効率が300％向上した」といった誇張表現は避けてください。
最初の画面には、単なる装飾画像ではなく、信頼できる製品インターフェースのプレビューを表示する必要があります。
視覚的に印象に残るものであるべきだが、派手であってはならない。
- 製品機能の実演
以下の能力を実証する必要があります。
– AI 推薦するトピックの選択
– マルチプラットフォームのトピック選択管理
– ステータスと責任者の追跡
- 締め切りと優先順位の管理
– コンテンツのリスク警告
– 業績評価
表示しないメソッド単純6枚の大きなカードを積み重ね、コンテンツ操作シナリオに応じて情報階層を再編成します。
- ワークフローの実演
コンテンツチームのトピック選定から事後分析までのプロセスを実演します。
話題のトピックを集める
―トピック選定を評価する
– 作文課題を出す
– レビューとリリース
– データレビュー
ワークフローは製品インターフェースに対応している必要があり、単なる1、2、3ステップのカードであってはなりません。
- ページスタイルの要件
Notion、Linear、Larkのマルチテーブル機能、最新のB2B SaaSツールを彷彿とさせる雰囲気を持つ
控えめで、爽やかで、信頼できる
―適度な情報密度を保ち、過剰な情報は避ける。
青紫色のグラデーションが広い範囲に及ぶのは避けてください。
・大きくて丸いカードを重ねて置くのは避けてください。
影を過度に強調しない
マーケティング用語は避ける
レイアウトのリズム、余白、フォントの階層構造、ステータスカラーは明確に定めるべきです。
デスクトップ優先だが、モバイル優先も自然に受け入れられるはずだ。
- 法規要件
– プロジェクト内の既存ファイルを直接変更する
– 完全な実行可能なバージョンを出力する
コードを省略しないでください
- ロレム・イプサムは使用しないでください
デザインの提案をするだけでなく、実際にページを実装してください。
デスクトップとモバイルデバイスの両方で、テキストがはみ出したり重なったりしないようにしてください。
― 純粋な静的HTML/CSSで実装できます。複雑なフレームワークは必要ありません。
- 受入基準
– 見た目がこうであってはならない… AI デフォルトで生成されたSaaSテンプレート
製品のインターフェースプレビューは、それが「コンテンツ選択管理ツール」であることを明確に示す、信憑性のあるものでなければならない。
– CTAは明瞭だがノイズがない
能力とプロセスとは、単にカードを積み重ねることではなく、現実世界のコンテンツ運用シナリオに基づいてそれらを整理することである。
– モバイル端末での自然な読み順
―再建前と再建後の視覚的な違いは明らかであるべきです。
– 最終ページは、Taste Skillを使用して既存プロジェクトをリファクタリングするための実践的なケーススタディとして適しています。
まず、元のページの主な問題点を簡潔に指摘し、次にリファクタリング戦略を説明し、最後にプロジェクトファイルを修正して完全な実装例を示してください。
元のページの青紫ピンクグラデーションと濃い影は目立ちすぎ、最初の画面は中央に配置されすぎており、機能やプロセスはすべて平均的にカードで積み重ねられていた。
中央にある製品のスクリーンショットも装飾的すぎるし、内部のデータやインターフェース構造も偽物のように見え、最初の画面を埋めるために配置されたモックアップのようだ。
モバイル端末では、これらの問題はより顕著になります。ナビゲーション、タイトル、ボタン、スクリーンショット、機能カードなどが次々と積み重なり、読み進めるのに時間がかかり、視覚的なノイズも大きくなります。
再設計されたデスクトップインターフェースは次のようになります。
リニューアルされたモバイルアプリは以下のようになります。
リニューアルされたページレイアウトははるかに見栄えが良くなりました。元のページの色は目がくらむほどでした。
デスクトップの左側には製品のポジショニングとコアデータが表示され、右側にはトピック選択ワークベンチの信頼性の高いプレビューが表示されます。ユーザーは、これがトピックの選択、ステータス、および…を管理するために使用されることを容易に理解できます。AI 推奨事項、リスク、およびリリースパフォーマンスに関するツール。
モバイル端末における情報表示順序は、ブランドナビゲーション、製品ポジショニング、メインタイトル、CTA（行動喚起）、そしてコアデータへと変化しました。ユーザーは、数多くの画面遷移やマーケティング用語をたどる必要がなくなり、製品の内容をより迅速に理解できるようになりました。
AI Agentそれは開発プロセスの一部になりつつある。
Stack Overflowの2025年開発者調査によると、開発者の84%がStack Overflowを利用したことがあるか、利用を計画している。 AI プロの開発者の51%が日常的に使用しているツール。
同時に、AI コードツール市場は、2023年の43億ドルから2028年には126億ドルに成長すると予測されている。
しかしAI コードを書けるからといって、製品を開発できるとは限らない。特にフロントエンド開発においては、多くの側面で高度なスキルが求められるため、このことはなおさら当てはまる。 Agent 生成された結果はまだデモ段階です。
Taste Skillは、フロントエンドデザイナーの経験と美的感覚をスキルルールに落とし込み、… AI Agent 実際の製品配送基準により近いインターフェースを生成できる。
解決済み AI フロントエンド開発における最も一般的な問題点としては、ページテンプレート、カードスタッキングやグラデーションの過剰使用、モバイル対応の不備、製品プレビューの信頼性の欠如、バックエンドの情報階層の混乱、既存プロジェクトの再構築コストの高さなどが挙げられます。
させてAI 製品ウェブサイトのホームページ、SaaSランディングページ、バックエンド管理システム、コンテンツ運用ワークベンチ、Agent Taste Skillは、製品デモの作成、顧客向けプロジェクトのプロトタイプ作成、既存プロジェクトのUIリファクタリングなどに活用できます。
完全なデザインチームを持たない小規模チームにとって、アイデアからMVP（最小実行可能製品）まで、そしてデモから実演可能な製品までのコストを大幅に削減できる。
Taste Skillの価値は、フロントエンドの美的感覚と製品判断を再利用可能なツールへと変革することにある。 AI 生産力。