Codex ネイティブ
成功
👍 0 · 投票する
frontend-design
Anthropic 公式のフロントエンドデザイン skill です。コードを書く前に、エージェントにデザインの方向性（配色、タイポグラフィ、レイアウト、原則）を決めさせ、それを AI にありがちなデフォルトと照らし合わせて確認させます。指示のみで、スクリプトは含みません。
- パス
skills/frontend-design· SKILL.md- 固定したコミット
dbd4588f9e- ライセンス
- Apache-2.0
各プロンプトを、Codex ネイティブ、Codex + skill、Claude Code ネイティブ、Claude Code + skill の固定 2×2 で表示します。スクリーンショットをクリックするとページ全体を表示できます。インストールと使い方 ↓
得意なこと
skill 自身のドキュメントが主張している強みを、出典とともに挙げています。これは主張であって結果ではありません。下の実際のページと見比べてください。
- テンプレートの既定値に見えない、個性があり意図のあるビジュアルデザイン 出典
- ブリーフに合わせた、配色・タイポグラフィ・レイアウトについての意図的で主張のある選択。クライアントごとに独自のビジュアルアイデンティティを与える 出典
- タイポグラフィがページの個性を担う 出典
テスト範囲：SaaS のランディングページ、データダッシュボード、個人ブログとポートフォリオ。範囲外のプロンプトは「未実行」ではなく「対象外」と表示します。
v0 の実行後に skill の原文と照合したものです（事前に決めたものではありません）。原文は除外するページの種類を挙げていません。
SaaS のランディングページ
landing-saas
データダッシュボード
dashboard
個人ブログとポートフォリオ
blog-portfolio
インストールと使い方
プロジェクト単位のインストール：固定したコミットの skill フォルダ（SKILL.md を含むフォルダ）をプロジェクトにコピーします。ギャラリーの実行でも同じ方法でインストールしました。
Claude Code
インストール
フォルダを <project>/.claude/skills/frontend-design/ にコピーします。
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .claude/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .claude/skills/frontend-design使い方
# 対話モード
/frontend-design <タスク>
# または、任意のリクエストの末尾に次の 1 文を付ける
Use the frontend-design skill.
# ヘッドレス（ギャラリーの実行と同じ）
claude -p '<タスク> Use the frontend-design skill.'すべてのプロジェクトで使えるようにするには、代わりにフォルダを ~/.claude/skills/frontend-design/ に置いてください。Claude Code は、リクエストが skill の説明に一致すると、skill を自動的に読み込むこともあります。
Codex
インストール
フォルダを <project>/.agents/skills/frontend-design/ にコピーします。
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .agents/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .agents/skills/frontend-design使い方
# 対話モード：メンションするか、/skills から選ぶ
$frontend-design <タスク>
# ヘッドレス（ギャラリーの実行と同じ）
codex exec -s workspace-write '<タスク> Use the $frontend-design skill.'すべてのプロジェクトで使えるようにするには、代わりにフォルダを ~/.agents/skills/frontend-design/ に置いてください。Codex も、skill の説明に基づいて skill を自動的に選ぶことがあります。
補足
- 同じ SKILL.md は anthropics/claude-plugins-official と anthropics/claude-code でも公開されていますが、このギャラリーでは anthropics/skills のものを使用しています。
- 上流ではこの skill が 2026 年に何度か書き直されているため、必ず固定したコミットを使用してください。
メタデータ：skills/frontend-design/meta.yaml