Back to blog
·5 min read·noprod

Build Your First Site with noprod in 5 Minutes

Sign up, create a workspace, tell Claude what to build, and have a live website. Step-by-step, no coding required.

tutorialvibe-codingbeginnersgetting-started

What You'll Build

By the end of this tutorial, you will have a live portfolio website with a hero section, a projects grid, and a working contact form that saves messages to a database. All without writing a single line of code.

Here is what you need before starting:

  • A Claude subscription (Pro or Max) from Anthropic, or a ChatGPT subscription (Plus or Pro) from OpenAI
  • About 5 minutes of your time
  • That is it. No IDE, no local setup, nothing to install
Note:

If you do not have a Claude subscription yet, sign up at claude.ai. You need Pro or Max to use Claude in your noprod workspace. Alternatively, use a ChatGPT Plus or Pro subscription for the ChatGPT agent.

Step 1: Sign Up & Create a Workspace (~30s)

Go to noprod.dev and create an account. You can sign up with email or Google.

Once you are in the dashboard, click New Project. Give it a name like "my-portfolio", select Claude as your AI agent, and hit Create.

Your workspace will spin up in about 30 seconds. You will see a split screen: your AI agent on the left and a live preview of your site on the right. The preview already has a working URL — your site is live from the moment you create it.

Step 2: Log Into Claude (~30s)

When your workspace loads, it will show a login URL. It looks something like this:

To sign in, open this URL in your browser:
https://claude.ai/oauth/authorize?...

Click the URL. It opens in a new tab where you sign in with your Anthropic account. Once you approve access, switch back to the noprod tab. Your workspace will confirm that Claude is connected and ready.

Claude is ready. Type a message to start building.

You are now talking directly to Claude inside your cloud workspace. Everything you type is a prompt, not a command.

Step 3: Build the Hero Section (~1min)

Type this prompt into your workspace:

Build a portfolio hero section with my name, a short tagline,
and a gradient background. Use dark theme.

Claude will read your project files, generate the HTML and CSS, and write them directly to your workspace. You will see it working in real time — file edits scroll by on the left, and your live preview updates automatically.

Within about 30 seconds, your site goes from a blank page to a polished hero section with your name centered on a gradient background.

Note:

The live preview refreshes automatically every time Claude makes changes. No need to reload manually.

Step 4: Add a Projects Grid (~1min)

Now tell Claude to add more content. Type this prompt:

Add a projects section below the hero with 6 project cards
in a grid. Use glassmorphism style with frosted glass effect.

Claude will add a full projects section with six cards, each featuring a title, description, and frosted glass styling with backdrop blur effects. The grid is responsive — it looks good on desktop and mobile.

Note:

Want even better design results? Use the /ui-ux-pro-max skill by starting your prompt with it. This activates a specialized design mode that produces more polished, production-quality layouts.

Step 5: Add a Contact Form with Database (~1min)

Here is where it gets interesting. Type this prompt:

Add a contact form that saves messages to the SQLite database.
Include name, email, and message fields.

Claude will create a contact form and write the backend logic to store submissions in a SQLite database. Your noprod workspace comes with SQLite built in, so there is nothing to configure. Claude knows this and uses it automatically.

After Claude finishes, try submitting a test message through the form in your live preview. The data is saved to a real database running in your workspace.

Note:

Every noprod workspace includes SQLite out of the box. No database setup, no connection strings, no external services. It just works.

Step 6: Polish with /ui-ux-pro-max (~1min)

Your site works, but let's make it look professional. Type this prompt:

/ui-ux-pro-max review and improve the entire site with a modern
SaaS palette and Inter + Space Grotesk fonts

The /ui-ux-pro-max skill tells Claude to act as a senior UI/UX designer. It will review every section of your site and apply consistent improvements: better spacing, a cohesive color palette, professional typography with Inter for body text and Space Grotesk for headings, improved hover states, and smoother transitions.

This single prompt often makes the difference between "looks like a side project" and "looks like a real product."

What to Build Next

You just built a full portfolio site in about 5 minutes. But this is just the starting point. Here are some ideas for your next project:

  • A blog — ask Claude to add a blog section with markdown-powered posts
  • An e-commerce storefront — product cards, a cart, and checkout flow
  • A SaaS landing page — hero, features grid, pricing table, and FAQ accordion
  • A dashboard — charts, tables, and data visualizations with mock data
  • A link-in-bio page — perfect for social media profiles

Each of these can be built the same way: describe what you want, let Claude build it, iterate until you are happy.

Ready to Start?

You are 5 minutes away from having a live website. No code to write, no environment to configure, no deployment to figure out. Just sign up, create a workspace, and start describing what you want to build.

Create your first project on noprod and see how fast you can go from zero to a live site. Your workspace comes with a public URL from day one — share it with anyone, from anywhere.

Have questions? Reach out on X/Twitter or check the docs for more guides and examples.