厳選・オープン・無料

Kevinbrenkman

クリエイティブパートナーのためのデザイン主導ウェブ開発プラクティス。

AgencyPortfolioCleanTypographyStudio
Kevinbrenkman のスクリーンショット
↓ デザインシステムをダウンロード (12 MB)OpenDesign で開く

オリジナル: https://www.kevinbrenkman.com

📦 パックの中身を見る →

01

デザイン DNA

デザイン主導ウェブ開発プラクティスクリエイティブパートナー

作品が自ら語る minimalで洗練されたスタジオポートフォリオ。

02

カラー

#000000Ink
#3B3B3BInk soft
#FFFFFFBG
#F8F8F8BG soft
#DFDFDFMuted
rgba(0, 0, 0, 0.1)Line

プロジェクト映像に完全に従属する、ハイコントラストのモノクローム基盤。

03

タイポグラフィ

grotesque-sans · monospace

主要テキストにはすべて grotesque-sans を使用します。 · すべての要素で400の均一なフォントウェイトを維持します。 · 本文および表示テキストすべてに、0.25pxの均一な文字間隔を適用します。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

テキスト要素の周りに tightで均一なpaddingを備えた、厳格な4pxベースユニット。

05

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

sm · 2px
md · 0px
lg · 0px
pill · 999px

微妙な区切りのために rgba(59, 59, 59, 0.3) を使用した、薄い1pxのsolidボーダー。

none

06

レイアウト

1440container
12columns
24pxgutter
768 / 1024breakpoints

プロジェクト画像がビューポート全体の幅にまたがり、テキストが快適な読書幅に制限される、フル幅で端から端まで広がるレイアウト。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

hover状態におけるpaddingと不透明度のためのトランジション。 · インタラクティブ要素のためのTransformアニメーション。

インタラクティビティを示すための、微妙なpaddingまたは不透明度のトランジション。 · 複雑な状態変化なしの即座の応答。

08

コンポーネント

09

文体と禁止事項

10

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

Kevinbrenkman — 桌面首屏（hero）
桌面首屏（hero）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Kevinbrenkman — 移动首屏
移动首屏

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

11

System Prompt

クリエイティブスタジオのためのクリーンでプロフェッショナルなポートフォリオウェブサイトをデザインしてください。白背景（#FFFFFF）、黒テキスト（#000000）、微妙なグレー（#F8F8F8、#DFDFDF）を使用したハイコントラストのモノクロームパレットを採用してください。主要タイポグラフィには、一様な400のウェイトと一貫した0.25pxの文字間隔を持つ grotesque sans-serif カテゴリを設定してください。レイアウトはフル幅で端から端まで広がり、プロジェクト映像が中央に立ち、ミニマルで控えめなUI要素を備えてください。重要な禁止事項：明るく彩度の高いアクセントカラーを決して使用しない；太い或いは重いフォントウェイトを決して使用しない；複雑な影や装飾的なUI要素を決して追加しない；攻撃的な行動喚起を決して使用しない；最小限の2pxのradiusを超えて角を決して丸めない；装飾的なタイポグラフィを決して使用しない。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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