フロントエンド & UI
UI-UX Pro Max · UI Styling
shadcn のコンポーネントと Tailwind のユーティリティで、アクセシブルなインターフェースを作る。
概要
Radix プリミティブ上の shadcn コンポーネント層、Tailwind のユーティリティによるスタイリング層、キャンバスのビジュアルデザイン層を組み合わせる。テーマ設定、アクセシビリティ、レスポンシブのルール、カスタマイズの参照ファイルを含む。
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing
デザインにとっての意味
- ダイアログとメニューは Radix のフォーカス管理を継承するので、アクセシビリティを後付けせずに済む。
- テーマの色は CSS 変数に置かれるので、ダークモードの一貫性が保たれる。
- モバイルファーストのブレークポイントにより、レイアウトは小さく始まって上へ積み上がる。
カバーする内容
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
インストール方法
UI-UX Pro Max · UI Styling
-
リポジトリをクローンする。
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
スキルファイルの場所を Codex に指定する。
cli/assets/skills/ui-styling/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
npx shadcn@latest init を実行して、フレームワークとテーマを設定する。
-
npx shadcn@latest add button card dialog form でコンポーネントを追加する。
-
scripts/tailwind_config_gen.py を実行して、カスタムトークン付きの設定を生成する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。