Podcast Title

Author Name

0:00
0:00
Album Art

My New AI-Powered, No-Code Development Workflow

By 10xdev team July 18, 2025

I just discovered a new vibe coding workflow, and that's because I recently started using Replit. You might remember that their apps used to have pretty terrible UI, but that's completely changed now thanks to the ShadCN integration. What this means is that all the UI Replit generates is now built with ShadCN. And honestly, the front ends look amazing.

Instead of using V0, we're going to use Replit for the front end, Claude for brainstorming, and then Windsurf or Cursor, whichever you prefer, to integrate the back end and build the rest of the app. And the best part? This entire process happens without writing a single line of code. Plus, I used voice mode for everything, so this is truly a vibe coding workflow. Let's jump right in.

Step 1: Brainstorming with Claude

First of all, we have Claude, where we'll brainstorm our idea and generate a prompt to build the front end for us in Replit.

Now, here's the prompt. You'll notice that it's not written clearly. That's because I use the built-in macOS voice mode. I never type when using AI these days; I just use voice mode because it's much more efficient.

Note: For better voice transcription, you can use an app like Super Whisper.

What this will do is lay out a structure and provide features relevant to your app. Once you review what it has generated and brainstorm back and forth, you need to ask it to create a final prompt that lists the pages.

When it generates a front-end prompt, it should include both the pages and the modals because that's crucial for building the front end. Also, make sure to specify that it shouldn't generate any code, as that would overcomplicate things if you're using another platform for front-end development.

One important thing I forgot to mention: you also need to specify the front-end tech stack and always ask it to include the pages and modals. Modals are the pop-ups that appear in the UI. Doing this will make the front-end generation much cleaner and error-free.

Step 2: Generating the Frontend with Replit

All right. So you can see that I got the plan from Claude, pasted it here, and told it this was the plan that needed to be implemented. Now, you don't need to explicitly state that this is its task because, well, these systems already understand context.

After I gave it the plan, it suggested integrating additional features like a database and an analytical dashboard. But I didn't want that. I wanted it to stick to the plan and focus only on building the front end. I know that Replit can generate a full app with database integration, but I preferred a more modular system. From experience, I've seen that when implementing a modular system with Replit, it can introduce a lot of bugs. So keeping different tools dedicated to specific tasks and passing work from one to another creates a much cleaner workflow.

I also told it that the API needed to be exposed for the FastAPI back end because that's how Windsurf is going to build on top of the front-end app that Replit generates. Once that was set, it started building the project, and this is what it created.

Now, let me switch over to the dashboard view. The first thing I want to point out is that when using other tools like Cursor or Windsurf, I've noticed that even if they generate a UI correctly, they don't actually make it responsive. That's a huge issue. Even when they use ShadCN to create beautiful UIs, in my opinion, the best thing about Replit is that it generates responsive UIs that not only look great but are also fully functional, as you can see here.

So this is the dashboard view. These are our tasks with a daily and weekly view. You might notice some overlap here, but I'm not too worried about that since it'll be resolved once the back end is fully implemented. Over here we have the settings panel, and you can see that everything is well-structured and neatly planned. That's the result of planning ahead.

If you just ask AI agents to build something without a solid plan, they'll do it. But the result is often a closed system that's hard to build on or scale. Writing code is fun, even when you run into errors because you can keep prompting the agent until you fix them. But the biggest issue is that if scalability wasn't considered from the start, you'll hit a wall later on.

Step 3: Exposing the API

After generating the front end, I also asked it to provide documentation for the APIs it had exposed. This is important because I need to pass that API documentation to Windsurf. With the documentation, they'll be able to implement the backend properly, turning this into a fully functional full-stack app.

Now, how do we get this into Windsurf? I'll explain that as well. First, open the project and reveal the files. Then, click on the three dots, where you'll find an option to download it as a zip file. Once downloaded, extract the files, and you can open them with Windsurf.

Step 4: Integrating the Backend with Windsurf

So, I got the app from Replit. This project didn't have any dependencies installed, so that was the first thing I addressed. I told it that this was a pre-built front end and that it needed to install and set up the dependencies. It started by running the npm install command, and once the dependencies were installed, it launched the front-end server. You can see that the dashboard is up and running.

After that, I provided the API documentation and instructed it to implement the backend using FastAPI. I copied the API documentation from Replit and gave it to Windsurf, and using that, it began implementing the backend and setting up the API endpoints. And it actually got everything right on the first try.

Normally, when I build these kinds of apps, even if I use Cursor to generate the front end, there's always some hallucination when implementing the back end. Even if I start a fresh chat, Cursor often leaves features unimplemented. They show up in the UI but don't actually work. However, I tested this app, and it just works. There were a few console errors and some minor UI issues with the grid layout in the daily and weekly views, but I fixed those.

Now, let me show you the full-stack app that's been built. But before that, I want to highlight some key Windsurf features. This is why I'm doing this article on Windsurf today.

  • Console Logs: You can send console logs directly into Cascade if any issues occur.
  • Select Element Tool: An even crazier feature is the select element tool. Since Windsurf allows you to preview the UI within the app itself, you can use this tool to pinpoint any element directly. For instance, if I select a button, it gets sent to Cascade, which identifies the exact element in the code. This is a big deal because with other tools, if you use a screenshot, the AI has to search the entire codebase to locate the faulty element, which overloads the context. That's not an issue here.
  • Thinking Model: You can also see these thought process chat bubbles because I'm using the Claude 3.7 thinking model for this.

One more thing: Windsurf did, without implementing a database since I didn't want one just yet, build an in-memory storage system with FastAPI. I didn't add a database in this demo, but you can easily add one with Supabase or locally with Postgres. If you're going to use Postgres, just ask Windsurf; it will implement it without any hassle since the front end and back end are already integrated.

The Final App in Action

So, let's go ahead and add a new time box. Now, here's the amazing thing I told you earlier: modals were important. If you simply ask an LLM to plan and generate a prompt for an app, it might include the pages, but it almost never includes the modals. And when that happens, it leaves room for another AI tool to interpret things differently. Every time an AI adds its own structure to the app, it ends up causing problems, leading to either a really bad user experience or missing key functionality.

But here, we clearly defined exactly what we wanted in our modals, and it got implemented properly, including all the necessary fields in the API.

Now, let's actually add a task. I'll call it "working on a thumbnail." I'll skip the description, keep the time as it is, and choose a category, setting it to low priority. You can see that the task was added. Now, let me refresh the page, and you can see that it still persists. The in-memory storage is working.

So this is how I used Replit's incredible UI capabilities with this new workflow, keeping UI generation separate from Cursor or Windsurf. This ensures a clean separation of components while also taking advantage of Replit's beautifully designed, responsive UI.

The Master Prompt

This article incorporates everything I've explained. After brainstorming with Claude or any other AI, you can use a prompt like this to generate a structured request. Then, simply pass it to Replit to create a fully functional front end with exposed API endpoints so you can start developing and scaling your app efficiently.

Here is an example of the prompt structure:

Generate a frontend application based on the following plan.

**Technology Stack:**
- Frontend Framework: React with Next.js
- UI Components: shadcn/ui
- Styling: Tailwind CSS

**Pages:**
1.  **Dashboard Page:**
    -   Display a list of tasks.
    -   View tasks in "Daily" and "Weekly" formats.
    -   A button to add a new task, which opens the "Add Task Modal".
2.  **Settings Page:**
    -   User profile settings.
    -   Notification preferences.
    -   Theme selection (Light/Dark).

**Modals:**
1.  **Add Task Modal:**
    -   Input field for "Task Name" (text).
    -   Text area for "Description" (optional).
    -   Input for "Time" (time picker).
    -   Dropdown for "Category".
    -   Radio buttons for "Priority" (Low, Medium, High).
    -   "Save Task" and "Cancel" buttons.

**API Endpoints (to be exposed):**
- `GET /api/tasks`: Fetch all tasks.
- `POST /api/tasks`: Create a new task.
- `PUT /api/tasks/{id}`: Update an existing task.
- `DELETE /api/tasks/{id}`: Delete a task.

**Instructions:**
- Do NOT generate any backend code or database logic.
- Implement the full UI for all specified pages and modals.
- Ensure the UI is fully responsive and functional.
- Expose the API endpoints for future backend integration.

Join the 10xdev Community

Subscribe and get 8+ free PDFs that contain detailed roadmaps with recommended learning periods for each programming language or field, along with links to free resources such as books, YouTube tutorials, and courses with certificates.

Recommended For You

Up Next