フロントエンド & UI
design-skills · Claymorphism
ふっくら丸い立体形状、Poppins の見出し、白地に青。
概要
クレイモーフィズム UI の指針スキル。こねられる粘土を思わせる、やわらかく丸くふっくらした形状。見出しに Poppins、本文に Montserrat、青 #3B82F6 のアクセント、白地に濃い青のテキスト。
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
デザインにとっての意味
- ふっくら丸い形が、余計なラベルなしでもボタンに押せそうな明確なアフォーダンスを与える。
- 白地の濃い青のテキスト #1C398E が、遊び心のあるパレットのままコントラストを保つ。
- メタファーの混在を禁じるルールにより、クレイの奥行きがガラスやフラットと混ざることはない。
カバーする内容
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
インストール方法
design-skills · Claymorphism
-
リポジトリをクローンする。
git clone https://github.com/bergside/awesome-design-skills -
スキルファイルの場所を Codex に指定する。
skills/claymorphism/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
クレイの見た目を決めるのは角丸と影なので、まず Codex にそのトークンを求める。
-
似たサンセリフ 2 種ではなく、指定どおり見出しの Poppins と本文の Montserrat を組み合わせる。
-
やわらかな形状の処理でも、focus-visible と disabled の状態が残っているか確認する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。