Codex ネイティブ
成功
👍 0 · 投票する
taste-skill (design-taste-frontend)
taste-skill v2：Web サイトとアプリ画面のためのアートディレクションです。スクリプトが 247 サイトを研究した方向性のライブラリから 3 つの方向性を配り、エージェントは選んだ方向性でページを作り、同梱のインスペクターで実際のブラウザーで確認します。指示と Node スクリプトで構成され、Node 22 以上、Chrome、画像探しのためのネットワークが必要です。
- パス
skills/taste-skill· SKILL.md- 固定したコミット
12af471f62- ライセンス
- MIT
各プロンプトを、Codex ネイティブ、Codex + skill、Claude Code ネイティブ、Claude Code + skill の固定 2×2 で表示します。スクリーンショットをクリックするとページ全体を表示できます。インストールと使い方 ↓
得意なこと
skill 自身のドキュメントが主張している強みを、出典とともに挙げています。これは主張であって結果ではありません。下の実際のページと見比べてください。
- 厳選された 247 のギャラリーサイト（One Page Love、Awwwards Sites of the Day）の研究から抽出した、Web サイトのためのアートディレクション 出典
- コーディングエージェントに、平均的なランディングページを組み立てる代わりに、Web サイトとアプリ画面をデザインさせる 出典
- エージェントにアートディレクション、本物の画像、そして自分の作品を実際のブラウザーで確認する手段を与える 出典
- アイデアは題材から生まれ、エージェントは自分のスクリーンショットを見て修正する 出典
テスト範囲：SaaS のランディングページ、データダッシュボード、個人ブログとポートフォリオ。範囲外のプロンプトは「未実行」ではなく「対象外」と表示します。
第 2 弾の実行前に、skill の原文に基づいて決めました。
SaaS のランディングページ
landing-saas
データダッシュボード
dashboard
個人ブログとポートフォリオ
blog-portfolio
インストールと使い方
プロジェクト単位のインストール：固定したコミットの skill フォルダ（SKILL.md を含むフォルダ）をプロジェクトにコピーします。ギャラリーの実行でも同じ方法でインストールしました。
Claude Code
インストール
フォルダを <project>/.claude/skills/design-taste-frontend/ にコピーします。
git clone https://github.com/Leonxlnx/taste-skill.git /tmp/design-taste-frontend-src
git -C /tmp/design-taste-frontend-src checkout 12af471f627f866411b4bd785b19646d3672784c
mkdir -p .claude/skills
cp -R /tmp/design-taste-frontend-src/skills/taste-skill .claude/skills/design-taste-frontend使い方
# 対話モード
/design-taste-frontend <タスク>
# または、任意のリクエストの末尾に次の 1 文を付ける
Use the design-taste-frontend skill.
# ヘッドレス（ギャラリーの実行と同じ）
claude -p '<タスク> Use the design-taste-frontend skill.'すべてのプロジェクトで使えるようにするには、代わりにフォルダを ~/.claude/skills/design-taste-frontend/ に置いてください。Claude Code は、リクエストが skill の説明に一致すると、skill を自動的に読み込むこともあります。
Codex
インストール
フォルダを <project>/.agents/skills/design-taste-frontend/ にコピーします。
git clone https://github.com/Leonxlnx/taste-skill.git /tmp/design-taste-frontend-src
git -C /tmp/design-taste-frontend-src checkout 12af471f627f866411b4bd785b19646d3672784c
mkdir -p .agents/skills
cp -R /tmp/design-taste-frontend-src/skills/taste-skill .agents/skills/design-taste-frontend使い方
# 対話モード：メンションするか、/skills から選ぶ
$design-taste-frontend <タスク>
# ヘッドレス（ギャラリーの実行と同じ）
codex exec -s workspace-write '<タスク> Use the $design-taste-frontend skill.'すべてのプロジェクトで使えるようにするには、代わりにフォルダを ~/.agents/skills/design-taste-frontend/ に置いてください。Codex も、skill の説明に基づいて skill を自動的に選ぶことがあります。
補足
- The upstream folder name (taste-skill) differs from the skill name (design-taste-frontend); the gallery installs it under the skill name.
- Writes working files to .taste-skill/ and may save pictures and scripts next to index.html; the run scripts keep the files index.html references (output.kept_assets) and flag them as extra_files.
- Codex cells have no network, so the picture search step cannot run there.
- Its two signature strengths, real pictures and scroll scenes with a motion layer, are limited by the shared prompt rules (no remote images) and invisible in static screenshots; each cell also has a scroll recording.
- Upstream released v2.0.0 to v2.1.5 within 12 days; always use the pinned commit.
メタデータ：skills/design-taste-frontend/meta.yaml · Copyright (c) 2026 Leonxlnx