厳選・オープン・無料

Giuliatonon It

技術的なステータスを明確かつ権威的に伝えるために設計された、ミニマリストでユーティリティ重視のシステム診断ページ。

01

デザイン DNA

クリーンで標準的なシステム診断パネルまたはユーティリティインターフェース。

02

カラー

明確なステータス伝達のための、高コントラストの中性色と機能的なセマンティックカラー。

03

タイポグラフィ

system-ui

• display60px · 400
• h230px · 400
• body16px · 400

最大限の互換性とネイティブな感覚のためにシステムフォントスタックを使用 · クリーンで非攻撃的な外観のために見出しをウェイト無し（400）に保つ · ウェイトではなくサイズの違いによって明確な階層を維持

04

余白

明確なセクション分離を持った一貫した4pxのベースリズム

05

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

セクション分離のための、控えめな1pxのマットグレーボーダー

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

06

レイアウト

明確な縦方向リズムを持つ中央揃えの単一カラムレイアウト

07

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

インタラクティブ要素の微細な遷移

リンクのカラー遷移 · 標準リンク動作

08

コンポーネント

• button 最小限のスタイル付けを持つ標準システムリンク
• card 水平フローのアイコンベースのステータスカード
• chip 最小限のインラインステータスバッジ
• input 存在しない
• hero タイムスタンプと参照リンクを持つ、大きなテキストベースのエラーステータス

09

文体と禁止事項

• トーン 直接的、技術的、情報に基づいた
• 見出し 明確で曖昧のないステータス宣言
• CTA ユーザー役割（訪問者 vs オーナー）別に分割された有益なガイダンス

• デコラティブフォントを使用しない — スクリーンショットはシステムUIスタックを示しています
• メインレイアウト要素に角丸を追加しない — スクリーンショットはシャープなエッジを示しています
• 見出しに重いフォントウェイトを使用しない — スクリーンショットは全体的に400ウェイトを示しています
• 複雑な背景パターンを導入しない — スクリーンショットはソリッドホワイトとシンプルなグラデーションを示しています
• 鮮やかな、非機能的なアクセントカラーを使用しない — スクリーンショットはリンクとステータスにのみブルーを示しています
• 密集した、窮屈なレイアウトを作成しない — スクリーンショットは十分な60pxの垂直パディングを示しています
• 避ける: マーケティング言語
• 避ける: 感情的な呼びかけ
• 避ける: 不必要な寒暄

10

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

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

11

System Prompt

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