Problem
My blog had been running on an outdated stack (originally a Preact/Vite build ported to Next.js in May 2024) with a functional but uninspiring design. The biggest blocker to rebuilding wasn't technical — it was the design decision paralysis: "how should my new blog actually look?" Without a clear visual direction, the rebuild kept getting deferred.
Solution
Used Superdesign.dev (an AI-assisted design tool) to eliminate the design decision blocker. Fed it a prompt describing the desired aesthetic and it generated a complete React component with:
- Dark theme with vibrant orange/yellow accents
- Sticky header with backdrop blur
- Animated hero section with scroll parallax and mouse-tracking glow
- Horizontal scrolling tag marquee
- Card-based blog post feed with hover effects
- Engineering principles section with code snippet display
This gave a concrete design blueprint (complete with Tailwind classes, Framer Motion animations, and component structure) that could be directly translated into the existing Next.js codebase.
This was all I needed... I was able to take this design and tweak it so that it was exactly what I wanted.
Thes rest was simple... I fed claude code the exported prompt from superdesign.dev and asked it to plan the implementation steps, made some tweaks and phase by phase completed the rebuild.
Within 5 days, the blog went from the WIP redesign to a fully polished site with:
- Dark-only theme (removed light mode)
- About page with anime.js animations
- JSON-LD structured data
- Sitemap generation
- Custom fonts (Cabinet Grotesk)
- Favicon
- Accessibility improvements
And if i do say so myself, it looks pretty darn good.
Tech Stack
- Design: Superdesign.dev (AI design tool)
- Implementation: Claude Code (AI coding assistant)
- Framework: Next.js 14 (App Router)
- CMS: Directus (headless) on Azure
- Styling: Tailwind CSS + shadcn/ui
- Animations: anime.js (replaced Framer Motion from the Superdesign output)
- Hosting: Vercel
Gotchas
- Framer Motion → anime.js: The Superdesign output used Framer Motion heavily. I switched to anime.js for the final implementation — lighter weight and more appropriate for the actual animation needs
- Parallel routes removed: The old blog used Next.js parallel routes for a three-column layout. The redesign simplified to a single-column layout, requiring removal of the
@leftSide/and@rightSide/parallel route folders - Superdesign output isn't production-ready: It gives you a single React component with hardcoded data and client-side patterns. The real work is decomposing it into proper app architecture — but having the visual direction and Tailwind classes already decided is the massive timesaver
- Dark-only decision: Originally the Superdesign output included a theme toggle. Simplified by going dark-only, which reduced complexity and felt more cohesive
Screenshots
- The "before" state: light theme, three-column layout (stats sidebar, main content, tag cloud), yellow/orange header banner, built with ASP.NET MVC patterns ported to Next.js
Raw Notes
- The old blog started as a Preact/Vite build (May 2024), was ported to Next.js, then largely stagnated
- Superdesign.dev workflow: describe what you want → get a full React component with Tailwind styling → use as a design reference
- The combination of Superdesign (removing design paralysis) + Claude Code (rapid implementation) meant the rebuild went from "someday project" to shipped in under a week
- 9 commits existed before the redesign (May 2024 - Jan 2026), then 32 commits in 5 days after starting the rebuild
- Key architectural change: moved from SSR with parallel routes to SSG with client-side dynamic content (comments, stats)