厳選・オープン・無料

Verse Sh

ReactとThree.jsの実験に焦点を当てたクリエイティブデベロッパーのためのミニマルなポートフォリオ。

01

デザイン DNA

3D実験を披露するデベロッパーのダークモードのワークスペース。

02

カラー

純粋な黒の背景に、明るいグレーのモノスペーステキストと、微妙なダークボーダーを用いた極限のミニマリズム。

03

タイポグラフィ

monospace

• display16px · 400
• h116px · 400
• body11px · 400

テキストは大文字が主体です。 · すべてのテキストは「Commit Mono」モノスペースフォントを使用します。 · 400以上のフォントウェイトは表示されません。

04

余白

構造化されたグリッドレイアウトのために、一貫した16pxのパディングとギャップ。

05

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

厳格なセルのグリッドを構築するために、1pxの細い実線ボーダー（#171717）を使用。

06

レイアウト

均一なセルサイズと、ボーダーで囲まれたセル間のギャップがゼロの、2カラムのグリッドレイアウト。

07

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

インタラクティブ要素の透過性のトランジション（0.5秒）。 · 3Dの頭蓋骨オブジェクトには、連続的な回転またはhoverインタラクションがあると推定されます。

リンクおよびインタラクティブ要素の、微妙な透過性の変化。 · 標準的なリンクナビゲーション。

08

コンポーネント

• button セル内の [LINK] や [CODE] のような、括弧で囲まれたシンプルなテキストベースのリンク。
• card プレビュー画像と、技術スタックとリンクを含むフッターロウを持つ、ボーダーで囲まれたグリッドセル。
• chip 該当なし。
• input 該当なし。
• hero ブランド名、タグライン、連絡先リンクを含む、最小限のトップセル。

09

文体と禁止事項

• トーン 直接的で、ミニマル、そしてデベロッパー中心。
• 見出し 短く、すべて大文字のモノスペーステキスト（例：'VERSE', 'I MAKE COOL WEBSITES'）。
• CTA 技術的で控えめ。[LINK] や [CODE] のような括弧を使用。

• セリフまたはサンセリフフォントを使用しないこと — サイト全体がモノスペースフォントを使用しています。
• 明るいアクセントカラーを使用しないこと — パレットは厳密に黒、グレー、白です。
• 角丸を使用しないこと — すべての要素とボーダーはシャープなエッジです。
• 複雑なマルチカラムレイアウトを使用しないこと — サイトは厳格な2カラムグリッドを使用しています。
• ドロップシャドウを使用しないこと — デザインはフラットなボーダーと背景のコントラストに依存しています。
• 太字や重いフォントウェイトを使用しないこと — テキストは均一にライト（ウェイト400）です。
• 避ける: マーケティングの無駄話や説得力のある言葉遣い。
• 避ける: 装飾的またはセリフ系のタイポグラフィ。
• 避ける: 明るい、またはカラフルなUIアクセント。
• 避ける: 複雑なレイアウト構造。
• 避ける: 高いフォントウェイト。
• 避ける: 角丸や柔らかいシャドウ。

10

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

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

11

System Prompt

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