큐레이션 · 오픈 · 무료
Astro
コンテンツドリブンなウェブサイトのためのWebフレームワーク。
devtoolsframework
01
디자인 DNA
開発者中心コンテンツドリブン高速モダンモダンフレームワーク
ウェブサイト構築のための高性能スポーツカーのような存在です。
02
컬러
#54B9FFAccent
#F2F6FAInk
#BFC1C9Ink soft
#0D0F14BG
#12151CBG soft
#858B98Muted
rgba(133, 139, 152, 0.2)Line
深く暗い背景が、鮮やかなグラデーションとクリスピーな白のタイポグラフィのためのプレミアムでハイコントラストなキャンバスを創造します。
03
타이포그래피
grotesque-sans · monospace
- display
64px · 700 - h2
30px · 600 - body
16px · 400 - caption
13px · 400
見出しと本文には、技術的でモダンな感覚を維持するため、クリーンで幾何学的な grotesque-sans を使用します。 · コードスニペットやCLIコマンドには、厳格に monospace フォントを採用します。 · インパクトを与えるため、大きな表示テキストでは字間をきつく保ちます。
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
96px
4pxグリッドに基づき、セクション境界やコンポーネント間隔を定義するため、十分なパディング（16px、24px、32px）を設けています。
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 16px
pill · 9999px
1px solid rgba(133, 139, 152, 0.2)
rgba(24, 24, 27, 0.3) 0px 1px 2px 0px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えの単一カラムヒーロー（コンテンツは縦積み）から、テーマの見せ場向けの複数カラムグリッドに変化します。
07
모션과 인터랙션
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素のための滑らかな色と背景色のトランジション。 · ホバー状態のための繊細な不透明度とボックスシャドウのトランジション。 · インタラクティブなフィードバックのためのトランスフォームトランジション。
標準的なイージングカーブによる、滑らかな色と背景色のトランジション。 · 即座に激しい視覚的変動がなく、標準のポインターカーソル。
08
컴포넌트
- button 白または紫の実線背景と高いコントラストのテキストを持つ、ピル型（完全な丸み）のボタンです。
- card 微妙なボーダーと角丸を持つダーク背景で、テーマの見せ場に使用します。
- chip 微妙なボーダーを持つ、ピル型のカテゴリフィルターです。
- input monospaceフォントとコピーアイコンを備えた、ダーク背景のコードブロックです。
- hero 印象的なリニアグラデーション背景と中央揃えのタイポグラフィを持つ、フルワイドセクションです。
09
보이스와 금지 목록
- 톤 自信に満ち、開発者寄りで率直です。
- 헤드라인 大胆で直接的、価値を伝える宣言。
- CTA 'Get Started' のような、明確で行動を促すフレーズ。
- 明るく彩度の高い背景は使用しません — スクリーンショットでは深く暗いグラデーションが使われています。
- 装飾的またはセリフフォントは使用しません — スクリーンショットではクリーンで幾何学的なサンセリフが使われています。
- 角張った矩形ボタンは使用しません — スクリーンショットでは完全に丸みを持つピル型ボタンが使われています。
- 見出しに薄く軽いテキストウェイトは使用しません — スクリーンショットでは太字（700）とセミボールド（600）のウェイトが使われています。
- 雑然とした或いは散らかったレイアウトは使用しません — スクリーンショットでは十分なホワイトスペースと明確な階層が示されています。
- 幅広い色の範囲は使用しません — スクリーンショットではダークブルー、紫、白の限定的なパレットが使われています。
- 피하기: 大げさでマーケティング色の強い言葉
- 피하기: 受動態
- 피하기: 文脈のない技術用語
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 步进，作为视觉证据）
移动首屏실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Astroは、コンテンツドリブンなウェブサイトのために設計されたモダンなWebフレームワークです。デザインはプレミアムで開発者中心であり、ダークネイビー（#0D0F14）をベースとしたダークモードパレット、鮮やかな紫のグラデーション、そしてクリスピーな白（#F2F6FA）のテキストを活用しています。タイポグラフィはクリーンでモダンで、技術的な感覚を出すためhumanist/grotesque sans-serifカテゴリに依存しています。重要なデザインルールは以下の通りです：1. 常にダークでハイコントラストな背景を使用する。2. プライマリアクションにはピル型（border-radius: 9999px）のボタンを使用する。3. 見出しや本文に装飾的なセリフフォントを決して使用しない。
en · zh-CN · zh-TW · ja · ko