Clay は世界的に知られるクリエイティブエージェンシーで、アートディレクション級の Web デザインで知られています。UI は暖かなクリームのキャンバス（#faf9f7）にオートミール色のボーダー（#dad4c8）を配し、無機質ではなく手仕事の質感を演出します。パレットにはマッチャ、スムージー、レモン、紫芋、ザクロ、ブルーベリー、ドラゴンフルーツといった遊び心のある果物の名前が付いています。Roobert 書体は 5 組の OpenType スタイルセットを備え、ホバーアニメーションは大胆に回転しながら上昇し硬いオフセットシャドウを伴います。コードと技術ラベルは Space Mono が担当します。クリエイティブエージェンシーとアートディレクション型のプロジェクトに適しています。
Clayデザインとクリエイティブ
プロンプトテンプレート
基本テンプレート
Design a Clay-inspired interface. - Warm cream canvas (#faf9f7) with oat-toned borders (#dad4c8) — artisanal, not clinical; - Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit; - Roobert font with 5 OpenType stylistic sets — quirky geometric character; - Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow; - Space Mono for code and technical labels. Colors: #000000, #ffffff, #faf9f7, #84e7a5 with #84e7a5 accent. Typography: Roobert.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Clay aesthetics. Use Clay color identity with #84e7a5 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Clay style. Use Clay color identity with #84e7a5 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Clay design language. Use Clay color identity with #84e7a5 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Clay visual identity. Use Clay color identity with #84e7a5 accents. Compelling, conversion-focused.
使用例
Clay アプリ
WebBuild a web app with Clay design language and #84e7a5 color system.
Clay ダッシュボード
ダッシュボードCreate a dashboard using Clay style with data visualization and Roobert typography.
✅ 適した用途
- デザイン協業
- デザインエージェンシーのポートフォリオとブランドサイト
- アートディレクションの効いたマーケティングページ
❌ 適さない用途
- 厳格な企業の管理画面システム
- 高密度なデータダッシュボード
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。