厳選・オープン・無料

Layers

デザイナーが重層的な UI コンポーネントとポートフォリオを共有・探求するためのキュレーションプラットフォーム。

01

デザイン DNA

UI/UX デザイナーが重層的なデザインアセットを紹介し、発見するためのデジタルギャラリー。

02

カラー

ミニマルでハイコントラストな白と黒を基調とし、微細なグレーの階層を用いた、クリーンでギャラリーのような体験を実現します。

03

タイポグラフィ

grotesque-sans

• display36px · 500
• body16px · 400
• caption14px · 400

04

余白

一貫した 4px を基準とし、間隔やガターには 8px、12px、16px の刻みを用います。

05

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

微細な区切りとカードボーダーとして、1px solid rgb(229, 231, 235) を使用します。

rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset · rgba(0, 0, 0, 0.03) 0px 0px 0px 1px inset

06

レイアウト

左サイドバー、メインコンテンツエリア、右サイドバー（ジョブと広告用）を持つレスポンシブグリッドレイアウトです。

07

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

インタラクティブ要素の hover 時の滑らかなトランジション（0.15秒） · モーダルオーバーレイのフェードトランジション（0.5秒）

インタラクティブ要素の背景色の変化やボーダーの強調など、微細な変化。 · インタラクティブ要素上の標準的なポインターカーソル。

08

コンポーネント

• button ミニマルで角丸（12px）。ボーダーと hover 状態を伴うことが多いです。プライマリはブラックの塗りつぶし、セカンダリはボーダー付きのホワイトを使用します。
• card 12px のボーダー-radius、微細な 1px インセットボーダー、および画像プレビューを備えたクリーンなホワイトカード。
• chip 角丸（9999px）のタグライクな要素で、フィルタリングカテゴリに使用します。
• input 角丸と微細なボーダーを備えた検索バー。
• hero 様々なデザインプロジェクトとアセットを紹介するコンテンツカードのグリッド。

09

文体と禁止事項

• トーン プロフェッショナルでクリーン。デザインコミュニティとキュレーションに焦点を当てます。
• 見出し 簡潔で、タグには大文字表記、タイトルには太字を使用。
• CTA 明確なラベルを持つシンプルでアクション指向のボタン。

• 複雑なグラデーションを使用しない — スクリーンショットは最小限のカラーを使用したクリーンな塗りつぶし背景を示しています。
• ダークモードを実装しない — スクリーンショットはホワイト背景のライトテーマのみを示しています。
• 装飾的なセリフフォントを使用しない — スクリーンショットはサンセリフタイポグラフィの一貫した使用を示しています。
• 重いドロップシャドウを追加しない — スクリーンショットは目立つシャドウの代わりに微細なインセットボーダーを使用しています。
• 鮮やかなアクセントカラーを使用しない — スクリーンショットは厳格なモノクロムパレットを維持し、コンテンツ内にブランドカラーを時折使用しています。
• 雑然としたレイアウトを作成しない — スクリーンショットは豊富なホワイトスペースと明確なビジュアルヒエラルキーを実演しています。
• 避ける: 遊び心のある、またはカジュアルな言葉遣い
• 避ける: 過度に装飾的な要素
• 避ける: 雑然としたレイアウト

10

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

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

11

System Prompt

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