Codemod Take-Home

Objective

Spend up to 3 hours to rebuild the UI skeleton for the first 3 core steps (with up to 5 as a bonus) of the logged-in user experience, inspired by bolt.new, using mocked data (see lo-fi mocks below). We're looking to see how you approach product polish and interaction flow in a modern, AI-assisted environment.

What We’re Looking For

We're especially excited to see your eye for UI detail and smooth animations and micro-interactions. As the AI agent transitions through these four states, we want the experience to feel thoughtful and alive:

1. Initial Landing – a clean page with a single text box 2. Thinking / Planning – subtle indicators of the AI processing intent 3. Code Generation – showing structured output/code on the right 4. Preview State – rendering the resulting page

Smooth transitions between states will be a key evaluation point.

Think of this as designing the interface of a product where magic feels tangible.

Expectations & Scope

- Budget up to 3 hours for this task - Prioritize polish over completeness – it’s okay to leave some parts stubbed or faked - You can use any code AI assistant (e.g. Copilot, Cursor, etc.) to help accelerate - Feel free to use any framework you’re most comfortable with, though we tend to use React + Tailwind internally

Deliverable

Use this stackblitz repo as your starting point. It's built with Next.js and shadcn-ui, but it doesn't have animations or a polished UI yet. Your job is to finish up the UI and add smooth animations (you can use libraries like framer motion) to make it look clean and slick, like what you see on bolt.new.

Looking forward to seeing how you bring this to life!

!Screenshot 2025-05-23 at 10.50.57 AM.png

!Screenshot 2025-05-23 at 10.51.29 AM.png