DEVOURED
How I Rebuilt My Portfolio with Claude Code
Product designer Patrick Morgan rebuilt his entire portfolio in a weekend using Claude Code, demonstrating that thorough preparation and workflow, not just prompting, is key to AI-assisted development.
What: Patrick Morgan migrated his portfolio from Framer to a custom Astro and Tailwind CSS stack on GitHub Pages in a single weekend using Claude Code. Success was attributed to extensive preparation: screenshots, a design brief, a detailed build plan, and a CLAUDE.md file guiding the AI agent.
Why it matters: This case study illustrates how AI coding assistants can drastically accelerate development for non-coders, enabling full ownership of the codebase and integration into a standard Git workflow, suggesting a new paradigm for designers to build production-ready sites.
Takeaway: When using AI for coding, prioritize detailed upfront preparation, including visual references, a clear build plan, and a CLAUDE.md file to guide the AI, over simply trying to write clever prompts.
Deep dive
- Patrick Morgan, a product designer, decided to rebuild his portfolio site using an AI coding assistant.* He switched from Framer, a low-code design tool, to a custom Astro, Tailwind CSS, and shadcn/ui stack deployed on GitHub Pages.* The entire rebuild, including infrastructure setup and content migration, was completed in a single weekend.* Morgan attributes the project's success not to advanced prompting, but to meticulous "mise-en-place" or upfront preparation.* This preparation included curating screenshots of the existing site, writing a detailed design brief, outlining project markdown files, and preparing image assets.* A crucial step was co-creating a comprehensive build plan with Claude, including a tech decision table, file tree, content architecture, schema definitions, and six implementation phases.* He also established a CLAUDE.md file at the repository root, which the AI agent reads at the start of every session to understand project context, architectural standards, naming conventions, and specific instructions.* Claude Code assisted with environment configurations, troubleshooting, content migration, styling, and page assembly.* Morgan's role involved reviewing AI output, enforcing design patterns, making aesthetic decisions, and performing periodic cleanup passes.* The resulting site enables a GitHub-native workflow, where new features follow a loop of GitHub Issues, AI-assisted implementation plans, feature branches, and pull requests.
Decoder
- Astro: A modern web framework for building content-focused websites, known for shipping zero JavaScript by default.* Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.* shadcn/ui: A collection of reusable components built with Tailwind CSS, designed for easy theming and integration into projects.* Framer: A design and prototyping tool that also allows for building interactive websites with visual editors.* CLAUDE.md: A plain text file placed at the root of a repository that an AI agent, like Claude Code, reads at the start of a session to understand project context, architectural standards, naming conventions, and specific instructions.
Original article
Full article content is not available for inline reading.
Explore all 61 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi