Claude Can Build Your Whole Website From One Prompt. We Tried It.

Step 1: We opened Claude and set up a fresh chat

We went to Claude.aisigned in and started a new conversation. Our test used Claude Sonnet 5.5 (Medium) on the Free plan, as shown in our session. We used Claude’s Artifacts preview to see the site take shape beside the conversation.

There was no repository to connect, no domain to buy and no starter template to upload. We deliberately began with a blank chat so we could judge what Claude did with our instructions alone.

Step 2: We picked a website that would actually test Claude

A one screen landing page would have been too easy. We chose an AI tools discovery website with a directory, categories, search, featured listings and mobile navigation. We also wanted a calm, premium design: off white background, deep charcoal text and subtle violet details, rather than another crowded template full of flashy gradients.

Most importantly, we asked Claude to use fictional sample tools. That gave us realistic cards to test without presenting made up products or testimonials as real businesses.

Step 3: We gave Claude one detailed prompt

This is where the experiment began. Instead of sending lots of small instructions, we wrote one complete brief covering appearance, page sections and the interactions we expected. Then we clicked Send and let Claude decide how to build it.

The exact first prompt we used

"You are a senior product designer and frontend engineer. Build a premium, modern AI tools discovery website called "ToolNest".

OBJECTIVE
Create a polished, fully responsive, interactive website that looks like a real, professionally designed SaaS startup product. This should not look like a generic AI-generated template.

