フロントエンド & UI
design-skills · Neumorphism
ストーングレーのやわらかな押し出し面に、Space Mono の書体。
概要
ニューモーフィズム UI の指針スキル。モノクロームのストーン #E7E5E4 の面に内側と外側の影、ティール #006666 のアクセント、見出しと本文に Space Mono、コンパクトな密度の余白。
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
デザインにとっての意味
- モノクロームの面では、奥行きは色のコントラストではなく影から生まれる。
- コンパクトな密度の余白は、ダッシュボードや設定画面のようなコントロールの多いパネルに合う。
- 視覚的メタファーの混在を禁じるルールにより、やわらかな押し出しが唯一の奥行き表現であり続ける。
カバーする内容
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
インストール方法
design-skills · Neumorphism
-
リポジトリをクローンする。
git clone https://github.com/bergside/awesome-design-skills -
スキルファイルの場所を Codex に指定する。
skills/neumorphism/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
個々のコントロールをスタイリングする前に、Codex に面と影のトークンを設定させる。
-
やわらかな影だけではキーボード利用者に不十分なので、見えるフォーカス状態を求める。
-
このスキルの指定どおり、ARIA より先にセマンティックな HTML を必須とする。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。