厳選・オープン・無料

Windsurf

ローカルおよびクラウドのエージェントフリートを、単一のサーフェスから管理。

01

デザイン DNA

AIコーディングエージェントのフリートを管理するためのコマンドセンター。

02

カラー

クリーンな白キャンバスにハイコントラストなインク、プライマリアクションには単一の鮮やかな青アクセントを配置。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display56px · 500
• heading40px · 500
• body-lg20px · 400
• body16px · 400
• caption13px · 400

表示や見出しには幾何学的サンセリフを使用し、現代的な技術的精度を表現。 · 本文にはヒューマニストサンセリフを使用し、高い可読性を維持。 · 技術用語、コードスニペット、UIステータスインジケーターには等幅フォントを使用。 · 大きな表示テキストにはタイトな字間（-1.5px）を維持し、視覚的なブロック感を生み出す。

04

余白

4pxグリッドベースの一定の垂直リズム。ヒーローセクションには十分な余白を設ける。

05

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

1px solid rgba(0,0,0,0.1)

rgba(0,0,0,0.05) 0px 1px 2px 0px · rgba(0,0,0,0.1) 0px 2px 6px -2px · rgba(0,0,0,0.1) 0px 10px 15px -3px

06

レイアウト

フルワイドのヒーローセクションの後に、コンテナ化されたコンテンツブロックを配置。

07

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

hover状態での控えめなopacityとbackground-colorのトランジション。 · メニューまたはドロワーの開閉に対する滑らかなトランジション。

ボタンやインタラクティブ要素に対する、控えめなbackground-colorまたはopacityの変化。 · わずかなスケールまたはopacityの低下による、即座の視覚的フィードバック。

08

コンポーネント

• button ソリッドプライマリ（青背景、白テキスト）、セカンダリ（白背景、黒テキスト、控えめなボーダー）、ゴースト（テキストのみ）。すべてに控えめなborder-radius。
• card 控えめな1pxボーダーまたは柔らかいシャドウを持つ白背景。構造化データや証言を含む。
• chip 控えめなグレー背景（rgba(0,0,0,0.06））に1pxボーダー。タグやフィルターに使用。
• input 白背景に1pxボーダー、角丸、明確なプレースホルダーテキスト。
• hero クリーンな白背景に大きなタイポグラフィと、目立つCTAボタン。

09

文体と禁止事項

• トーン 効率性と制御に焦点を当てた、プロフェッショナルで技術的、かつ直接的なトーン。
• 見出し 大きく、太字で、簡潔。技術用語には等幅フォントを使用することが多い。
• CTA アクション指向で明確。例：「MacOS用にダウンロード」や「Devinを試す」。

• 複数の競合する鮮やかな色を使用しない — スクリーンショットでは白、黒、単一の青アクセントという抑制されたパレットを示している。
• 表示用に装飾的なセリフフォントを使用しない — スクリーンショットではすべての見出しにクリーンな幾何学的サンセリフを使用している。
• 重いボックスシャドウや3D効果を使用しない — スクリーンショットではほとんど気づかないうまい柔らかいシャドウを使用している。
• タイトで詰まったレイアウトを使用しない — スクリーンショットではすべての主要コンテンツブロックの周囲に十分な余白を確保している。
• メタデータに小さく読みにくいテキストを使用しない — スクリーンショットでは13-16pxのテキストで明確な行間を使用している。
• すべてに丸みのあるピル形状のコンテナを使用しない — スクリーンショットでは主に控えめな4-10pxのborder-radiusを使用している。
• 避ける: 曖昧なマーケティング用語
• 避ける: 過度に遊び心のあるまたはカジュアルな言葉遣い
• 避ける: 複雑な文章

10

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

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

11

System Prompt

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