AI Dev Process

Start with ChatGPT brainstorming, then build rapidly with Claude Code. This page transparently reveals our actual development workflow.

View Portfolio →

Overview

4 Steps of AI Development

1

Brainstorm with ChatGPT

Throw ideas at ChatGPT first. Refine, expand, and explore directions through dialogue, organizing thoughts into a concrete plan.

2

Generate Implementation Prompts

Verify required environment and tech with ChatGPT, then have it generate implementation plan prompts for Claude Code.

3

Build with Claude Code

Feed generated prompts to Claude Code for implementation. Iterate with Claude Code while checking browser console errors to reach completion.

4

Manual Work, Deploy & Iterate

For infrastructure setup and account registration, get guided by Claude Code / ChatGPT. After deploying to Vercel, iterate quickly based on feedback.

Dev Environment

Tools We Use

Claude Code

AI Implementation

Main implementation engine. Generate, edit, and debug code with natural language.

ChatGPT

Design & Brainstorming

Used for idea refinement, implementation prompt generation, and infrastructure setup guidance.

Gemini

Image Generation

Used for generating character and illustration assets. Used alongside ChatGPT.

Canva

Image Editing

Used for cropping, editing, and organizing variations of generated images.

Next.js

Framework

React-based framework. Great compatibility with static generation and Vercel.

Vercel

Deployment

Auto-deploy by pushing to GitHub. Free tier available for personal projects.

Portfolio

Below are projects actually built with this process. Check each project's "Behind the Scenes" for detailed effort, tools used, and challenges faced.

LP Gallery

A showcase where you can experience various LP patterns including timeline, map, storybook, and character-based designs.

LP制作ショーケースNext.js

Ohtani Log

A site visualizing Shohei Ohtani's at-bat log based on MLB game data. Track at-bat results, batting average, and home runs with real-time data.

MLBData VizNext.jsVercel

Why This Works

Benefits of Building with AI

Build First, Think Later

No need for extensive requirements and design upfront. Build a prototype first, then refine. That's the biggest advantage of AI development.

Fast

From ChatGPT brainstorming to Claude Code implementation, turn ideas into reality in hours. Dramatically faster than traditional development.

Easy to Iterate

Post-launch additions and fixes are low-cost. Iterate quickly based on user feedback.

Anyone Can Start

Even without programming experience, AI guides you through implementation. What matters is your idea of what to build.

Related Pages

Want to learn more?