Before we start here're few other pages of same web app: - Sign up page - Sign in page You can see the style consistency.

For this new UI workflow I used 3 tools. 1. CodeGuide 2. Claude·ai 3. v0 I used @CodeGuidedev to write the coding documentation. For UI design I use: 1. PRD 2. Frontend Guidelines For quality code and style consistency and quality "coding documents" are important.

After generating docs with CodeGuide I go to Claude AI web app. Claude Sonnet 3.7 (thinking) model works great in Claude Web app due to their heavy system prompt. Sonnet 3.7 is the best model right now to code UI components Steps: - Open Claude·ai - Start a new project

After Starting a new project, I attach 2 documents that I generated from CodeGuide These docs serve as a 'Knowledge base' for Claude to understand: - what the project is all about? - what tech stack I am using? - what's my style guidelines? Upload PRD + Frontend Guidelines doc

You're set now. Now start asking it to code the UI components step by step for all pages like: - Landing page - Sign up page - Login page - Dashboard - Settings - Help etc Tip: Use new chat for each new page (within the project) to save message requests Claude coded this: ↓

Now copy the code of this component. And got to v0. Open a new chat. Prompt: "run this code: (paste the code)" v0 will load the component 10/10 times. Now you can start refining the style. v0 refined the above component to this: ↓ (for backgrounds I use midjourney)

Once you're good with this component. do the same for other pages. Tip: Always open a new chat in v0 and Claude both. Steps: 1. Ask Claude to code new page component. Copy the code. 2. Open new chat in v0. Paste the code. Refine the UI. Sign in + Dashboard pages: ↓

With 2-3 hours you'll have your complete frontend coded. Now you need to use Cursor/Windsurf and just paste the code for each page there. Cursor Agent and Cascade are good to analyze code, chop it and paste it in relevant files in file structure.

TL;DR 1. Use @CodeGuidedev to generate Coding Docs 2. Use Claude AI to code individual components 3. use v0 to load components and refine 4. Paste code in Cursor/Windsurf to stitch frontend There you go, your frontend is ready This new UI workflow saved me alot of time + tokens Every tool has its superpower. Work smartly and build fast. If you like this tutorial, share this and I'll be creating more for you. Peace.