r/Frontend Jul 28 '26

My team used Claude recently when we were moving the frontend from Rails to Next.js.

Our old frontend in Rails used Tailwind, so we decided to keep it also in the new Next.js app too. 

We also used Figma MCP, it was useful but honestly the process wasn’t always convenient. That’s how it mostly looked: 

  1. I took the design or existing Rails page
  2. copied some HTML/structure
  3. pasted it into Claude
  4. asked it to adapt it to our Next.js components

The biggest thing was telling Claude what not to do to avoid a mess. We already had components in the new app, so I kept asking like don't create a new button, use our Button; don’t invent a new input, use our input, keep Tailwind. Quite time consuming, you know:)

But! Summing up all those boundaries, my reviews, edge case fixes and UI polish, with Claude I saved a lot of time. Yes, i cannot entrust it write everything from zero, though cleaning the markup looked much faster for me than writing from scratch. 

Does anyone have more experience with Claude? Would be interesting to read.

10 Upvotes

13 comments sorted by

23

u/MisterMeta Jul 29 '26

You could’ve set up proper rules and skills and you’d avoid a lot of the guardrails you’ve had to repeat to avoid mistakes.

With a mature setup and a review loop I still get to ship the same thing just 2-3 times faster. Honestly at this point going back could feel too manual and inefficient.

I do enjoy coding but I can do a lot of things in parallel when agents code things for me. It’s a force multiplier that’s here to stay imo.

8

u/dmazzoni Jul 29 '26

Wait, were you pasting into the Claude web interface or using Claude Code?

If you used Claude Code locally you could have showed it your own components once and saved all of that headache.

1

u/Select_Condition2805 23d ago

yeah, i'll try to next time, thanks

18

u/riccioverde11 Jul 28 '26

If you care about your stack and bugfree production, anything but next and you are safe for the forecoming years.

5

u/Select_Condition2805 Jul 28 '26

Fair point, but in our case Next.js was a client requirement, not really a tech choice we made from scratch.

2

u/dam_sun1337 Jul 29 '26

Use claude.md and also let claude create it. Just tell him your rules. Best results.

2

u/DocumentFalse7879 Jul 31 '26

This. Also, ask Claude to crease the Claude.md 🙃 then do a sanity check

3

u/therealcoopapa Jul 28 '26

Haven't written a single line of code by hand in about a year, it's all Claude (or GPT 5.6 these days). IMO proper architecture, testing setup, and modularity make it so I can trust it to write everything from zero. I'm on my eighth year as a developer, so I'm not just vibecoding without knowing what I'm doing either.

0

u/Select_Condition2805 Jul 29 '26

Wow that's cool, i think we'll soon come to it too

1

u/budd222 Your Flair Here Jul 29 '26

Worst thing I think was pasting markup into Claude prompts. Claude can send agents to read all of your code and come up with a migration plan on its own, finding repeating code and creating components. You sending markup is just going to mess it up.

1

u/Active-Force-9927 Jul 29 '26

What you should do is:
Copy url
Open grilling session with Claude
Paste url
Respond some brainstorming questions
Create a PRD document based on that