My blog design was outdated. I use Astro. I am not a designer. I’ve worked with great ones. They have my respect.
For my personal projects I’ve always bought templates. Hours of cutting and pasting CSS and Tailwind. Time for an experiment: How far can I get without a UX pro or a template by my side?
The process:
- Find a design I like
- Share the screenshot with Gemini
- Ask Gemini for a design analysis
- Post the analysis to Stitch
- Iterate on each page type until satisfied
- Download all the design pages
- Prompt Claude CLI to plan the redesign using the new HTML
- Implement the changes page by page
Finding a Design
Dribbble. Behance. 99Designs. Awwwards. I chose Dribbble. Plenty of gorgeous work there.
I found a style I liked. Copied the image. Posted it to Gemini.google.com with this prompt:
<request>
Let's build a UI design analysis for this image. Build 4 page types: Blog post (like the image I posted), blog list (list of all blog entries), Home page, and an About page.
</request>
<format>
Deeply analyze the UI in this screenshot and describe in as much detail as you can to hand over from a UI designer to developer.
The design is for a professional developer blog in a minimalist style.
Please analyze:
1. Layout structure and hierarchy
2. Typography (font families, sizes, weights, line heights)
3. Color palette (background colors, text colors, accent colors, gradients)
4. Spacing and padding (margins, gaps, component spacing)
5. Component details (buttons, cards, inputs, icons, badges)
6. Visual effects (shadows, borders, border radius, transparency)
7. Interactions and states (hover, active, disabled states)
8. Responsive behavior considerations
9. Accessibility features
10. Animation and transition opportunities
</format>
Add as much detail as you can to hand over from a UI designer to developer. The design details should be comprehensive enough for a code agent to build the UI from scratch with high fidelity to the original design.(inspired by: https://x.com/d4m1n/status/1974107207936716835)
Design Analysis to HTML with Stitch
I wish I had deep Figma skills but alas, I need more hand-holding. Google built a free tool that strikes the balance I need. Prompt-able. Iterate-able. WYSIWYG design.
Enter: Stitch.Google.com
I pasted in the design analysis I got back from Gemini for all the page types I wanted to redesign. The prompt helped immensely. Stitch pulled in all the design look-n-feel and functionality I wanted. And the first pass looked really good.
Warning: Depending on your design’s complexity, this takes time. I didn’t need many iterations. I spent about 30 minutes iterating on all the pages (select a page, ask for changes). In short order, all 4 page types had the components to match what I wanted.
Once you’re satisfied with the design, delete page iterations you don’t like. Keep the good ones. Choose Download All. You get a zip file of all design pages. Open the zip. Copy the folder structure into your repo. I added it to a /redesign folder at my project’s root.
Measure Twice, Cut Once
With designs in your repo, your AI design buddy is ready to plan the implementation. Open Claude in your repo. Get planning.
(Choose Shift+Tab for planning mode)
I'm redesigning the homepage of this repo. @redesign/homepage/code.html is the new design. Keep any of the dynamic data we built already but use the new styling for the home page. Let's make a plan for implementing this redesign.Iterate on the plan if needed. My first plan wanted to add elements I didn’t need and remove ones I liked. Make sure the plan fits your intent before letting Claude implement.
With the plan ready, I let Claude go to work. Five minutes later the homepage looked great. After implementing, I asked Claude to test all changes. The build showed a few errors. Claude fixed them quickly. I ran the project locally. Pretty.
Then I ran Claude through each page type redesign.
OK let's move on to the blog index list of posts. @redesign/post-list/code.html is the new design. Keep any of the dynamic data we have already but use the styling from new blog post list. Let's make a plan for implementing this redesign.I iterated through each page type one by one.
After completing each page type, Claude ran a build. I reviewed on localhost. In one case I didn’t like it. The blog index page looked wrong. I re-entered plan mode and asked Claude for a better plan. One iteration later we were good.
I asked Claude to push changes to my repo. I have a VPS and a Github action for deployment. It succeeded. The new blog was live.
Remembering What You Learned
At the end of the redesign session, after successful deployment, I asked Claude to update the repo’s README:
ok -- we're done! Update the readme with what we did today in this repo and any key TODOs we need to address. Also add instructions for the human editor on 1) how to update the name of the site 2) add the name of the author to blog posts (md front matter?) 3) where to update links to social mediaWhen I return to this repo months later, I’ll have a full refresher. What we changed. How things work. For a framework I don’t use daily (Astro), this saves massive time.
Side note: If Claude got stuck on anything (like debugging loops), I would have asked to add learnings to Claude.md for future sessions. No need this time. Claude nailed each iteration.
I pushed final changes to Github. Closed the session.
Experiment Result
Design will never be a core strength. But AI gets me much further and faster than my days of cutting and pasting CSS from template sites. This isn’t elite UI/UX. A pro designer is still necessary.
Learned: Big LLMs (Gemini in this case) excel at building prompts, guides, and deep analyses (like a design handoff) that other big LLMs consume greedily. Put them to work.
I’ll keep using Stitch as a design buddy. Starting with a solid design handoff. The process feels like a cheat code for side projects and experiments.
Bottom line: Gemini building a deep design analysis, Stitch consuming the analysis, Claude executing a plan from HTML context pages… saved me a weekend of design cut-and-paste and tons of frustration.