I built this Interface entirely with AI in 47 minutes. (without...
CJ Zafir@cjzafir
74 views
Mar 10, 2025
~2 min read
Advertisement
1
I built this Interface entirely with AI in 47 minutes.
(without writing a single line of code)
I used 2 tools:
1. Claude AI (web app)
2. Cursor AI
Here's a step-by-step guide on how I built this app:
(without writing a single line of code)
I used 2 tools:
1. Claude AI (web app)
2. Cursor AI
Here's a step-by-step guide on how I built this app:
2
1. Write a detailed Project Documentation
If you want:
- consistent design
- high quality code
- less hallucinations
you need to write "project coding documents" to provide context to AI.
I use @CodeGuidedev to write docs, that includes:
- PRD
- app flow doc
- frontend guidelines
- backend structure
etc.
If you want:
- consistent design
- high quality code
- less hallucinations
you need to write "project coding documents" to provide context to AI.
I use @CodeGuidedev to write docs, that includes:
- PRD
- app flow doc
- frontend guidelines
- backend structure
etc.
3
2. Attach docs to Claude App
Claude web app is doing what v0 was doing brilliantly before - designing high quality UI components.
I used Sonnet 3.7 (thinking) and it is super fast and design modern UI components:
(v0 is now super slow and make errors sometimes)
Claude web app is doing what v0 was doing brilliantly before - designing high quality UI components.
I used Sonnet 3.7 (thinking) and it is super fast and design modern UI components:
(v0 is now super slow and make errors sometimes)
4
Steps for Claude app:
1. Create a new project on Claude
2. Attach coding docs (PRD, app flow doc, etc)
3. Write simple custom instructions "design me individual UI components based on the docs"
4. Start asking it to design components one-by-one.
1. Create a new project on Claude
2. Attach coding docs (PRD, app flow doc, etc)
3. Write simple custom instructions "design me individual UI components based on the docs"
4. Start asking it to design components one-by-one.
5
3. Setup Cursor AI
I used @CodeGuidedev NextJS Starter kit to kickstart the project in 4 clicks.
Then created "Instructions" folder in root directory and attached all coding docs.
Then start pasting the code from Claude app to Cursor Agent.
I used @CodeGuidedev NextJS Starter kit to kickstart the project in 4 clicks.
Then created "Instructions" folder in root directory and attached all coding docs.
Then start pasting the code from Claude app to Cursor Agent.
6
Claude web app is super fast and Sonnet 3.7 thinking is the best model to design UI components.
So I designed section by section:
- Top navigation bar
- Hero Section
- Search bar
- Menu bar
- Cards
Claude → Cursor saved me alot of time and design quality was superb.
So I designed section by section:
- Top navigation bar
- Hero Section
- Search bar
- Menu bar
- Cards
Claude → Cursor saved me alot of time and design quality was superb.
7
In 47 minutes I had the UI design ready with backend attached (using supabase)
Cursor Agent is amazing when you build a "context boundary"
I wrote a thread about that few days back.
Cursor Agent is amazing when you build a "context boundary"
I wrote a thread about that few days back.
CJ Zafir@cjzafir
How I made my Cursor/Windsurf workflow ultra productive with "Context Boundary" Technique:
(Bookmark this for future reference) ↓
(Bookmark this for future reference) ↓
8
"Building Blocks" is our new addition to CodeGuide.
We built our own 21st·dev
You will get pre-built:
- UI components
- landing pages
- app templates
You'll be able to 1-click copy components and use with any AI coding tool.
We're just adding more and more components.
We built our own 21st·dev
You will get pre-built:
- UI components
- landing pages
- app templates
You'll be able to 1-click copy components and use with any AI coding tool.
We're just adding more and more components.
9
TL:DR
1. Write "Project Coding Docs" using @CodeGuidedev
2. Attach docs to Claude app (create new project)
3. Setup Cursor using CodeGuide Starter kit
4. Create "Instructions" folder and attach docs
5. Start creating UI components in Claude app
6. Copy code and paste in Cursor
1. Write "Project Coding Docs" using @CodeGuidedev
2. Attach docs to Claude app (create new project)
3. Setup Cursor using CodeGuide Starter kit
4. Create "Instructions" folder and attach docs
5. Start creating UI components in Claude app
6. Copy code and paste in Cursor
10
Join codeguide.dev here - Home of 3778 AI Coders
Enjoy Limited 40% discount on Yearly Membership - Only $199 right now.
Create project docs
Use starter kits
Use templates
Community
Discounts
AI Agent
and more features and partnerships are coming...
Enjoy Limited 40% discount on Yearly Membership - Only $199 right now.
Create project docs
Use starter kits
Use templates
Community
Discounts
AI Agent
and more features and partnerships are coming...