Objective
To test my hypothesis that iterative prompting is the most effective AI-assisted development workflow through a personal project. I periodically revamp my website when I get excited about web development, and this is a more perfect time than ever.
Executive Summary
Context
Tools
- ChatGPT Plus (I’m making the most of my one-month personal free trial)
- Codex
- Visual Studio Code
Languages and Frameworks
- Next.js
- Tailwind.css
- MDX
Process
- 🤖✏️ ChatGPT-assisted ideation and implementation plan development.
- 🤖✏️ Generate, review, and revise implementation plans for each website requirement.
- ✏️ Write documentation while I wait for Codex to run.
- 🤖 Create home page.
- 🤖✏️ Refactor styling code to use global variables (Codex missed a few colors).
- 🤖 Create hamburger navigation menu for mobile experience.
- 🤖 Create resume page.
- 🤖✏️ Create AGENTS.md 3. 💡 I realized that Codex was not following best practices and was instead creating the whole page using non-reusable JSX, which defeats the purpose of React components. 4. 🤖 Refactor to use reusable components where possible.
Key Findings
System Limitations
- The LLM doesn’t abstract code reliably and reusably without human intervention since it takes prompts literally.
- Codex cannot create SVG paths for complex shapes.
Philosophy
Thought
- AI can’t do all the thinking for you. Most of the system architecture and design choices have to come from you, otherwise the product just looks plain bad.
Workflow/Design
- Most helpful to create repo structure first to guide development and prevent disorganized architecture.
KPIs Moved
- Usually development takes a week or so for my personal website. This took XX.
Takeaways
- Learned React component and routing best practices that I didn’t grasp deeply enough before.
- Created a reusable AGENTS.md file for similar future projects.