フロントエンド & UI
Skeuomorphic UI
重ねたグラデーションと影で、ボタンやパネルに触覚的な奥行きを与える。
概要
触覚的な Web UI のための面のレシピ。縦方向のグラデーション塗り、1px の反射的なグラデーションボーダー、重ねた外側と内側の影。浮き彫りのテキスト、アイコン、微細な質感は任意。
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
デザインにとっての意味
- 浮き上がり状態と押下状態で奥行きが反転するので、コントロールが物理的に見える。
- 奥行きには方向があり、光は上から、影は下に来る。
- グラスモーフィズム、ニューモーフィズム、スキューモーフィズムを 1 つのコンポーネントで混ぜないよう警告する。
カバーする内容
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
インストール方法
Skeuomorphic UI
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
基準トークンを一度設定し、あとはブランドとテーマごとに調整する。
-
浮き上がった面を、カード、ボタン、タブ、コントロールの筐体に適用する。
-
押下バリアントは、アクティブなトグルと選択中のタブだけに加える。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。