既存サイトを改修する AI ウェブデザインプロンプト
改修依頼には、見た目の変更と維持すべきことの両方を記します。現在の画面を記録し、具体的な問題を一つ選び、範囲を限定した計画で検証可能な改善を目指します。
Neruve 執筆 · 更新日
動くページを出発点に
動く HTML ページをプレビューし、ソースと付属プロンプトを使ってコーディングエージェントで手法を試せます。
Skills は引き続きログイン不要で無料閲覧・コピーできます。テンプレートのプレビューは公開されています。ソースと付属プロンプトのダウンロードにはアカウントと対象の購入権限またはプランが必要です。 ソースの利用条件と料金
AI に頼む前に現状を調べる
技術構成、URL、共通操作、文章、主要操作を記録します。実際のデスクトップとモバイルで、階層、読みやすさ、配置、動作の問題を特定します。装飾を増やすだけでなく原因に対応する依頼を作ります。
導線、フォーム、SEO を守る
リンク先、ログインと決済の動作、価格、計測イベントを明記します。対象外のタイトル、説明、canonical/hreflang、内部リンクは保ち、編集後に再確認します。配置を変えただけで検索や成約が伸びたとは言えません。
画像を根拠として使い、複製しない
自分の画像または許諾済みの参考を使い、対象領域と画面幅を示します。順序、余白、コントラスト、画像位置の変更を説明し、既存製品と部品に適応させます。他社の識別情報や宣伝文句は持ち込まないでください。
モバイルの問題を一回の限定修正で直す
全体の CSS を変える前に、はみ出す要素を特定します。意味のある内容を残し、320、390、768、1280 px でフォーカス、リンク、画像も確認します。以下は依頼の例で、利用者のサイトが合格済みという意味ではありません。
書き換えて使えるオリジナルの練習
Neruve が作成した英語の入力例です。実行結果や有料テンプレートのプロンプトではありません。架空の情報を実際の情報に置き換えてください。
ウェブサイト改修の要件
Audit this existing website before redesigning it.
Read its stack, routes, page copy, API calls, forms and shared components.
Protected: canonical URLs, navigation destinations, login/checkout behavior,
prices, analytics events and existing product facts.
Goal: make the offer and primary action easier to understand without new claims.
Record the current desktop and mobile layouts. Identify the three most useful
presentation changes, with section names and screenshot evidence.
Propose a small plan: hierarchy, typography, spacing and reusable component rules.
After approval, change one section first and show the result before expanding.
Retest the original links/forms, 1280/390/320 px layouts, keyboard focus and images.
Preserve headings, metadata, canonical/hreflang and internal links unless the
brief explicitly calls for an SEO change. Report actual checks, not assumed passes.モバイルレイアウトの修正
Repair horizontal overflow at 320 px in the existing hero.
Find the element causing overflow before changing styles.
Preserve desktop layout, copy, image meaning, primary action and all destinations.
Use wrapping, responsive sizing or a stacked layout appropriate to this section;
do not hide meaningful content or disable horizontal scrolling on the whole page.
Check the same hero at 320, 390, 768 and 1280 px, including keyboard focus.
Return the changed files, before/after evidence and unresolved failures.実際の演習：CodexでFieldnoteを生成
Fieldnote では独自の入力、未編集の Codex HTML、デスクトップとモバイルの確認記録を公開しています。frontend-design Skill は使用していません。ChatGPT や Claude Design の実測ではありません。
既存プロジェクト向け Claude サイト改修 Prompt
1つの Hero、既存のコンポーネントライブラリー、元の操作先から始めます。完全な依頼で製品の事実と挙動を守り、Claude Code に具体的な表示改善を依頼します。
完全な Claude 改修依頼を見る結果と残す証拠
変更ファイル、同じ幅のスクリーンショット、元の操作先、キーボード・モバイル・保持すべき契約の確認結果を残します。確認できない項目は未検証と記録します。
独自の Claude Code 提案入力であり、Claude の実測出力ではありません。タスクに合う Skill を選び、依存関係と製品の事実を確認してください。Taste は独立したコミュニティープロジェクトです。
よくある質問
一つの不具合でも全サイトを作り直すべきですか？
通常は原因を解消する最小の変更から始めます。大きな改修には計画のレビューと共通操作の回帰確認が必要です。以前の版を残し、同じ画面で比較してから採用してください。
デザインと付属プロンプトを見る
Neruve の公開カタログではサイトのデザイン、利用可能な対応プロンプト、Skills ディレクトリを提供しています。操作可能なプレビューにログインは不要です。対応するプロンプトにはアイテムとプランの利用条件が適用されます。このワークフローでは自分の開発ツールを使うため、公開された Neruve サイト生成機能は必要ありません。
公式資料
外部ツールやスキルは各作者に帰属します。参照リンクは提携や利用権の付与を意味しません。