厳選・オープン・無料

Highlight

モダンなWebアプリケーション向けの、オープンソースフルスタックモニタリングプラットフォーム。

01

デザイン DNA

フルスタックモニタリングのための、ダークでクリーンなIDEダッシュボード。

02

カラー

ダークモードを第一とし、ハイコントラストのシアンアクセントと、控えめなネオンイエローのハイライトを採用。

03

タイポグラフィ

humanist-sans · monospace

• display58px · 600
• heading44px · 600
• body-lg18px · 400
• body16px · 400

04

余白

読みやすさを考慮した、一貫した4pxグリッドベースと豊富なホワイトスペース。

05

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

1px solid rgba(48, 41, 78, 1)

rgb(108, 55, 244) 8px 8px 0px -2px

06

レイアウト

幅広のマージンを持つ中央配置コンテンツ。機能タブにはflexboxを活用。

07

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

インタラクティブ要素のホバー時、微妙なカラートランジション。 · 機能タブ間のスムーズなトランジション。

ボタンとリンクに、微妙なカラーシフトと不透明度の変化。 · カラートランジションによる即座のフィードバック。

08

コンポーネント

• button ピルシェイプ（カプセル型）のボタン。プライマリはソリッドシアン、セカンダリはアウトラインバリアント。
• card ダークなカード。控えめなボーダーを持ち、しばしばインテグレーションアイコンを含む。
• chip 機能ナビゲーション（セッションリプレイ、エラーモニタリングなど）のための、タブのようなチップ。
• input ミニマリストなダークインプット。ヒーローでは目立った役割を果たさない。
• hero アクセントカラーを用いた大型の中央配置ヘッドライン、スタックされたCTA、機能概要タブ。

09

文体と禁止事項

• トーン 技術的でありながらも理解しやすく、プロフェッショナルで、開発者目線。
• 見出し 直接的で価値を示し、オープンソースである点を強調。
• CTA アクション指向（始めよう、ライブデモなど）で、明確なビジュアル階層。

• ライトテーマを使用しない — スクリーンショットは、深いネイビーの背景（#0D0225）を持つダークモードインターフェースを示しています。
• セカンダリアクセントカラーを使用しない — スクリーンショットは、ボタンやハイライトに単一の主要なハイクロマシアン（#72E4FC）を使用しています。
• 装飾的なセリフフォントを使用しない — スクリーンショットは、すべてのテキストにクリーンでモダンなヒューマニストサンセリフ（Poppins）を使用しています。
• あらゆる箇所にシャープな角を使用しない — スクリーンショットは、控えめな8px/16pxの角丸と44pxのピルシェイプのミックスを示しています。
• 低コントラストのテキストを使用しない — スクリーンショットは、ダーク背景上にハイコントラストのホワイト（#FFFFFF）とライトグレー（#DFDFDF）を使用しています。
• ヘッダーを雑踏させない — スクリーンショットは、明確なプライマリ/セカンダリアクションボタンを持つ、クリーンでトップ揃えのナビゲーションを示しています。
• 避ける: 過度にカジュアルな、または「スタートアップ風」の俗語を避ける。
• 避ける: ヒーローに複雑なアーキテクチャ図を避ける。
• 避ける: 核心的な価値提案が見づかるような、ごちゃごちゃしたレイアウトを避ける。

10

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

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

11

System Prompt

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