厳選・オープン・無料

Builder.io

実際のコードベースとデザインシステムのための、AI製品開発プラットフォーム。

01

デザイン DNA

デザイナー、PM、開発者がコード駆動環境で共存する、デジタルコマンドセンター。

02

カラー

高コントラスト暗色モードに、プライマリアクションや強調のための高彩度シアンアクセントを1つ配置。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display56px · 600
• heading48px · 600
• subheading24px · 500
• body18px · 400
• small14px · 400

Poppinsを彷彿とさせるデザインに合わせ、表示テキストにはジオメトリック・サンセリフを使用。 · 本文テキストには、読みやすさを確保するためヒューマニスト・サンセリフを使用。 · コードスニペットやターミナルコマンドにはモノスペースを使用。 · 大型の表示テキストには、狭めの字間を維持。

04

余白

4pxの基本単位と標準スケール。

05

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

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

0px 1px 4px 0px rgba(0,0,0,0.08) · 0px 0px 30px 0px rgba(0,0,0,0.2)

06

レイアウト

固定幅コンテナの標準12カラムグリッド。

07

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

セクション入場のフェードイン＆スライドアップ。 · ホバーステートの滑らかな不透明度トランジション。

明るさの微細な上昇またはボーダーカラーの変化。 · 即座のビジュアルフィードバック。

08

コンポーネント

• button 角丸の高コントラストシアンプライマリボタンと、ゴースト/アウトラインのセカンダリボタン。
• card 繊細なボーダーと十分なパディングを持つ、暗色サーフェスカード。
• chip 分類用の小型丸みラベル。
• input 暗色背景の標準フォーム入力。
• hero 大型タイポグラフィと概念的なイラストを含む、フルワイドセクション。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルで、技術的に熟達した語り口。
• 見出し 直接的で行動を促すスタイル。「コラボレーション」や「プロダクションレディ」を強調。
• CTA シンプルかつ明確。「ビルドを始める」や「サインアップ」など。

• 明るい背景を使用しない。スクリーンショットでは深い黒（#000000）の背景が使用されている。
• セカンダリアクセントカラーを使用しない。スクリーンショットではシアン（#18B6F6）が単一の支配的カラーとして使用されている。
• すべてのカードに高コントラストボーダーを使用しない。スクリーンショットでは多くの要素に繊細またはなしのボーダーが使用されている。
• 表示テキストにセリフフォントを使用しない。スクリーンショットではジオメトリックなサンセリフが使用されている。
• 本文テキストにセンタリングを使用しない。スクリーンショットでは左揃えの段落が使用されている。
• 過度な装飾アイコンを使用しない。スクリーンショットではクリーンでミニマルなラインアイコンが使用されている。
• 狭小で窮屈なレイアウトを使用しない。スクリーンショットでは十分なホワイトスペースとパディングが使用されている。
• 避ける: 過度にカジュアルまたは会話的なトーン
• 避ける: 曖昧なマーケティング用語
• 避ける: 受動態
• 避ける: 価値提案を曖昧にする複雑な文章

10

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

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

11

System Prompt

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