Web 開発

Codex は既存のデザインシステムとの相性がよく、制約や視覚的な入力を考慮してレスポンシブ UI を生成します。 これらのユースケースは、Web アプリを構築し、フロントエンドのデザインを反復改善する場合に役立ちます。

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

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

アイデアから概念実証へ

Codex と ImageGen を使って、大まかなアイデアからビジュアルの方向性を定め、実用に足る最小限のプロトタイプを実装し、ブラウザで検証します。

フロントエンド エンジニアリング

Figma を基に実装

Codex を使って Figma からデザインのコンテキストを取得し、リポジトリのコンポーネント、スタイリング、デザインシステムに沿ったコードに変換します。

Figma デザインのコード化

Codex を使って Figma からデザインコンテキスト、アセット、バリアントを取得し、リポジトリのデザインシステムに沿ったコードへ変換します。その後、Playwright で実装を...

フロントエンド デザイン

UI の反復改善

Codex を活用すれば、視覚的な入力やプロンプトに基づいて必要な箇所だけを変更し、その結果をブラウザで検証できます。

レスポンシブなフロントエンドデザインの構築

Codex を使って、スクリーンショットやデザイン概要をリポジトリのデザインシステムに沿ったコードに落とし込みます。その後、Playwright...

フロントエンド デザイン

UI の細かな変更

Codex を使い、既存のアプリの UI を一度に 1 か所ずつ微調整してブラウザで検証しながら、プレビューの近くにポップアウトしたチャットウィンドウからすばやく反復調整を続けます。

フロントエンド デザイン

Slack 上のスコープが明確なタスクへの対応

機能リクエストや問題の報告があったら、Slack で Codex をタグ付けしてください。Codex がそのタスクを引き受け、バックグラウンドで作業します。

Slack からコーディングタスクを開始

Slack で `@Codex` をメンションすると、適切なリポジトリと環境に紐づくチャットを開始できます。その後、元のスレッドまたは Codex Cloud で結果をレビューします。

連携 ワークフロー

プレビューのデプロイ

Codex を使って Web アプリを構築または更新し、Vercel でデプロイして、共有可能なライブ URL を受け取ります。

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

Codex、Build Web Apps、Vercel を使って、リポジトリ、スクリーンショット、デザイン、または大まかなアプリ案から、実際に動作し共有できるプレビューデプロイを作成します。

フロントエンド 連携

変更の迅速なリリース

GitHub で Codex を使って変更を安全にマージできることを確認し、開発サイクルを高速化します。

GitHub の Pull Request レビュー

GitHub で Codex コードレビューを使えば、リグレッション、テストの不足、ドキュメントの問題を自動的に洗い出し、Pull Request 上に直接表示できます。

連携 ワークフロー