厳選・オープン・無料

Groq

高速、信頼性、低コストのAI推論インフラストラクチャ。

01

デザイン DNA

AI向けのハイパフォーマンスエンジンルーム。工業的な精密さと、親しみやすい開発者向けツールを組み合わせています。

02

カラー

温かみのある落ち着いたニュートラルが、高コントラストのオレンジアクセントと、暗く読みやすいタイポグラフィの落ち着いたキャンバスを提供します。

03

タイポグラフィ

geometric-sans · monospace

• display46px · 500
• body15px · 400
• caption12px · 400

見出しにはウェイト500を使用し、控えめな強調を実現します。 · 大文字テキストには、技術ラベル用に12px、1.2pxのトラッキングを使用します。 · 本文には最適な読みやすさのために15pxを使用します。

04

余白

標準の4pxベースに加え、32〜48pxの余裕のある水平パディングと垂直ギャップを設定しています。

05

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

カードや入力フィールドの控えめなアウトラインに、1px solid rgb(45, 47, 51)を使用しています。

06

レイアウト

標準のセンタリングコンテナを採用。フルワイドのヒーローブロックと、サイドバイサイドの機能カードを配置します。

07

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

インタラクティブ要素のカラーおよびトランスフォームトランジション。 · hover状態の背景サイズアニメーション。 · モーダルやオーバーレイトランジションの可視性および不透明度変化。

150msのease-in-outで、控えめな背景サイズまたはカラーのトランジションを適用。 · トランスフォームやカラー変化による、即座の視覚フィードバックを提供。

08

コンポーネント

• button 高コントラストのオレンジ（#F43E01）に白テキストを組み合わせた、ピル型（border-radius: 999px）のプライマリアクション用ボタン。
• card ライト背景（#F3F3EE）に12pxのボーダーラディウスを設定し、目立つドロップシャドウは不使用。
• chip カテゴリタグ用の、モノスペーススタイルを用いたインライン大文字ラベル。
• input 控えめなボーダーを使用した、最小限のスタイル付けが施された標準テキスト入力。
• hero デスクトップ向けの分割画面レイアウト。左侧に大きなタイポグラフィ、右侧にビデオを配置。

09

文体と禁止事項

• トーン 自信に満ち、技術的であり、パフォーマンス重視。
• 見出し 直接的でインパクトがあり、速度と信頼性に焦点を当てる。
• CTA 'Get Started' や 'Start Building' のような、アクション指向の動詞を採用。

• 背景に純粋な黒（#000000）を使用しない — スクリーンショットでは、温かみのある落ち着いたベージュ（#E8E8DE）が使用されています。
• アクセントに明るい赤を使用しない — スクリーンショットでは、特定の鮮やかなオレンジ（#F43E01）が使用されています。
• 広範なマルチカラムテキストレイアウトを使用しない — スクリーンショットでは、約680pxに制限された段落幅が使用されています。
• カードに重いドロップシャドウを使用しない — スクリーンショットでは、最小限またはシャドウのないフラットなサーフェスが使用されています。
• 技術ラベルに小文字を使用しない — スクリーンショットでは、広めの字間を持った大文字が使用されています。
• アグレッシブなダークモードの美学を使用しない — スクリーンショットでは、明るく温かみのあるインターフェースが使用されています。
• 避ける: 曖昧なマーケティング用語
• 避ける: 過度に遊び心のある、あるいはカジュアルな表現
• 避ける: 見出しに複雑なアーキテクチャ図を使用すること

10

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

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

11

System Prompt

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