厳選・オープン・無料

StackBlitz

StackBlitzは、モダンなウェブチームに超高速で安全な開発環境をもたらす、ブラウザベースのクラウドIDEです。

01

デザイン DNA

ブラウザベース開発のための高性能エンジン。

02

カラー

スピードと集中力を強調し、鮮やかなブルーアクセントカラー1色でアクセントを加えた、ハイコントラストダークUI。

03

タイポグラフィ

humanist-sans · monospace

• display94px · 700
• heading40px · 700
• body16px · 400
• small13px · 500

大きなディスプレイタイポグラフィにはManropeを、本文/UIテキストにはInterを使用します。 · 見出しには Tight な文字間隔を維持し、密度が高くインパクトのある印象を実現します。 · 技術的またはコード関連のスニペットにはRoboto Monoを使用します。

04

余白

主要セクション間はゆったりとしたスペーシングを、UIコンポーネント内部は Tight なパディングを採用しています。

05

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

1px solid rgba(255, 255, 255, 0.12)

rgba(0, 0, 0, 0.32) 0px 4px 8px 0px · rgba(255, 255, 255, 0.1) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset

06

レイアウト

フルワイドダークヒーローセクション、中央揃えコンテンツカラム、並列比較グリッドを持つ、標準的なハイエンドマーケティングサイトレイアウト。

07

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

コンテンツ表示時の滑らかなフェード＆スライドトランジション。 · UI状態変化時の弾性（elastic）/フレックストランジション。

インタラクティブ要素上の微妙な色のシフトや透明度の変化。 · 状態変化による即座のフィードバック。

08

コンポーネント

• button 白いテキストを持つ、ソリッドブルーのプライマリボタン。ピル型または大きな角丸形状。微妙なhover状態。
• card データや機能比較によく使用される、微妙なボーダーを持つダークサーフェス。
• chip データテーブル内のステータスインジケーターや小さなタグとして使用。
• input 微妙なインセットシャドウと細いボーダーを持つ、ミニマルなダークインプット。
• hero 大胆な背景グラデーションと淡いワイヤーフレーム風UIイラストを持つ、大規模なタイポグラフィ中心のヒーロー。

09

文体と禁止事項

• トーン 自信に満ち、テクニカルで率直。
• 見出し 大胆で、便益を重視し、キーワード強調のために大規模なタイポグラフィを多用。
• CTA 'Try Bolt.new'のような、シンプルでアクション指向のラベル。

• ホワイト背景を使用しない — スクリーンショットはダーク、ネアブラックのプライマリ背景を示しています。
• セリフフォントを使用しない — スクリーンショットはクリーンでモダンなサンセリフタイポグラフィを示しています。
• 複数の競合するアクセントカラーを使用しない — スクリーンショットは単一の支配的なブルーアクセントを示しています。
• プライマリボタンに大きな角丸を使用しない — スクリーンショットは長方形またはわずかに丸みのあるボタンを示しています。
• フォーカス状態に薄い、明る色のアウトラインを使用しない — スクリーンショットはハイコントラストのホワイトまたはブルーのボーダーを使用しています。
• 過度に複雑なグラデーションを使用しない — スクリーンショットはダークからダークへの微妙なグラデーションまたはソリッドダークサーフェスを使用しています。
• 避ける: 曖昧なマーケティング用語
• 避ける: 明確な便益のない過度に複雑な技術的説明
• 避ける: 受動的な言葉遣い

10

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

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

11

System Prompt

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