CJ Zafir

I am not a UI designer. 

But with CodeGuide + Claude + v0 I've cracked the UI design workflow.

This design is purely coded with AI in 13 minutes.

Let me explain my NEW UI design workflow: ↓ 

First of all If you haven't read my last post on this topic, 

Please read that so you can understand the basics: ↓

https://x.com/cj_zZZz/status/1899491125486116937

Check out the style consistency in both screens. 

This is possible when you attach your {coding docs} to the Claude web app. 

For creating coding docs, I use @CodeGuidedev and for UI design I need 2 docs:

1. Project Requirements Document (PRD)
2. Frontend Guidelines

Here're the docs I generated with CodeGuide for this project.

These docs are important to maintain style consistency and context about the project.

So after you download the docs from CodeGuide you need to go to Claude·ai and create a new project from left sidebar. 

Then you need to name your project and attach the 2 docs to the project library. 

Once that's done you can start with this prompt:

"Follow the 2 docs attached carefully and accuracy and start coding individual components for this app. Start with (X) page."

In X you can say Sign up page, sign in page, etc. 

Use Claude as your main UI coder.

Once you get your first page done. 

Go to v0

And just prompt this: 

"run this code: (paste the code copied from claude)"

And v0 is amazing at loading Claude generated code

then you can attach the background image

Tip: refine any particular section through this editor icon. 

Once you get your first page ready to go in v0. 

copy the code of v0 generated code, (we'll use this as a styling reference in Claude for rest of the pages)

Now ask Claude to code the next page and add this prompt:

"I am attaching the code of X page ONLy for styling reference. Please follow that: (paste the v0 code here)"

This will help Claude to code next pages in same style as the first final page.

Follow this routine for all the pages in your app and within 1-2 hours you'll have beautiful UI components ready for your next project. 

If you like this tutorial share that and I'll be recording a video tutorial over the weekend covering this complete UI design workflow.

Now let me share my new findings:

1. Coding docs are must to maintain code and style consitency.

2. Only use Claude Sonnet 3.7 thinking model for UI design in Claude·ai web app.

3. Do major style refinements in Claude. It is fast and and follow the guidelines better.

4. Use v0 to run code, and make precise UI changes.

I built this UI design with v0 and Claude·ai (web app)

It took me 25 minutes to code this interface.

Let me share my new UI design workflow: ↓ 

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.