厳選・オープン・無料

Remix

開発者のためのモダンで高性能なWebフレームワーク。

01

デザイン DNA

Web開発のための高速サーキット

02

カラー

鮮やかでエネルギッシュなアクセントを持つ、ハイコントラストのダークモード。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display84px · 700
• heading56px · 700
• body16px · 400
• caption13px · 400

ナビゲーションやUIラベルには、大文字と等幅フォントを使用する。 · 見出し表示には、太字で字間を詰めたジオメトリックsans-serifを使用する。 · 本文テキストには、クリーンなヒューマニストsans-serifを使用する。

04

余白

豊かな垂直方向のpadding（120px）で、主要なコンテンツセクションを分離する。

05

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

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

rgb(253, 189, 134) 0px 0px 2px 0px · rgb(253, 189, 134) 0px 0px 8px 0px

06

レイアウト

中央にコンテンツブロックを持つフルワイドのダークヒーローから、フィーチャー用の2カラムレイアウトへと展開する。

07

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

背景の微細なパーティクルアニメーションとグローするライトトレイル。 · UI要素の滑らかな不透明度トランジション。

インタラクティブ要素のカラートランジション。 · ボタンやリンク上のポインタカーソル。

08

コンポーネント

• button 最小限のテキストボタン。多くの場合、大文字の等幅ラベルを使用。
• card ダーク背景とシンタックスハイライトを備えたコードブロック、または繊細なボーダーを持つガラスモーフィックなパネル。
• chip ナビゲーション用の大文字の等幅タグ（例: [G] GITHUB）。
• input 等幅フォントを使用したコマンドラインスタイル（例: npx remix@next new）。
• hero アニメーションするダークパーティクルフィールド背景の上に配置された、オーバーサイズで字間を詰めたディスプレイタイポグラフィ。

09

文体と禁止事項

• トーン 自信に満ち、技術的で、力強さを与えるもの。
• 見出し 力強さと多様性を強調する、太字で率直なステートメント。
• CTA コマンドラインスニペットを伴う、直接的な指示。

• ライトモードやパステルの背景を使用しない — スクリーンショットはダークでハイコントラストな環境を示している。
• 見出しにセリフフォントやスクリプトフォントを使用しない — スクリーンショットは太字で字間を詰めたジオメトリックsans-serifを示している。
• コンポーネントに大きく重いボーダーを使用しない — スクリーンショットは繊細で薄く、不透明度の低いボーダーを示している。
• ナビゲーションに標準的な文頭大文字を使用しない — スクリーンショットは大文字の等幅ラベルを示している。
• 静的でフラットな背景を使用しない — スクリーンショットはダイナミックでアニメーションするパーティクルフィールドとグローするライトトレイルを示している。
• 小さく窮屈なスペーシングを使用しない — スクリーンショットはセクション間の豊かな垂直方向のpaddingを示している。
• 避ける: 明確なメリットのない、過度に複雑な技術用語。
• 避ける: 受動的またはためらいがちな言葉遣い。
• 避ける: 明るいパステルカラーパレット。

10

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

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

11

System Prompt

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