Building
interactive artifacts.

Describe the thing, not the tech

Open a new chat and say what you want in plain language. Focus on what it should do and who it is for, not on frameworks or code.

“I want a page where my community can rate a product out of five stars, leave a comment and see everyone else’s reviews.”

That is a complete, usable starting prompt. The more specific you are about the outcome, the less back and forth you need later.

Let Claude ask, then answer plainly

Claude will often ask one or two quick questions before building, like what fields to include, whether something needs approval, or where it should live. Answer in the same plain language. You are not expected to know the technical implications. That is Claude’s job.

Hand over your brand

To get something that looks like it belongs with your other tools, give Claude something concrete to match, not just “make it teal.” The most reliable way is to upload an existing branded file (an HTML page, a screenshot, a brand guide) and say:

“Match this branding exactly.”

Claude will pull the real colours, fonts and spacing from it instead of guessing.

If you do not have a file yet, give the specifics directly: exact hex codes, font names and one or two words for the feel you want, such as clean, confident or playful.

Look at the first version before you trust it

Claude will build a working preview right in the chat. Open it, click around, try to break it. Submit a test entry if it saves data. This is the fastest way to catch problems early.

Give feedback with screenshots, not descriptions

When something looks off, a screenshot is far more precise than trying to describe it in words. Take one, drop it in the chat, and say what is wrong in a sentence, for example:

“The text isn’t lined up with the header above it.”

Claude can see exactly what you see and fix the real cause, not a guess at it.

Export and deploy

If this is your first time deploying, create a free account at netlify.com before you start. You will need it partway through the deploy steps.

Once you have your final, ready-to-deploy artifact, create a folder on your computer to hold the files, then ask Claude for the code to move everything it gives you from Downloads into that folder.

Once your files are saved, tell Claude exactly where that folder is and ask for step-by-step deployment commands from that location (see the “Deploying from a saved folder” prompt below).

Ask for the commands one at a time if you are less comfortable in a terminal, and paste back exactly what you see after each one, including any errors. Claude will catch problems as they come up rather than you needing to debug them alone.

Treat the live version as the real test

Something that works in a local preview does not always behave identically once deployed, since storage, images and file paths can all shift. Open the real live link, try the actual flow a visitor would, and report back anything unexpected with a screenshot and the exact error text from the terminal if there is one.