厳選・オープン・無料

Udio

どんな曲でも作れる。想像するだけ。

01

デザイン DNA

ダークでムーディーなクラブの中にある、AIを活用した音楽スタジオダッシュボード。

02

カラー

創造的なエネルギーのための単一のアグレッシブなホットピンクアクセントを持つ、高コントラストのダークモード。

03

タイポグラフィ

geometric-sans · humanist-sans

• display64px · 500
• h230px · 400
• body16px · 400
• caption12px · 400

見出しには現代的な技術感を伝えるジオメトリックサンズを使用。 · すべてのテキストで一貫した0.48pxの文字間距を維持。

04

余白

柔軟な4pxベースグリッドと手厚いセクションパディング。

05

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

微細な定義のための薄い半透明白またはダークボーダー。

rgba(227, 11, 94, 0.9) 0px 0px 204px 0px · rgba(0, 0, 0, 0.2) 1px 2px 8px 0px

06

レイアウト

中央揃えのヒーローセクション、その後にフィーチャーグリッドとダイナミックなオーディオウェーブ要素が続く構成。

07

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

カラーと背景のための微細なホバー遷移、プライマリボタンのglowingパルス効果。

インタラクティブ要素における微細な背景色の変化またはglowの強調。 · ボタンとカードのための滑らかな遷移状態。

08

コンポーネント

• button ホットピンクグラデーションとglowingシャドウを持つピル型、または細いボーダーを持つ透明な「ゴースト」ボタン。
• card ダーク背景に微細なボーダー、角丸と内部シャドウを伴うことが多い。
• chip ステータスやタグのための小さなピル型バッジ。
• input 微細なボーダーを持つダーク背景フィールド。
• hero ダーク背景の上に大きな中央揃えの見出し。ダイナミックでglowingするオーディオウェーブフォームグラフィックを伴う。

09

文体と禁止事項

• トーン 魅力的で、創造的、そして努力なしに強力なトーン。
• 見出し 大きく、太字で、直接的。ユーザーの創造的な可能性に焦点を当てる。
• CTA 奨励的で行動を促すスタイル。しばしば「Start」や「Imagine」を使用。

• 明るい背景を使用しない — スクリーンショットは深い黒（#000000）のテーマを示しています。
• プライマリアクセントに青や緑を使用しない — スクリーンショットは支配的なホットピンク（#E30B5D）を示しています。
• 見出しにセリフフォントを使用しない — スクリーンショットはクリーンなジオメトリックサンセリフタイポグラフィを示しています。
• プライマリボタンにフラットで鋭い角を使用しない — スクリーンショットは丸みのあるピル型ボタン（border-radius: 9999px）を示しています。
• セカンダリテキストにハイコントラストの白を使用しない — スクリーンショットは落ち着いたグレー（#808080）を示しています。
• 密集した散らかったレイアウトを使用しない — スクリーンショットは手広なホワイトスペースと集中した中央構図を示しています。
• 避ける: 技術用語
• 避ける: 受動態
• 避ける: 過度にコーポレートな言葉遣い

10

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

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

11

System Prompt

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