作例の出典
@IndieDevHailey ↗ · 作例 #131
オリジナルの作例内容を保持しています。生成結果はモデルのバージョン、参照画像、パラメータによって左右されます。本サイトでは個別の完全な再現を保証するものではありません。
UI・インターフェース / PROMPT #131
UIインタラクション設計 · #131
画像を確認してからプロンプトをコピーしてください。プレースホルダーがある場合は、下部で内容を書き換えることができます。
01 / カスタマイズ
02 / プロンプト全文 · 原文
{
"type": "UI/UX landing page mockup",
"theme": "dark mode, sleek modern aesthetic, glassmorphism, {argument name=\"primary accent color\" default=\"neon purple and blue\"} glowing accents",
"header": {
"logo": "{argument name=\"brand name\" default=\"goViralX\"}",
"top_right_tag": "VIRAL CAMPAIGN CASE STUDY"
},
"layout": {
"sections": [
{
"name": "Hero",
"headline": "{argument name=\"hero headline\" default=\"How We Created 10M+ Viral Impact\"}",
"subheadline": "3天引爆全网, 助力品牌实现指数级增长",
"stats_row": {
"count": 4,
"labels": ["总播放量", "互动率", "转化咨询", "执行周期"],
"values": ["{argument name=\"main statistic\" default=\"10,240,000+\"}", "18.7%", "3,200+", "72小时"]
},
"visual": "cinematic shot of a person in a hoodie looking at glowing digital screens and graphs, large play button overlay"
},
{
"name": "Strategy",
"title": "Our 3-Day Execution Strategy",
"layout_type": "vertical timeline",
"steps_count": 3,
"elements_per_step": ["timeline node", "title", "bullet points", "video thumbnail with play button", "description box"]
},
{
"name": "Performance",
"title": "Data-Driven Performance",
"left_column": {
"stat_cards_count": 4,
"values": ["10M+", "43%", "28,000+", "3,200+"]
},
"right_column": {
"charts_count": 2,
"chart_1": "line graph showing 7-day growth peaking at Day 3",
"chart_2": "horizontal segmented bar chart showing platform distribution (TikTok 52%, Instagram 24%, X 15%, YouTube 9%)"
}
},
{
"name": "Keys to Success",
"title": "The 3 Keys to Viral Success",
"cards_count": 3,
"card_elements": ["glowing icon (fire, target, antenna)", "title", "description", "VIEW DETAIL link"]
},
{
"name": "Social Proof",
"title": "TRUSTED BY CREATORS & BRANDS",
"left_column": {
"logos_count": 8,
"grid": "2x4",
"brands": ["SHEIN", "SHOPLINE", "Blueglass", "instacart", "lemon8", "mi", "CIDER", "bellroy"]
},
"right_column": {
"testimonial_cards_count": 2,
"elements": ["quote", "author title (SaaS Founder, Growth Manager)"]
}
},
{
"name": "Call to Action",
"title": "READY TO GO VIRAL?",
"interactive_elements": ["text input field", "glowing button with text '{argument name=\"call to action text\" default=\"获取专属增长方案 ->\"}'"],
"visual": "3D render of a rocket ship taking off with purple and blue flames"
}
]
}
}お使いの画像生成ツールに貼り付けてご使用ください。本サイトはプロンプトの閲覧・編集ツールであり、画像の直接生成は行いません。
03 / 生成前のチェック
- プレースホルダーを具体的な内容に置き換え、参照画像が必要か確認します。
- 文字を含む場合はテキストを確定し、生成後に一文字ずつ確認します。
- 被写体、光、構図は一度に一箇所ずつ調整すると、効果を比較しやすくなります。
関連するインスピレーション
UI・インターフェースの他の作例
