UIプロンプト作成ツール
ライブタイポグラフィ、色、間隔、および半径制御で視覚的な方向を造ります。 正確なUIをコピーする プロンプト またはダウンロード CSS 変数。
詳細を調節します。 ライブを見る
インターフェイスプレビュー
プレスレビューお部屋を作る
何か新しい。
手作りのセラミックスワークショップ。 土・土・土・土・日・祝日
スタジオセッション
2時間・8ヶ所
イラストプレビュー。 ビルダーは最終的なインターフェイスを実装します。
あなたの設計方向
UI design direction
Typography
Use Inter. Body text: 16px with 1.5 line height. Use a clear heading hierarchy and readable line lengths.
Palette
Background: #faf8f5. Text: #292521. Accent: #c65324. Text on accent: #000000. Check contrast for all final text and interactive states.
Layout and surfaces
Use 24px as the main panel padding and section gap, with a 4px spacing base. Corner radius: 12px. Surface shadow: 0 2px 12px rgb(0 0 0 / 0.06). Keep borders subtle and reuse existing components.
Responsive behavior
Stack panels on narrow screens. Keep controls within the viewport and interactive targets at least 44px. Preserve content order and visible keyboard focus. Respect reduced motion.
Implementation
Apply this direction to the requested screen using the project's existing architecture. Include relevant loading, empty, error, and success states. Do not add unrelated features.
出力テキストは英語のままです。入力内容はそのまま保持されます。
サインアップはありません。 AIクレジットなし。 このツールは、お使いのブラウザで出力を組み立てます。
アイデアから何か役に立つものまで。
- 01
プリセットで始めて、詳細を調整します。
- 02
ライブインターフェイスのプレビューで選択肢を確認してください。
- 03
デザインをコピーするか、またはダウンロードしてください。 CSS 変数。
小さな文脈。
視覚的な好みを実用的な手渡に回して下さい Lovable, Bolt, v0、またはあなたのコーディングの代理店。 プレビューとプレビュー プロンプト 同じ設定を使うので、選択した間隔、タイプ、色は一貫してとどまります。 このツールは、選択から指示を組み立てます。AIでデザインを分析したり、生成したりすることはありません。
よくある質問
使える プロンプト 任意のアプリビルダーで?
はい。 出力は標準的なインターフェイス特性を記述し、のための設計方向として働きます Lovable, Bolt, v0, および コーディング アシスタント. あなたのビルダーは、まだそれらを実装する方法を決定します。
含まれるもの CSS ダウンロード
小さなセット CSS あなたのアクセント色、背景、テキスト、フォント、間隔、半径および影のための注文の特性。 プロジェクトで使用する前に、既存のデザイントークンにマップします。
プレビューチェックのアクセシビリティは?
ツールは、アクセントとボタンテキストのコントラストをレポートします。 これは、完全なアクセシビリティ監査ではなく、狭い色のチェックです。 キーボードと補助的な技術で最終的なインターフェイスをテストして下さい。