作例の出典
@coder_left ↗ · 作例 #152
オリジナルの作例内容を保持しています。生成結果はモデルのバージョン、参照画像、パラメータによって左右されます。本サイトでは個別の完全な再現を保証するものではありません。
UI・インターフェース / PROMPT #152
ライブ配信UIデザイン · #152
画像を確認してからプロンプトをコピーしてください。プレースホルダーがある場合は、下部で内容を書き換えることができます。
01 / カスタマイズ
02 / プロンプト全文 · 原文
{
"type": "e-commerce livestream screenshot mockup",
"scene": {
"subject": "{argument name=\"main subject\" default=\"Caucasian male resembling Sam Altman\"}",
"clothing": "dark green crewneck sweater",
"action": "holding a black product box in one hand and pointing at it with the other",
"setting": "dark studio with a microphone on the left, faint 'AI' text in the background",
"props": [
"black mug with white OpenAI logo",
"stack of 4 black product boxes on the right"
]
},
"product_design": {
"box_color": "black",
"logo": "orange asterisk or sunburst",
"text": "{argument name=\"product name\" default=\"Claude Opus 4.7\"}"
},
"ui_overlays": {
"top_left_product_info": {
"brand_tag": "Anthropic 官方旗舰店",
"title": "{argument name=\"product name\" default=\"Claude Opus 4.7\"}",
"subtitle": "{argument name=\"main headline\" default=\"更强推理·更高智能\"}",
"sub_subtitle": "最强大模型: Opus 4.7 重磅发布!",
"bullet_points_count": 3,
"bullet_points": ["超强推理能力", "代码能力巅峰", "复杂任务轻松搞定"]
},
"top_right_live_status": {
"viewer_info": "直播中 | 52.8万人观看",
"promo_banner": "直播专属福利 限时折扣·错过不再有",
"countdown": "倒计时 00:09:47"
},
"middle_right_price_card": {
"header": "{argument name=\"product name\" default=\"Claude Opus 4.7\"} 直播间专享价",
"price_currency": "¥",
"price_value": "{argument name=\"promotional price\" default=\"0.47\"}",
"price_unit": "/百万tokens起",
"original_price": "原价: ¥1.89",
"button": "立即抢购"
},
"bottom_left_chat": {
"message_count": 9,
"input_box_placeholder": "说点什么..."
},
"bottom_right_banner": {
"headline": "奥特曼首推!认准Claude Opus 4.7",
"subheadline": "更智能 · 更安全 · 更可靠",
"feature_tags_count": 4,
"feature_tags": ["强大推理", "代码神器", "安全可靠", "极速响应"]
},
"floating_elements": [
{
"type": "sticker",
"position": "middle right over product boxes",
"text": "{argument name=\"sticker text\" default=\"史上最强 AI模型!\"}"
}
]
}
}お使いの画像生成ツールに貼り付けてご使用ください。本サイトはプロンプトの閲覧・編集ツールであり、画像の直接生成は行いません。
03 / 生成前のチェック
- プレースホルダーを具体的な内容に置き換え、参照画像が必要か確認します。
- 文字を含む場合はテキストを確定し、生成後に一文字ずつ確認します。
- 被写体、光、構図は一度に一箇所ずつ調整すると、効果を比較しやすくなります。
関連するインスピレーション
UI・インターフェースの他の作例
