厳選・オープン・無料

Uizard

GenAIで、プロダクトのアイデアを瞬時にコンセプトへ変換。

01

デザイン DNA

テキストプロンプトをワイヤーフレームに変換する、UIデザインの自動操縦。

02

カラー

鮮やかな紫色のAIアクセントカラーを配した高コントラストダークモードで、クリエイティビティと最新の技術を示します。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display56px · 500
• h140px · 480
• body-lg18px · 400
• body16px · 400
• caption14px · 400

見出しには tight な行間（1.1-1.15）を維持します。 · モダンで緊迫感のある印象のため、ネガティブな字送り（-1px〜-0.2px）を使用します。 · すべてのディスプレイタイポグラフィには、クリーンで幾何学的な形状を優先します。

04

余白

一貫した4pxグリッドシステムにより、すべてのUIコンポーネント間で調和のとれた間隔を保証します。

05

サーフェス (角丸 / 影 / 罫線)

1px solid rgb(245,245,245) または 1px solid rgb(33,33,33) を、コンテキストに応じて使用します。

0px 12px 30px -4px rgba(3,3,3,0.12) · 0px 2px 12px 0px rgba(168,129,254,0.64) · 0px -20px 200px 0px rgba(68,20,187,0.75)

06

レイアウト

ページ中央に構造化されたグリッドレイアウトを配置し、ヒーロー、機能、ソーシャルプルーフの明確なセクションを持ちます。

07

モーションとインタラクション

background-colorとopacityの滑らかな遷移。 · インタラクティブ要素の微細なホバーエフェクト。 · AI中心の雰囲気を高める、ダイナミックなグローとグラデーション。

プライマリアクションに対する微細な色の変化や、わずかなスケール／グロー効果。 · 色の変化や内側のシャドウによる、即座のビジュアルフィードバック。

08

コンポーネント

• button ピル型のボーダーと微細な紫色のグローを持つ、高コントラストなプライマリボタンです。
• card 柔らかなボーダー（1px solid #212121）と深い背景色を持つ、角丸カードです。
• chip インターフェース内のステータスやタグに使用される、小さく角丸のラベルです。
• input ダークな背景と微細なボーダーを持つクリーンな入力フィールドで、アクションボタンとセットで使用されることが多いです。
• hero 大きなヘッドライン、サブテキスト、および目立つプロンプト入力を備えた、支配的で中央揃えのヒーローセクションです。

09

文体と禁止事項

• トーン 革新的で、力強く、率直。
• 見出し スピードとAI能力に焦点を当てた、大胆で便益を強調するステートメント。
• CTA 「生成する」「サインアップ」「探る」などの、行動を促す動詞。

• 白または明るい背景を使用しないこと。スクリーンショットでは、深いダークテーマ（#0D0D0D）が基盤として示されています。
• 温かみのある、土の色調、パステルカラーを使用しないこと。パレットは、黒、白、高彩度の紫色が支配的です。
• セリフフォントを使用しないこと。スクリーンショットでは、クリーンで幾何学的なサンセリフ（humanist-sans、 grotesque-sansなど）の書体のみが使用されています。
• 4px未満の角丸を使用しないこと。小さな要素でも少なくとも4pxを使用し、多くのカードでは12pxや16pxが使用されています。
• マーケティング素材に一般的なプレースホルダーテキストを使用しないこと。スクリーンショットでは、明確で指示的なプロンプト例が使用されています。
• 低コントラストのテキストを使用しないこと。スクリーンショットでは、最大限の可読性のために、ダーク背景に高コントラストの白（#F5F5F5）が使用されています。
• 避ける: 説明のない過度に技術的な専門用語。
• 避ける: 受動的またはためらいがちな言葉遣い。
• 避ける: 過度な感嘆符や誇張表現。

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko