UIとSNSモックアップ

UIデザインシステムシート

スタイルの構想を、パレット・タイポグラフィ・ボタン・コントロール・カードにウェブとモバイルのモックアップまで揃えた、一貫したデザインシステムボード一枚に仕上げます。

更新日:

プロンプト全文

英語のプロンプトに入力例を添えています。生成前に被写体や詳細を調整してください。元の作例の入力内容と生成設定は完全には確認できていません。

推奨モデル: GPT Image 2

Create a single, well-organized design-system presentation sheet that showcases a complete UI kit in the visual style described in the user request. Lay it out as a clean board on a neutral canvas with clearly labeled sections: a color palette of named swatches, a typography scale, buttons in primary, secondary, and disabled states, form controls such as inputs, toggles, checkboxes, and sliders, cards with image and text content, navigation elements, and small tags and badges. Anchor the sheet with two hero mockups — a desktop web page and a mobile screen — assembled from the same components so the system feels applied rather than theoretical. Carry the requested style consistently through every element: its color logic, corner radii, shadows, texture, and type personality. Keep spacing on a tidy grid with generous margins, aligned columns, and subtle section headers, like a page from a professional brand guideline document. Render crisp, legible, vector-clean edges throughout, with short realistic labels instead of dense filler text. Do not add watermarks, real brand logos, or unreadable walls of tiny text. User request: a claymorphism design system in warm pastels for a kids learning app

一次制作のサンプル

UIデザインシステムシート
作例のモデル: Seedream 5.0 Lite
UIデザインシステムシート
作例のモデル: Seedream 5.0 Lite

出典とクレジット

OmniArt が構成を調整し、書き直しました。出典、変更内容、利用条件は以下をご確認ください。

  • Custom Style UI Design System

    ZeroLu/awesome-gpt-image

    README states CC BY 4.0 while the current LICENSE is MIT; attribution and the umbrella MIT notice are retained in THIRD_PARTY_NOTICES.md.

    Rewritten and consolidated into an OmniArt recipe archetype; template tokens removed; named people, brands, platforms, games, and film IP generalized; no raw prompt text or source image copied.

出典とクレジット

関連するプロンプトレシピ

洗練されたアプリ UI コンセプト
UIとSNSモックアップ

洗練されたアプリ UI コンセプト

アプリやウェブサイトのアイデアを、ポートフォリオ級の高精細 UI デザインショットに。ヒーローセクション、カード、ナビゲーションが統一されたダークまたはライトテーマでまとまった、プロダクトデザインのコンセプト画です。

プロンプト全文
車載ダッシュボードUI
UIとSNSモックアップ

車載ダッシュボードUI

機能リストやムードの説明を、ナビ地図・車両ステータス・空調ウィジェットを備えた量産品質の21:9ダークテーマ車載画面に変え、HMIポートフォリオや提案にそのまま使えます。

プロンプト全文
チャット画面のスマホ写真
UIとSNSモックアップ

チャット画面のスマホ写真

短い会話を、指紋や反射、少し傾いた手持ち構図まで再現した、メッセージアプリの画面が写るリアルなスマホ写真に変えます。

プロンプト全文
ECアプリのホーム画面
UIとSNSモックアップ

ECアプリのホーム画面

ストアや商品ジャンルの構想を、検索バーやタイムセール、バナー、商品一覧まで備えた精巧なモバイルECアプリのホーム画面に変え、ポートフォリオや提案資料、UIの参考に使えます。

プロンプト全文
EC ランディングページ
UIとSNSモックアップ

EC ランディングページ

D2C 商品を、ピクセル単位で整ったデスクトップ LP のヒーローモックアップに。ナビ付きヘッダー、モデルと商品写真の 3 カラムヒーロー、特長バッジ、実績の信頼バーを備えた王道のレスポンス広告型 LP スタイルです。

プロンプト全文
歴史人物のSNS風フィード
UIとSNSモックアップ

歴史人物のSNS風フィード

好きな時代や歴史上の人物を、時代様式の肖像アイコンや人物になりきったコメント、時代モチーフのUIを備えた、ウィットに富む現代SNS風フィードのスクリーンショットに変えられます。

プロンプト全文