Turn a website idea into a first version you can open

Finish one small, real page first, then check it on a phone, test the links and look at the published result. Treat "it's built" and "it works" as two separate checks.

Which tool

Suggestions by task, not a tested ranking. If a tool you already have can do the job, keep using it.

Tool	When to use it	Watch out for
Lovable	You don't have a code project and want to describe what you need in the browser, see a preview and publish from the platform.	Generating and publishing are two separate steps. Check the website for plans, credits and custom-domain conditions.
Claude Code	You already have a project and want the AI to read the code, change files and run checks directly.	It needs your project and a working environment. After the code changes you still have to review and publish.
Codex	You already have a code repository and want a coding assistant to make a specific change.	Start with a preview or a branch, then review the changes. Access permissions and the environment it runs in affect how it works.

How to do it the first time

Be clear about the visitors and what the page is for. “An introduction and sign-up page for my book club” gives far more direction than “make a high-end website”. List what must appear on the page and the one main action, such as viewing the event details.
Give it real content first, then describe the style. Start with the title, description, times and links, then mention colours, spacing and examples you like. If you don’t have something yet, say to use a placeholder, so that invented content doesn’t end up on the real page.
Fix one specific problem per change. For example: “On phones the two columns are squashed together; make it one column and keep the desktop layout.” Say where it is, what’s wrong and what should change, and keep a previous version you can go back to.
Publish once the preview passes, then open the real link. Check the links, buttons, content and the layout on a narrow screen first. Lovable has a publish button; if you already have a code project, use the way you normally deploy it. After publishing, open the link in a new browser window to see what visitors will see.

Prompts to copy

Replace the parts in square brackets with your own situation, then attach your material.

The task

Please build the first version of a one-page website.
Visitors: [who it's for]
Goal: [what visitors should know or do after reading it]
Must include: [real content and links, in order]
Style: [a short description; you can attach examples]
Requirements: easy to read on both computers and phones; every button goes somewhere real; mark missing content as "to be added".
Don't add log-in, payments or a database in this first version.
When you're done, give me a preview I can look at and explain how to publish and check it. If this is an existing project, keep using its current technology and deployment setup.

Example

An illustrative example written by our editors to show the shape of a good result; not a recorded output from a specific tool.

What you give it

An introduction page for a book club: title "Reading Together at Weekends", online discussions every Sunday afternoon, book list to be decided, main button links to the group's existing sign-up form.

A good result looks like

The first version should have four parts: title and one-line description, meeting time, book list [to be confirmed], sign-up button. To accept it: reads as a single column on a phone; the button opens the real sign-up form; no made-up member counts or reviews; the live address opens in a new window.

Check and adjust

The text, images and links come from the material you provided.
Buttons really do what they say, and forms aren’t just a picture of a form.
Nothing is squashed on a phone, the text is readable and the navigation works.
The published link opens, and you know where to make changes later.

If the result is off, you can follow up like this:

Check and fix

Compare the result with my original requirements and list what's done and what isn't. Check every internal link, button and the narrow-screen layout. List the problems first, then fix them. Don't add new features.

Next steps

Once the first version is stable, add one feature at a time. If it involves accounts, orders or storing data, agree on the flow and how to test it separately, rather than adding everything in one change.