Stitch のウェブデザインプロンプト：SaaS とポートフォリオ
Stitch は Google の AI デザインツールです。具体的なサイト構想を決め、見た目と実際の動作を分けましょう。以下は架空ページの提案入力で、Neruve の連携結果や Stitch の実行例ではありません。
2026年10月8日に確認。利用するツールのバージョンに対応した公式ドキュメントをご確認ください。
動くページを出発点に
動く HTML ページをプレビューし、ソースと付属プロンプトを使ってコーディングエージェントで手法を試せます。
Skills は引き続きログイン不要で無料閲覧・コピーできます。テンプレートのプレビューは公開されています。ソースと付属プロンプトのダウンロードにはアカウントと対象の購入権限またはプランが必要です。 ソースの利用条件と料金
Stitch に具体的なサイト制作を依頼する
装飾の前に、対象者、目的、領域の順序、主要操作を決めます。実際の文章と利用許諾のある素材を渡し、仮素材は明示します。ランディングページ、作品集、補助画面のどれを作るかを絞ってください。
SaaS の内容を伝えるプロンプト
課題、具体的な製品例、使い方を示し、確認済みの機能と商業上の事実だけを使います。Fieldnote は架空の研究メモと手順リンクを使い、偽の評価、顧客数、動く登録フォームは加えません。
プロジェクトの根拠を示すポートフォリオ
各案件に役割、制約、説明用の成果を示します。モバイルでは文章と対応する画像を近づけ、素材不足は明示します。Mira は架空のウェブサイト作品集で、履歴書、Notion テンプレート、実在の推薦ではありません。
モバイルを調整し実装を確認する
変更領域を一つ指定し、他の方向性は維持します。狭い画面の読み順、折り返し、操作名を確認します。サイトへ実装した後にリンク、フォーム、画面幅、内容を検証してください。構想だけでは本番の動作を証明できません。
書き換えて使えるオリジナルの練習
Neruve が作成した英語の入力例です。実行結果や有料テンプレートのプロンプトではありません。架空の情報を実際の情報に置き換えてください。
SaaS ウェブサイトの構想
Design a website concept for Fieldnote, a fictional research-notes workspace.
Audience: small product teams. The page explains collect → compare → decide.
Create a warm-paper and ink direction with one realistic, clearly fictional note.
Sections: compact introduction, note specimen, three-step workflow and a final
link to the workflow. The primary action reads “Explore the workflow”.
Keep typography and button treatments consistent across the screens.
Create desktop and narrow-screen variants with readable copy and no horizontal
overflow. Do not add signup forms, prices, logos, testimonials or user counts.
This is a visual concept. Identify which interactions need implementation later.ポートフォリオサイトの構想
Create a website concept for Mira Chen, a fictional product designer.
Show three explicitly fictional projects. Each explains role, constraint and
illustrative outcome without fabricated business metrics or employer logos.
Use a restrained warm-neutral direction, clear project hierarchy and readable
image captions. The primary action is “View selected work”.
Show desktop and narrow-screen layouts; on mobile, keep project details near
their corresponding image. Use placeholder media labelled as placeholder.
Do not invent real contact details, awards or working application forms.モバイル部分の調整
Refine only the mobile project section in this concept.
Keep the selected palette, typography, project order and desktop direction.
At 390 px, stack each project image, title and supporting text in reading order.
Keep controls easy to distinguish from captions. Do not shorten the project facts
or add new sections. Show the changed section and list what still needs to be
implemented and checked in the exported website.実際の演習：CodexでFieldnoteを生成
Fieldnote では独自の入力、未編集の Codex HTML、デスクトップとモバイルの確認記録を公開しています。frontend-design Skill は使用していません。ChatGPT や Claude Design の実測ではありません。
実際の演習：CodexでFieldnoteを生成よくある質問
Neruve のプロンプトは自動で Stitch に接続されますか？
自動連携は説明していません。独自の入力例は自分のツール向けに書き換えて使えます。有料の付属プロンプトには各素材とプランのアクセス条件が適用され、互換性と完成サイトの確認が必要です。
デザインと付属プロンプトを見る
Neruve の公開カタログではサイトのデザイン、利用可能な対応プロンプト、Skills ディレクトリを提供しています。操作可能なプレビューにログインは不要です。対応するプロンプトにはアイテムとプランの利用条件が適用されます。このワークフローでは自分の開発ツールを使うため、公開された Neruve サイト生成機能は必要ありません。
公式資料
外部ツールやスキルは各作者に帰属します。参照リンクは提携や利用権の付与を意味しません。