厳選・オープン・無料

Beau To

Beauは、すべてのドキュメントインタラクションにスマートな自動化をもたらすことで、顧客向けプロセスを再定義します。

01

デザイン DNA

データ抽出と検証を自動化する、インテリジェントなドキュメント処理エンジン。

02

カラー

明瞭さのための高コントラスト白と黒に、ダイナミックなエネルギーを加える鮮やかなグラデーションアクセント。

03

タイポグラフィ

humanist-sans · monospace

• display56px · 500
• display-sm40px · 500
• heading28px · 500
• body17px · 400
• caption14px · 400

04

余白

明瞭さを強調するため、十分な余白を活用した4pxグリッドベースのリズム。

05

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

区切り用の微細な1pxソリッドライン。

0px 2px 6px 0px rgba(0, 0, 0, 0.06)

06

レイアウト

中央揃えのヒーローセクション、その後に交互の分割レイアウト、そして3カラムの機能グリッドを配置。

07

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

ホバーや状態変化時の滑らかな透過度トランジション。

微細なカラーまたは透過度のトランジションを伴うカーソルポインタ。 · 即座の視覚的フィードバック。

08

コンポーネント

• button 高コントラストの黒背景に白文字のピル型プライマリボタン。
• card 微細なボーダーと柔らかなシャドウを持つカード。データ検証の例を含むことが多い。
• chip カラーテキストを使用したステータスインジケーター（有効は緑、警告はオレンジ、無効は赤）。
• input データ入力用のクリーンなテキストベース入力フィールド。
• hero データ検証を実演する複雑なUIモックアップを伴う、大きな中央揃えの見出しと補足サブタイトル。

09

文体と禁止事項

• トーン プロフェッショナル、効率的、自信に満ちたもの。
• 見出し 直接的でベネフィット重視。大型で太字のタイポグラフィを多用。
• CTA 明確でアクション导向。例：「デモをリクエスト」

• 複数のプライマリアクセントカラーを使用しない — スクリーンショットでは、手順全体を通じて強調に単一のグラデーションが使用されている
• 複雑な装飾的背景を使用しない — スクリーンショットでは、最小限のノイズを持つクリーンな白い背景が主に使われている
• 本文テキストを中央揃えにしない — スクリーンショットでは、説明文の可読性のために左揃えテキストが使用されている
• すべての要素に角丸を使用しない — スクリーンショットでは、一部のUIモックアップはシャープな角を持ち、ボタンのみ角丸である
• 重いドロップシャドウを使用しない — スクリーンショットでは、非常に微細で、ほぼフラットなシャドウが使われている
• コードにサンセリフフォントを使用しない — スクリーンショットでは、ドキュメントデータ抽出にモノスペースフォントが使用されている
• 避ける: 曖昧な表現
• 避ける: 専門用語
• 避ける: 受動態

10

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

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

11

System Prompt

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