チュートリアル
Codex でデザイン・プロトタイピングするためのステップバイステップガイドを、Web 全体から厳選しています。
Codex内のGPT Image 2 — フロントエンドワークフロー
Codex Appでの自然言語コンポーネント、リポジトリ対応のブランド再利用、DOM レベルのコメント機能を活用したUIビルドの実体験レポート。
Hallmark — AI生成UIの品質を守るデザインスキル
コミュニティ Codex スキル。ワンコマンドでインストール可能で、AI生成UIをあなたのデザイン基準に統一させます。
Figma デザイン・ツー・コード: MCP、Codex、Kombai の比較
同一の Figma テンプレートを使用して、Figma MCP、Codex、Kombai の3つのデザイン・ツー・コード手法を実践的にベンチマークしました。
Figma を React コードに変換する Codex の使い方
Figma から スケーラブルな React コンポーネントを生成する Codex の実践的ガイド。リファクタリングとアクセシビリティのチェックポイント付き。
Codex Desktop — スキル、プラグイン、オートメーション
Codex Desktopの拡張サーフェス、Paperなどの設計ツールをワークフローに統合するセクションを含む完全なツアー。
GPT-5.4でフロントエンドデザインを極める
OpenAIフロントエンドアート・ディレクション・ガイド：ワンコンポジション・ヒーロー、ブランド優先のヒエラルキー、表現力豊かなタイポグラフィ、ダッシュボード最適化。
Codex を使用したレスポンシブフロントエンドの構築
スクリーンショット、ブリーフ、参照アセットからレスポンシブ UI への変換を Codex で実現する OpenAI 公式ガイド。Playwright を活用したビジュアル反復開発を含みます。
Codex と Figma でフロントエンド UI を構築する
Figma のブログ記事：MCP サーバーベータ版 — Figma と Codex コード生成間でデザインコンテキストをラウンドトリップさせる方法
ワークフローを再利用可能なCodexスキルとして保存する
OpenAIの、skill-creatorパターンを使用して反復可能な設計・エンジニアリングワークフローを取得するチュートリアル。
frontend-skill — OpenAIのキュレーションされたデザインルール
ヒーロー構成、ダッシュボード制約、ブランドファースト階層に関する厳密なルールを備えた公式フロントエンドスキルリポジトリ。
Codex CLI でのデザイン — デザイナーの視点
ワイヤーフレームを本番対応UIに変換するために、Codex CLI、Figma MCP、Code Connect をチェーンする方法についてのデザイナー向けチュートリアル。
Codex Agent Skills — 公式概要
OpenAI の Codex スキルの解説、SKILL.md の構造、暗黙的・明示的なスキル呼び出しの編成方法に関するリファレンス。