Building Himo
An AI-Native workflow: from concept to deployment in record time.
The Context: Escaping WordPress
Relying on WordPress often comes with a heavy cost: plugin dependency. Features require plugins, plugins add bloat, and updates risk breaking the site. Customization can feel like fighting the platform rather than building on it.
Moving to a custom Next.js stack restores control. No more black boxes or "update and pray" scenarios. Just clean, semantic code that is fully owned, resulting in a site that is significantly faster, more secure, and infinitely more flexible.
The Stack
- Next.js 15 (App Router)
- React 19 & TypeScript
- Tailwind CSS 4
- Framer Motion
- Vercel Deployment
The Workflow
- ➜Model Efficiency StrategyLeveraging different IDEs to access specific models helps avoid exhausting single-platform token limits.
- ➜Cursor (Composer)Used for high-level planning and "what-if" scenarios. The Composer model is excellent for drafting initial architectures.
- ➜Antigravity (Opus)Heavily using Claude 3 Opus via Antigravity for execution, complex logic, and deep refactoring.
From Blank Page to Vercel
Concept & Hero
Starting with a blank directory, the goal was to establish a "vibe" first. The Hero section went through multiple iterations, testing typographic scales and subtle patterns until it felt premium yet understated.
The "Checking Your Work" Loop
Unlike traditional coding, the process involved tight feedback loops. Describing a component prompted the AI to scaffold it, followed by immediate browser verification. Animations were tweaked in real-time to perfect the physics.
Mobile Refinement
Once desktop adhered to the vision, the layout was extensively tested on various mobile viewports to ensure grid layouts collapsed gracefully and touch targets remained accessible.
Collaborating with AI
Working with AI allows for prioritizing speed and reliability without cutting corners.
- Tailwind CSS: Utilization of Tailwind is efficient for LLMs. It generates accurately, reducing context switching and ensuring a consistent design system without managing large stylesheets.
- Next.js App Router: Choosing the App Router enables a clear separation of concerns, isolating server-side logic from client-side interactivity to reduce hydration error risks.
- TypeScript: TypeScript serves as a safety net, allowing the AI to "check its own work" before code execution, catching type mismatches early.
React Performance Audit
Auditing the site using React Best Practices involved delving deeper than simple metrics, looking for architectural improvements.
Layout Thrashing
Discovery that animating layout properties like `height` caused jank. Switching to animate `transform` and `opacity` enabled smoother animations.
Client vs Server Boundaries
Identification of excessive hydration of static content. Pushing content to Server Components (RSC) reduced the JavaScript bundle size significantly.
Cumulative Layout Shift (CLS)
Images initially loading without explicit dimensions caused content jumps. Enforcing aspect ratios reserves space before assets load.
Font Loading Strategies
Optimizing font loading using `next/font` eliminated flashes of unstyled text and improved page stability.
What's Next: CMS Integration
Currently, all content is static. The next major milestone is connecting a headless CMS to empower dynamic content management, removing the need for code commits to update text.