Web 開発

Codex は既存のデザインシステムと相性がよく、制約や参考画像などを踏まえてレスポンシブな UI を構築できます。 以下の活用例は、Web アプリの開発でフロントエンドのデザインに改良を重ねる際に役立ちます。

アイデアからプロトタイプへ

Codex を使って、大まかなアイデアからデザインの方向性を定め、最初のプロトタイプを実装します。

アイデアから概念実証へ

Codex と ImageGen を使って、大まかなアイデアからデザインの方向性を決めます。実際に使える最小限のプロトタイプを実装し、ブラウザで動作を確認します。

Front-end Engineering

Figma のデザインをもとにした実装

Codex を使って Figma からデザインに関する情報を取得し、リポジトリ内のコンポーネントを活用しながら、既存のスタイルやデザインシステムに沿ったコードに落とし込みます。

Figma デザインのコード化

Codex で Figma からデザイン情報、アセット、バリアントを取得し、リポジトリのデザインシステムに沿って実装します。次に、Playwright で実装した UI と Figma...

Front-end Design

UI の改善

参考画像やプロンプトをもとに、変更したい箇所の修正とブラウザでの結果の検証を Codex に依頼します。

レスポンシブなフロントエンドの実装

Codex を使い、スクリーンショットとデザイン要件をもとに、リポジトリのデザインシステムに沿った UI を実装します。次に、Playwright...

Front-end Design

範囲を絞ったタスクを Slack で依頼

機能の要望や問題の報告があったら、Slack で Codex をメンションします。Codex がそのタスクを引き受け、バックグラウンドで作業を進めます。

Slack から始めるコーディングタスク

Slack で `@ChatGPT` をメンションし、ワークスペースで共有されている対象の Codex Cloud...

Integrations Workflow

プレビューのデプロイ

Codex に Web アプリの構築や更新を依頼し、Vercel にデプロイしてもらいます。Codex からは、プレビューにアクセスできる共有用の URL が返されます。

アプリやウェブサイトのデプロイ

Codex で Build Web Apps と Vercel...

Front-end Integrations

変更のリリースを迅速化

GitHub で Codex を使って変更を安全にマージできるか確認し、開発サイクルを短縮できます。

GitHub での pull requests のレビュー

GitHub で Codex のコードレビューを使うと、Codex がリグレッションやテストの不足、ドキュメントの問題を pull request 上で自動的に指摘します。

Integrations Workflow