UIインタラクション設計 · #57のサンプル画像

クリックで拡大表示 · 作例の参考イメージ

作例の出典

@liyue_ai ↗ · 作例 #57

オリジナルの作例内容を保持しています。生成結果はモデルのバージョン、参照画像、パラメータによって左右されます。本サイトでは個別の完全な再現を保証するものではありません。

UI・インターフェース / PROMPT #57

UIインタラクション設計 · #57

UIキャラクタークラシックテクノロジービジネスソーシャル

画像を確認してからプロンプトをコピーしてください。プレースホルダーがある場合は、下部で内容を書き換えることができます。

01 / カスタマイズ

02 / プロンプト全文 · 原文

{
  "type": "mobile social media app UI mockup",
  "platform": "Twitter/X dark mode",
  "header": {
    "status_bar": "time 19:28, bird icon, signal, wifi, battery",
    "navigation": "back arrow, 'Tweet' title"
  },
  "post": {
    "author": {
      "avatar": "portrait of a Chinese emperor in red robes and black hat",
      "display_name": "{argument name=\"display name\" default=\"Emperor Zhu Yuanzhang\"} 👑 [verified badge]",
      "handle": "{argument name=\"handle\" default=\"@Emperor_Ming\"}"
    },
    "content": {
      "text": "{argument name=\"tweet text\" default=\"I have ascended to the Dragon Throne! Today, I am proclaimed as the Emperor of the Ming Dynasty. The era of Hongwu has begun. Let us rebuild our great nation together!\"}",
      "hashtags": "#MingDynasty #HongwuEra #NewBeginning",
      "media_grid": {
        "count": 3,
        "images": [
          "emperor seated on an ornate golden throne in red and gold robes",
          "wide shot of a grand Chinese palace courtyard with a large crowd",
          "emperor on horseback leading an army with a red dragon banner"
        ]
      }
    },
    "metadata": {
      "timestamp": "{argument name=\"timestamp\" default=\"1:36 PM · Jan 23, 1368\"}",
      "engagement": "5,432 Retweets, 8,765 Quotes, 20.1K Likes, 102.3K Views"
    },
    "actions": "reply, retweet, like (red heart with '1'), share, upload"
  },
  "footer": {
    "reply_bar": {
      "avatar": "woman in red",
      "placeholder": "Reply to Emperor Zhu Yuanzhang..."
    },
    "navigation_bar": "home, search, notifications (red '1' badge), messages"
  }
}

お使いの画像生成ツールに貼り付けてご使用ください。本サイトはプロンプトの閲覧・編集ツールであり、画像の直接生成は行いません。

03 / 生成前のチェック

  • プレースホルダーを具体的な内容に置き換え、参照画像が必要か確認します。
  • 文字を含む場合はテキストを確定し、生成後に一文字ずつ確認します。
  • 被写体、光、構図は一度に一箇所ずつ調整すると、効果を比較しやすくなります。
プロンプト利用ガイドを見る →

関連するインスピレーション

UI・インターフェースの他の作例

すべて見る ↗