厳選・オープン・無料
Tailwind CSS
モダンなWebサイトを素早く構築するためのユーティリティファーストCSSフレームワーク。
devtoolscss
01
デザイン DNA
ユーティリティファーストモダン開発者向けクリーン効率的
Web開発者のための、パワフルでありながら使いやすい精密なツールセット。
02
カラー
#0ea5e9Accent
#111827Ink
#374151Ink soft
#ffffffBG
#f9fafbBG soft
#f3f4f6BG quiet
#6b7280Muted
rgba(0, 0, 0, 0.05)Line
高コントラストの単色ベースに、コードやインタラクティブ要素用の鮮やかなスカイブルーアクセントを1色使用。
03
タイポグラフィ
humanist-sans · monospace
- display
72px · 700 - h1
48px · 600 - h2
32px · 600 - body-lg
20px · 400 - body
16px · 400 - code
14px · 400 - caption
13px · 500
見出しは、モダンで密度の高い印象のために、字間を詰めて使用（-2px～-1px）。 · 本文は、読みやすさのために快適な行高1.5を維持。 · コードブロックは、明確な区別のため、特徴的なモノスペースフォントを使用。
04
余白
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
一貫した4pxグリッド。フィーチャーカードには十分なパディングを設定し、セクション間には明確な区切りを配置。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
xl · 16px
pill · 999px
コンテナには1px solid rgba(0, 0, 0, 0.05)を使用し、インタラクティブ要素には控えめなインセットボーダーを適用。
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) · inset 0 0 0 1px rgba(0, 0, 0, 0.1) · inset 0 0 0 1px rgba(255, 255, 255, 0.1) · inset 0 0 0 1px rgba(0, 0, 0, 0.05)
06
レイアウト
1280container
12columns
24pxgutter
640 / 768 / 1024 / 1280breakpoints
中央揃えの単一カラムヒーローから、フィーチャーカード用のレスポンシブグリッドへと展開。
07
モーションとインタラクション
150msmicro
300mssmall
350msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
ホバーステートでのcolor、background-color、opacityの滑らかなトランジション。 · ボタンやリンクなどのインタラクティブ要素に対する、控えめなtransformアニメーション。 · 一貫した印象のために、すべてのトランジションで一貫したイージングカーブを使用。
リンク（テキストからアクセントブルーへ）やボタンの背景変更に対する、控えめな色の変化。 · opacityや控えめなtransformの変化による、即座の視覚フィードバック。
08
コンポーネント
- button 白テキストの堅実な黒の「Get started」ボタン。角丸のピル型。
- card 角丸（12-16px）と極めて控えめなインセットまたはドロップシャドウを持つ白いカード。コードスニペットとフィーチャーの説明を含む。
- chip ライトグレーの背景、青いテキスト、小さな角丸を持つインラインコードタグ。
- input ライトボーダー、角丸、控えめなキーボードショートカットインジケーターを持つ検索バー。
- hero 明確な階層構造を持つ、巨大な左揃えのタイポグラフィ。その下に2つのアクションボタンを配置。
09
文体と禁止事項
- トーン 開発者に焦点を当て、技術過多や専門用語の過多にならないよう、自信を持ち直接的。
- 見出し スピードとシンプルさを強調する、太字で字間を詰めた大きなステートメント。
- CTA ユーザーを次のステップへ導く明確で行動を促すボタン（例: 「Get started」）。
- グラデーション背景は使用しない — スクリーンショットではグラデーションのないクリーンな白背景が使用されている。
- セリフ系のタイポグラフィは使用しない — スクリーンショットでは表示テキストと本文テキストの両方でサンセリフ（humanist-sans）フォントが使用されている。
- 重いドロップシャドウは使用しない — スクリーンショットでは奥行きのための非常に控えめで明るいシャドウが使用されている。
- 複数のアクセントカラーは使用しない — スクリーンショットではインタラクティブなコード要素に単一のスカイブルーアクセント（#0ea5e9）が使用されている。
- 複雑な装飾ボーダーは使用しない — スクリーンショットではシンプルで明るい1pxのボーダー、またはボーダー自体が使用されていない。
- 中央揃えのヒーローテキストは使用しない — スクリーンショットでは強力な左揃えの見出しと本文コピーが使用されている。
- 避ける: マーケティング的な表現
- 避ける: 不必要な形容詞
- 避ける: 複雑な文
- 避ける: 受動態
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、ユーティリティファーストCSSフレームワークであるTailwind CSSのWebサイトです。開発者がWebサイトを迅速に構築するためのモダンで効率的なツールとしてポジショニング。ビジュアルデザインはクリーンでプロフェッショナル、コンテンツに焦点を当てている。主要カラーには、鮮やかな白背景（#ffffff）、ほぼ黒のテキスト（#111827）、コードハイライト用の鮮やかなスカイブルーアクセント（#0ea5e9）が含まれる。タイポグラフィは明瞭さのためにサンセリフ（humanist-sans）フォントを使用し、太字で字間を詰めた表示スタイルを採用。重要なデザイン制約には、見出しを決して中央揃えにしないこと（レイアウトは強力に左揃えであること）、複数のアクセントカラーを使用しないこと（単一の青色に留めること）、適切な余白を維持することなどが挙げられる。サイトは24pxのガターを持つ12カラムグリッドを使用し、控えめな角丸（12-16px）と最小限のシャドウを持つカードを特徴としている。
en · zh-CN · zh-TW · ja · ko