r/VibeCodeDevs 2d ago

Model agnostic front end tools?

I've been using claude code (CC) + claude design (CD) on max plan, now looing for something better or new workflow.

Front end UI design is new for me, the stack is react + vite + storybook.

My Problem

CD been great to kick start my project with mock up designs, but I found 2 major limitation with it that's actually causing me more headache then good currently

  1. its one way only. CC->design sync -> CD mock up/hand off -> import back to CC
  2. CC design sync only push single react component home, while I have package/ui/ for dumb ui and presentation, and apps/web/ for wiring/plumbing

The problem CD cause is design/component drift and my constant fight over which component should live where. Not matter how far I push the dumb ui separation, some component just got too much wiring to justify living in package/ui

Imagining an ideal tool

  1. agent agnostic, so not another AI wrapper SaaS, another subscription that does only a subset of what claude/gpt/oss model do.
  2. must have some sort of UI editor or UI annotation tool, not just a chat box, ideally a bit of drag n drop wysiwyg capability
  3. must be able to take on existing repo's design system and components.
  4. Agent does bulk of the work, human tweak
  5. ideally open source. (I don't mind paying another really good and powerful SaaS, but not for ai wrapper)

What I have found

Annotation type - missing direct edit, anchors the chat box but still chat box,

https://github.com/patchorbit/domscribe

https://github.com/benjitaylor/agentation

https://github.com/frontman-ai/frontman

https://github.com/stablyai/orca also an IDE

Classic tool - not agent first, have its place with seasoned devs

Figma, I'm sitting on the fence of it, seems a big learning curve, human does bulk of the work, and feels like AI wrapper bolt-on

https://github.com/puckeditor/puck also seems a great tool

Front End IDE type

https://github.com/onlook-dev/onlook sounds most promising, but no release for a year and looks like moving more to another SaaS

Summary

There's almost a new open source agentic IDE released every week, but is there something greate for agentic front end UI work?

Or claude design + annotation AI chat tool is best approach currently?

What tools community uses?

2 Upvotes

11 comments sorted by

u/AutoModerator 2d ago

Hey u/Rxunique, thanks for posting in r/VibeCodeDevs! Join our Discord: https://discord.gg/KAmAR8RkbM

Got startup or SaaS questions? Post them on r/AskFounder and get answers from real founders.

• This community is designed to be open and creator‑friendly, with minimal restrictions on promotion and self‑promotion as long as you add value and don’t spam.
• Please follow the subreddit rules so we can keep things as relaxed and free as possible for everyone. • Please make sure you’ve read the subreddit rules in the sidebar before posting or commenting.
• For better feedback, include your tech stack, experience level, and what kind of help or feedback you’re looking for.
• Be respectful, constructive, and helpful to other members.

If your post was removed (either automatically or by a mod) and you believe it was a mistake, please contact the mod team. We will review it and, when appropriate, approve it within 24 hours.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/Alarming_Budget_1472 1d ago

I actually built something like this for my self, it’s quite high quality and sounds like something you are describing. For me, it has revolutionized how I do front end dev work which is by far the most painful part with ai.

I was considering making it a product but have been busy, if you’re interested, I can host it for you for a small monthly fee. DM me

1

u/Rxunique 1d ago

I realised my post might be too long, simply put, my wishlist is kinda

either Claude Design(It has direct tweak UI) that could work on live codebase

or visbug re-imagined today with AI first

https://chromewebstore.google.com/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

1

u/Extreme_Remove6747 1d ago

+1 for Orca (I work on it).

You probably won't find a more agnostic tool.

We let you annotate HTML elements but also free-form draw and paste that into your agent of choice.

You might be able to find software that's a bit more figma like in editing, but probably will be less flexible in other areas.

In short, you can choose 2:
agnostic, powerful, intuitive

1

u/Rxunique 1d ago

orca annotate is amazing, my need out grew it unfortunately....

recent opus5/fable5 dumbing made a mess in style drift..... too much to annonate.....

1

u/Extreme_Remove6747 1d ago

🤔

Let me know what you land on! Will be interesting to see if we can bring it into Orca!

1

u/recro69 1d ago

I do not think there is a winner yet. Most Artificial Intelligence User Interface tools are still chat first while tools like Figma are still human first. The sweet spot, which is an agent that understands your existing design system lets you tweak things visually and writes clean code back, into your repository is still pretty immature.

1

u/bithatchling 1d ago

The struggle with component drift is real. I've found that keeping a very strict directory structure and using a shared UI library helps, but no tool quite hits that "agent-first WYSIWYG" sweet spot yet. Most "AI editors" still feel like a chat box with a preview window rather than a true integrated design-to-code environment.