Using AI to rebuild Branden Builds

I recently re-branded and rebuilt Branden Builds. New design, new tech stack, new me. I wanted to move away from a MD content rich blog to a headless setup. So, I switched my stack to SvelteKit (static), Storyblok, and Cloudflare Workers. You know, all the trendy things (and because they have great free tiers). On top of that, I had Claude Code handle about 75% of the project coding.

# AI Philosophy and Methodology

At the time of this post (and if ever) I’m still not comfortable letting AI and its agents just go loose and build everything form scratch. I know it’s all the hype, but I feel like I’m getting gaslit into believing not only is AI slop acceptable, it’s expected. I’ve seen first hand how bad agentic coding can be (but also how useful it can be when used knowledgeably.) So with that said, I like to mostly hand code the big architecture things such as state management, data fetching client wrappers, error handling, and misc things along those lines. I like to build the foundation for the AI to use.

Process Breakdown

The key to using AI effectively is structure and context. From a technical standpoint, I like to break down project into phases. Discovery, Dev Setup, and Coding, so the AI has clear guardrails at each step. The more context I give it upfront, the less I'm cleaning up slop on the backend.

Project Discovery

Here I like to chat with Claude (or whatever LLM) like I do with a senior architect and project manager in a collaborative discussion The end goal is elicit requirements, propose architecture, evaluate technologies, plan phases, and identify risks. Example generated documents would be architecture diagrams, component lists and data models, API specifications, sequence diagrams, risk registers, and roadmap/Gantt charts.

1. Gather project context like project charters, scope documents, functional requirements, business goals, etc.
2. Use conversational patterns and problem solving prompts to ask iterative questions. II want it to break down each question step by step
3. Convert gathered requirements into an architecture. Functional requirements (FRs) define what the system does; these map to modules and components (e.g. “User login” ⇒ Auth Service + Database). Non-functional requirements (NFRs) (quality attributes like scalability, security, maintainability) dictate design choices.
4. With components identified, evaluate technology options for each (frameworks, databases, platforms).
5. Break the discovery into phases with clear milestones, timeboxes, and deliverables.

Dev Setup

1. I create a llm_docs folder that I put code examples from other projects or notes that I can use for reference. This can be previous projects I’ve worked on, open source code examples, important MD or HTML files for references, etc.
2. I find the relevant AI tools to this project. For example, Svelte has some agentic tools to assist your agents.
3. Set up automated testing and AI works flows [blog post soon]
4. Hand code any of the large pieces I want to the LLM to follow such as state management, API client wrappers, or more.
5. Set up the design system. CSS vars, fonts, icons, etc.
   1. For the static build, I use the Figma MCP if I have a Figma file.
   2. A more recent method, is I use Claude Design and upload my code skeleton files and the design and it generates the boilerplate. It’s a pretty seemless transition to claude code.
6. Set up CI/CD pipelines and deployments.

Coding

1. I like to break the designs into static incremental phases based off in an atomic(ish) design structure. This helps guide how I break down requirements and features so I start with static building components.
2. I write a plan before every feature. Here I personally use Opus (or whatever highest model there is) You can view them in my repo that I purposely committed.
3. Once the plan is fine tuned, I execute in a new context using Sonnet (or whatever more basic model)
4. Review, and fix any AI slop.
5. Once the website is statically built, I connect Storyblok.
6. Rinse, repeat.

# New Tech Stack

My old stack was a NextJS and MD blog. I decided to change it up a bit because I don’t get a chance to use other fun tech outside of React.

1. Sveltekit/TS (static)
2. Storyblok
3. Cloudflare Workers

# Conclusion

Overall, I’m pretty impressed how far this stuff has come in a year. What went from autocomplete to building full on features is pretty impressive. It’s really opened my doors to sped up my development. This entire project took me about ~40 hours. That includes design, content, and build. The majority of that time was spent on new content and design.