Frontend Design Skills：Claude Code・Codex の設定

導入前に Skill を選ぶ

Anthropic の frontend-design は視覚デザインの指針です。Taste は別のコミュニティープロジェクトで、Framer 変換やモーションの Skill も用途が異なります。README はインストール用 SKILL.md ではありません。出典、ライセンス、依存関係を確認してください。以下は Anthropic の Skill を例にした手順です。

Claude Code に導入する

プロジェクト内に配置すると、対象をそのリポジトリに限定できます。フォルダー構成、ライセンス、補助ファイルを保持してください。Agent へのコピーはインストール依頼のコピーであり、このサイトが端末へ直接導入するわけではありません。

.claude/skills/frontend-design/SKILL.md

Codex に導入する

Codex のプロジェクト用ディレクトリは異なります。互換性のある指示は再利用できますが、専用コマンドや依存関係は事前に確認してください。Skill は作業指針で、バックエンドや他のツールのアカウントを提供しません。

.agents/skills/frontend-design/SKILL.md

一つの依頼を実行し、実際のページを確認する

ページ、対象者、主な操作、変更しない事実を明示します。以下の依頼文や実例を使い、1280、390、320 px で表示、主要リンク、キーボード操作を確認してください。ソースと画像を保存し、失敗も記録します。

Frontend Design Skill が表示・起動されない場合

まず導入方法を確認します。プロジェクトの Skill フォルダーと Claude Code プラグインでは、場所とコマンド名が異なります。

プロジェクトの Skill フォルダー

Claude Code の手動導入例では SKILL.md と関連ファイルを .claude/skills/frontend-design/ に置きます。Codex は上の .agents/skills/ の例を使います。README は導入用ファイルではありません。

プラグインが提供する Skill

Claude Code の /plugin で導入済み・有効か、対象プロジェクトまたはユーザーに適用されているか確認します。メニューに表示されたコマンドを使います。名前空間が付く場合もあるため、プラグイン自身の説明に従ってください。

確認する順序

1. 現在のプロジェクト、選んだ Skill の出典と導入範囲を確認します。必要な関連ファイルを保持し、同名フォルダーは置き換える前に比較します。
2. SKILL.md の名前と、先頭行から始まる YAML を確認します。Claude Code では name、description、呼び出し制御を確認します。YAML が不正だと、手動呼び出しが動いても自動判定に影響する場合があります。
3. Skill が一覧にあるか確認します。Claude Code に利用可能な Skills を尋ね、/ メニューを確認します。表示されても使われない場合は、説明に合うタスクで手動呼び出しし、disable-model-invocation と user-invocable を確認します。
4. Agent が目的の Skill を実際に読み、タスクを実行したか確認します。ファイルの場所やツール記録を結果と残し、ブラウザーでも確認します。フォルダー名や見栄えだけでは使用を証明できません。

下の Codex 例は固定版ファイルを手動で読ませたものです。自動検出や Claude Code プラグインの導入は検証していません。使用バージョンの公式文書をご確認ください。

用途に合う関連 Skill

6件ともログイン不要で閲覧・コピーできます。各詳細の準備事項を確認してください。Framer 連携、動画ツール、補助モジュールは汎用のデザイン Skill と同じではありません。

• Taste Skill — 概要とインストール

  プロジェクトとワークフローの概要です。この README 自体はインストール用ファイルではありません。

• Taste Skill — フロントエンド設計（v2 実験版）

  ランディングページや作品集向けのコミュニティー製デザイン手順。保存版の v2 は実験段階です。

• Framer Skills — Convert Prompt：プロンプト変換

  React／Tailwind の依頼を Framer 用プロンプトに変換します。Framer 連携の条件を確認してください。

• Framer Skills — Sync Styles：スタイル同期

  指定した色、文字スタイル、アイコンを Framer に同期します。対応する連携が必要です。

• Claude Motion — コミュニティのモーション設計 Skill

  Claude Code／Remotion を使うコミュニティー製動画ワークフロー。Anthropic の組み込み機能ではありません。

• Genjutsu Skill — Cast ワークフロー

  Cast によるモーションと小さな操作反応の制作。必要な _jutsu モジュールを保持してください。

書き換えて使えるオリジナルの練習

Neruve が作成した英語の入力例です。実行結果や有料テンプレートのプロンプトではありません。架空の情報を実際の情報に置き換えてください。

Work in this project's current stack. Read the existing routes, shared components,
styles and the selected frontend-design skill before proposing changes.
Use only the project files and assets I have permission to use.

Task: improve a fictional research-notes landing page for small product teams.
Page goal: explain collect → compare → decide; the primary link targets #workflow.
Design direction: warm paper, ink text, a clear research-note specimen and generous spacing.
Keep the existing API contracts, authentication, prices and route paths unchanged.
Use the skill for the design procedure; use my brief for product facts.

First propose the section order and the shared typography/spacing decisions.
Then implement one coherent pass. Check 1280, 390 and 320 px widths, keyboard focus,
the workflow anchor and reduced motion. Report the checks actually run and defects
still open. Do not invent testimonials, customer logos, metrics or a signup backend.

Review this existing page using the selected design skill.
Before editing, list the three highest-impact defects with a selector or section
name, viewport width and screenshot evidence. Separate styling defects from
broken behavior. Choose one defect, explain the smallest change that addresses it,
and preserve the current copy, prices, forms and navigation contracts.
After the repair, repeat the same browser check and report any regression.
Do not replace the whole page or add another component library for this repair.

実例：frontend-design を使った Fieldnote

架空の研究ノートページです。ノートの見本、収集・比較・判断の流れ、動作するページ内リンクを実装しました。実例、元の依頼文、HTML を公開しています。実例は英語です。

2026年10月13日、固定版の Anthropic Skill を手動で読み込んだ Codex で実装し、ブラウザーで確認しました。使用した原典： Anthropic frontend-design · dbd4588

再現するには上記の手順で Skill を配置し、ダウンロードした依頼文を渡します。1280、390、320 px の出力、フローへのリンク、キーボードフォーカスを確認し、差異を記録してください。

手動で指針を与えた一例です。Skill の自動検出、Claude Code、Taste、Neruve の生成サービスは検証していません。モデル比較、登録処理、コンバージョン向上の証拠もありません。

よくある質問

デザインと付属プロンプトを見る

Neruve の公開カタログではサイトのデザイン、利用可能な対応プロンプト、Skills ディレクトリを提供しています。操作可能なプレビューにログインは不要です。対応するプロンプトにはアイテムとプランの利用条件が適用されます。このワークフローでは自分の開発ツールを使うため、公開された Neruve サイト生成機能は必要ありません。

• ライブラリを見る
• SaaS向けHTMLランディングページとプロンプト
• ポートフォリオのサイトテンプレートとデザインプロンプト

公式資料

• Anthropic frontend-design
• Claude Code · SKILL.md
• Claude Code · Plugins
• Codex · SKILL.md

外部ツールやスキルは各作者に帰属します。参照リンクは提携や利用権の付与を意味しません。