This Claude 3.7 UI workflow is awesome And many vibe coders not aware of it: 1. Have Claude 3.7 to design whole UI screen by screen 2. Ask it to make a plan, break down into components 3. Turn into actual project By having Claude focus on just UI... generation, it does a great job You can build beautiful UI without shadcn If you want to learn more about vibe coding beyond basics, join my community here: (also get free access to 10xCoder.Dev)show more

🔴 Yes, I built these two apps with these methods, and it was even Sonnet 3.5 (This is not an ad; these two apps are for women, and this community %99 men😄)

Bro it's get too tuff to debug when it breaks. Maybe be ok for new project or generating complex big boilerplates But not for pro project yet

am I missing something? It creates these UIs for the web but these are mobile apps? that would anyway need to be implemented native or through x-plat solutions? where exactly does this fit in the development process? are you saying this is the new way to design?

Thank you this is useful, also the initial context is very useful: Role You are a senior front-end developer. Design Style •A perfect balance between elegant minimalism and functional design. •Soft, refreshing gradient colors that seamlessly integrate with the brand palette. •Well-proportioned white space for a clean layout. •Light and immersive user experience. •Clear information hierarchy using subtle shadows and modular card layouts. •Natural focus on core functionalities. •Refined rounded corners. •Delicate micro-interactions. •Comfortable visual proportions. •Accent colors chosen based on the app type. Technical Specifications 1.Each page should be 375×812 PX, with outlines to simulate a mobile device frame. 2.Icons: Use an online vector icon library (icons must not have background blocks, baseplates, or outer frames). 3.Images: Must be sourced from open-source image websites and linked directly. 4.Styles: Use Tailwind CSS via CDN for styling. not display the status bar, including time, signal, and other system indicators. not display non-mobile elements, such as scrollbars. 7.All text should be only black or white. Task This is an AI Calorie Calculator app where users can take pictures of food and auto-extract nutrition data. •Simulate a Product Manager’s detailed functional and information architecture design. •Follow the design style and technical specifications to generate a complete UI design plan. •Create a UI.html file that contains all pages displayed in a horizontal layout. •Generate the first two pages now.

I’m interested in your community as I have a big vision but very little coding skill. I have learned quite a lot about vibe coding through trial and error but could definitely use help. Is this useful for beginners? Is there a community platform to connect with others? Do you help directly at all?

Great job, Jason!

Love this, I didn't realize claude was that good at doing UI. Will add to Well done

👏 Excellent 👌

This guy i fucking love it

That’s impressive