Claude Design の Web プロンプトと実装への引き継ぎ
Claude Design で Web サイトやプロトタイプを説明し、表示を改善してから、実際の資料と未決定事項を引き継ぎます。整ったレイアウトにも操作確認、プロジェクトへの統合、ブラウザー検証が必要です。
2026 年 10 月 9 日確認。機能はアカウントやバージョンにより異なるため、リンク先の公式資料をご確認ください。
動くページを出発点に
動く HTML ページをプレビューし、ソースと付属プロンプトを使ってコーディングエージェントで手法を試せます。
Skills は引き続きログイン不要で無料閲覧・コピーできます。テンプレートのプレビューは公開されています。ソースと付属プロンプトのダウンロードにはアカウントと対象の購入権限またはプランが必要です。 ソースの利用条件と料金
デザインの成果物を決める
Web レイアウト、プロトタイプ、既存デザインの改善のどれかと対象端末を指定します。Anthropic の資料で現在の Claude Design の流れと利用可能な機能を確認しましょう。デザイン上のボタンは動作するルートやサービスを意味しません。
内容とデザインシステムを渡す
対象者、目的、セクション、行動の移動先、正確な文章を提供します。利用できるデザインシステムと素材も渡します。デスクトップとモバイル、読みやすい階層、明示された仮素材を求め、顧客ロゴや実績を捏造させません。
セクションごとに改善する
セクション、画面幅、問題を指定し、守るべき文章やシステムの規則を示します。プロトタイプで実際に試せる操作と、説明にとどまる動作は区別して記録します。新しい結果を確認してから次の変更へ進みます。
実装用の引き継ぎを用意する
利用できるデザインファイル、素材、要件、未解決状態を渡します。実装前に既存プロジェクトを調べ、不足する依存関係を報告させます。業務上の事実とバックエンドの契約を守り、ルート、行動、キーボード、モバイル表示を検証します。
書き換えて使えるオリジナルの練習
Neruve が作成した英語の入力例です。実行結果や有料テンプレートのプロンプトではありません。架空の情報を実際の情報に置き換えてください。
Claude Design：Web とプロトタイプの要件
Create a website design for Fieldnote, a fictional research-notes app.
Audience: small product teams. Goal: explain collect → compare → decide.
Use a warm-paper and ink direction; show one clearly fictional note specimen.
Include an introduction, specimen, three-step workflow and closing action.
The action is “Explore the workflow”; the intended destination is #workflow.
Show desktop and 390 px layouts. Keep note details readable on mobile.
Distinguish a designed control from an implemented interaction.
Do not invent signup, prices, testimonials, customer logos or product metrics.
If using a supplied design system, preserve its typography and component rules.
List open interaction and content decisions before handing the design to code.Claude Design：実装への引き継ぎ
Implement the approved Fieldnote design in the current project.
First inspect its framework, routes, components and assets.
Use the actual available design files plus this brief, not only a screenshot.
Keep the supplied copy, semantic hierarchy and #workflow destination.
Preserve backend contracts and authentication; add no signup or payment service.
Record which design elements are implemented and which remain visual placeholders.
Check desktop, 390 and 320 px layouts, the workflow link and keyboard navigation.
Return changed files and actual check results. If design import or assets are
unavailable, name that dependency rather than claiming a completed handoff.実際の演習：CodexでFieldnoteを生成
Fieldnote では独自の入力、未編集の Codex HTML、デスクトップとモバイルの確認記録を公開しています。frontend-design Skill は使用していません。ChatGPT や Claude Design の実測ではありません。
実際の演習：CodexでFieldnoteを生成よくある質問
Neruve は Claude Design でこれらを実測しましたか？
いいえ。独自の推奨入力例であり、Claude Design の出力記録や Neruve の連携機能ではありません。Fieldnote は frontend-design Skill を渡さずに得た実際の Codex 出力で、Claude Design の成果を示すものではありません。
デザインと付属プロンプトを見る
Neruve の公開カタログではサイトのデザイン、利用可能な対応プロンプト、Skills ディレクトリを提供しています。操作可能なプレビューにログインは不要です。対応するプロンプトにはアイテムとプランの利用条件が適用されます。このワークフローでは自分の開発ツールを使うため、公開された Neruve サイト生成機能は必要ありません。
公式資料
外部ツールやスキルは各作者に帰属します。参照リンクは提携や利用権の付与を意味しません。