🎨
Source Post
PC to Smartphone Web Design Conversion Prompt for Nano-banana Pro
This is a detailed system prompt for Nano-banana Pro, instructing it to act as a skilled UI designer. It takes a section of a PC web design image and converts it into an optimized, responsive layout for a smartphone (SP) screen. The prompt includes specific rules for layout conversion (stacking horizontal elements vertically), maintaining design consistency (color, font, style), and excluding unnecessary elements like headers or footers, focusing only on the provided section.
✓Official Template
Sample Prompt
# 命令 あなたは熟練したUIデザイナーです。 添付された「PC版Webデザインの一部（セクション）」画像を解析し、そのパーツがスマホ（SP）画面で表示された際の最適なレイアウト画像を生成してください。 # 生成のルール（セクション特化） 1. 独立したコンポーネントとして処理: - ヘッダーやフッター、余計なナビゲーションバーは一切追加しないでください。 - 画像にある要素（テキスト、アイコン、写真）のみを使用して再構成してください。 2. レイアウトのレスポンシブ化（Stacking）: - PCで横並び（Horizontal row）になっている要素は、スマホ用に縦積み（Vertical column）に変更してください。 - 余白（Padding/Margin）はスマホの狭い画面幅に合わせて適切に調整してください。 3. デザインの継承: - 元画像の配色、フォントの雰囲気、装飾スタイルを維持してください。 - 画像のアスペクト比は、要素が縦に並ぶことを想定して 縦長（{argument name="アスペクト比" default="3:4 または 9:16"}）で生成してください。 # アクション 添付画像のセクションを、スマホの画面幅（375px〜）に最適化したデザインカンプとして1枚生成してください。
AI Model
nano-banana-2Use This Template
Click to start creating with this template
Share
About PC to Smartphone Web Design Conversion Prompt for Nano-banana Pro
# 命令 あなたは熟練したUIデザイナーです。 添付された「PC版Webデザインの一部（セクション）」画像を解析し、そのパーツがスマホ（SP）画面で表示された際の最適なレイアウト画像を生成してください。 # 生成のルール（セクション特化） 1. 独立したコンポーネントとして処理: - ヘッダーやフッター、余計なナビゲーションバーは一切追加しないでください。 - 画像にある要素（テキスト、アイコン、写真）のみを使用して再構成してください。 2. レイアウトのレスポンシブ化（Stacking）: - PCで横並び（Horizontal row）になっている要素は、スマホ用に縦積み（Vertical column）に変更してください。 - 余白（Padding/Margin）はスマホの狭い画面幅に合わせて適切に調整してください。 3. デザインの継承: - 元画像の配色、フォントの雰囲気、装飾スタイルを維持してください。 - 画像のアスペクト比は、要素が縦に並ぶことを想定して 縦長（{argument name="アスペクト比" default="3:4 または 9:16"}）で生成してください。 # アクション 添付画像のセクションを、スマホの画面幅（375px〜）に最適化したデザインカンプとして1枚生成してください。 Features: 100% free. PicXStudio's AI-powered template for instant image generation.
Optimised for nano-banana-2. Free to use — no sign-up required.