DESIGN DIRECTION
- Premium editorial SaaS aesthetic inspired by polished modern product directories.
- Warm off-white background (#FAFAF8), deep charcoal typography (#171717), restrained violet accents (#6957E8).
- Excellent whitespace, strong visual hierarchy, refined typography, consistent spacing and subtle gradients.
- Beautiful, custom-feeling tool cards with tasteful icons and hover states.
- Avoid clutter, excessive gradients, repetitive sections, random emojis and generic stock imagery.
- Make the site feel carefully art-directed and distinctive.

WEBSITE STRUCTURE
1. Sticky navigation with ToolNest logo, Explore Tools, Categories, About and Submit a Tool.
2. Premium hero section with a compelling headline, short description, search field and two calls to action.
3. Curated featured tools section.
4. Searchable directory with at least 18 realistic fictional AI tools, short descriptions, categories, pricing labels and visually distinct cards.
5. Functional category filters (Writing, Design, Coding, Productivity, Marketing and Research).
6. Featured collection or Editor's Picks section.
7. A short, elegant How It Works section.
8. An interactive FAQ accordion.
9. Newsletter signup section.
10. Professional multi-column footer.

FUNCTIONAL REQUIREMENTS
- Working live search that filters the tools by name and description.
- Working category filters with an All option.
- Working tool detail views or meaningful interactions when selecting tool cards.
- Functional navigation and mobile menu.
- Responsive design for desktop, tablet and mobile.
- Clear empty state when no search results match.
- Keyboard-accessible interactive controls where possible.
- No broken buttons or dead links; where a real backend or external service is required, clearly identify the feature as a demo instead of pretending it is functional.

CONTENT
Use believable but fictional product names and descriptions. Do not invent real customer testimonials, ratings or business claims. Clearly mark sample/demo data.

IMPLEMENTATION
Build the complete interactive website as a previewable Claude Artifact using the available supported technologies. Do not merely describe the design or generate a static mockup.

QUALITY STANDARD
The result should look ready for a professional product demo, with attention to alignment, typography, visual rhythm, card consistency, responsive behavior and intuitive UX.

This is a single-prompt experiment. Make reasonable decisions independently, do not ask follow-up questions, and deliver the most complete working prototype possible."

The prompt was long, but that was intentional. The test wasn’t whether Claude could read our minds. It was whether it could turn one clearly written specification into a usable website without further guidance.

Step 4: The first website looked like a real product demo

Once the Artifact preview loaded, ToolNest already had the feel of a small startup website. The headline had personality, the spacing was comfortable, and the tool cards were easy to scan. It looked more considered than we expected from a single message.

Claude had also populated the directory with 18 fictional AI tools. That’s an important distinction: it created a working front end demonot a live platform connected to a database. Newsletter signup and tool submission were demo concepts, not real services behind the buttons.

Step 5: We tested the categories and search

We wanted to know whether the directory actually worked, so we started clicking. Our first attempt at searching returned zero results, but we noticed we’d left the Coding category selected while searching for writing. That wasn’t proof the tools were missing. It was simply a combination of filters with no matches.

After clearing that combination, we selected the Writing category. The directory narrowed to three tools. We could still see their names, descriptions and pricing labels.

Next we switched back to All and typed Quillmate into the search box. The site displayed “Showing 1 of 18 tools” and returned the matching card. So both category filtering and name search passed our basic hands on check.

We didn’t test every link or every possible search combination. These two checks confirmed the features we actually tried, not the entire site’s functionality.

Step 6: Mobile testing revealed the first real problems

The desktop preview had made a good first impression. Then we opened Chrome’s device mode and reduced the viewport to mobile widths. At 375pxparts of the layout stretched beyond the screen. Some text was clipped, a horizontal scrollbar appeared, and dark buttons had labels we could barely read.

That was exactly why we wanted a hands on test. A website can look polished in a wide preview and still feel awkward on a phone.

Step 7: We used a second prompt to fix the mobile design

Rather than rebuild ToolNest, we told Claude precisely what had gone wrong and asked it to keep the original design and all 18 sample listings. This time the task wasn’t creation, but repair.

Our exact mobile fix prompt

""Review and fix the mobile responsiveness issues in the existing ToolNest website.

At a 375px viewport, the page has horizontal overflow, clipped hero text and a search bar extending beyond the screen. The Search button and primary Explore Tools button have black backgrounds but invisible labels.

Fix these issues while preserving the existing desktop design, all 18 sample tools, search functionality, category filters and website sections.

Ensure proper text wrapping, responsive widths, visible button labels, and no horizontal scrolling at 320px, 375px, 425px and tablet widths.""

Do not redesign the website. Update the existing artifact and briefly explain the changes.

The updated preview looked noticeably better. At 320pxthe heading wrapped properly, button text was visible and the obvious overflow was gone. The search placeholder still looked a little cramped, so it wasn’t perfect, but the usability improvement was clear.

And this matters for the headline: the first website came from one prompt; the improved mobile version took two. We wouldn’t describe the corrected version as a flawless one prompt result.

Step 8: We tried to share the website

With the prototype ready, our next thought was obvious: could we send someone a link and let them try it?

We copied the Artifact link and opened it in an Incognito browser window. Instead of a public website, we saw a sign in screen. In the account and interface we tested, Artifact sharing wasn’t available on our plan. We also checked a Permissions menu, but that turned out to be about connector access, not public website access.

So we couldn’t treat that copied link as a freely accessible website URL. That limitation is worth knowing before promising a client a ready to share site.

Step 9: We exported the website as HTML

We went back to the Artifact and opened Export. Claude offered an HTML, Standalone web page option, which we used to download the ToolNest prototype.

The downloaded file packaged the interface and its resources into one HTML document. That’s useful because it moves the work out of the chat. But downloading HTML and deploying a maintained public website aren’t the same thing. We did not establish a live production backend or verify a public hosted version during this experiment.

So, did Claude build the whole website from one prompt?

It built an impressive interactive prototype from one prompt. ToolNest had an attractive layout, populated sample cards, working category filtering and a working name search in the tests we performed. We didn’t write the website code ourselves.

But “whole website” needs context. The mobile layout required a second prompt. The tool data was fictional. Real signup, submissions, hosting and ongoing maintenance were still outside what we demonstrated.

What stayed with us wasn’t just the first result. It was how easy it felt to point at a specific problem, explain it in plain language and get a better version without opening a code editor.

If you want to explore a product idea or create a clickable front end concept, this is genuinely useful. If you want to launch a business website, plan for testing, real content, accessibility checks, deployment and the usual development work around it.

Our verdict: Claude made the first draft surprisingly easy. The final polish still needed a human eye.

Experiment: November 2026 · Claude Sonnet 5.5 (Medium) · Free plan · All ToolNest directory entries were fictional demonstration data.

For more on the feature itself, see Claude’s Artifacts documentation.