厳選・オープン・無料

Studiolathe

外科手術的な抑制力を持つ、規律あるグリッドベースのポートフォリオディレクトリ。

01

デザイン DNA

カテゴリ別に整備された、清潔なスタジオの台帳

02

カラー

暖かみのあるニュートラル地の上に、ハイコントラストのモノクロム

03

タイポグラフィ

geometric-sans · system-sans

• display16px · 300

04

余白

リスト項目間の一貫した垂直間隔

05

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

1px solid

06

レイアウト

左揃えのテキストリストに右揃えのタグ、3カラムフッター

07

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

クリック可能なリスト項目とタグでカーソルがポインタに変化 · 標準的なブラウザインタラクション

08

コンポーネント

• button 大文字テキストの、ミニマルなアウトラインタグ
• card 背景やボーダーのない、シンプルなテキストリスト項目
• chip 小さく角丸の、アウトライン大文字タグ
• hero シンプルな左揃えのナビゲーションテキスト

09

文体と禁止事項

• トーン プロフェッショナルで控えめ、かつ直接的
• 見出し 直接的で飾り気のない
• CTA 大文字テキストのミニマルタグ

• 装飾的要素を使用しないこと — スクリーンショットは純粋なテキストとアウトラインタグのみを示している。
• 明るいアクセントカラーを使用しないこと — スクリーンショットは黒、白、ニュートラルグレーのみを示している。
• 重い影を使用しないこと — スクリーンショットは標高のないフラットなサーフェスを示している。
• 太字や太いウェイトのフォントを使用しないこと — スクリーンショットは一貫して軽量のタイポグラフィを示している。
• 複雑なカードレイアウトを使用しないこと — スクリーンショットはシンプルでフラットなリスト構造を示している。
• 大きなヒーロー画像を使用しないこと — スクリーンショットは純粋にテキストベースのインターフェースを示している。
• 避ける: 装飾的要素
• 避ける: プロモーション表現
• 避ける: 視覚的雑踏

10

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

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

11

System Prompt

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