1. Say who it is for and what it should do
“Build a modern website” leaves the most important decisions open. Start with the business or project, the people visiting it, and the action you want them to take. A portfolio asking for enquiries needs a different structure from a shop helping someone compare products.
Try: “Create a website for an independent ceramics studio. The audience is people buying a handmade gift. The main action is to browse a small collection and understand how each piece is made.” This describes a purpose before it describes a colour.
2. List the pages and real content
Name the essential pages and the sections each one needs. For a small service business, that might be a homepage with an introduction, services, selected projects, process and contact section. For a publication, it might include a destination index and article pages.
Provide approved copy, product details and image descriptions where you can. If something is missing, ask for an obvious placeholder. Do not ask a builder to invent customer quotes, certifications, client logos or performance numbers.
3. Give the design a small set of constraints
Describe the visual direction in concrete terms: a pure white background, generous spacing, readable dark text, restrained green accents and large editorial headings. Explain whether the atmosphere should feel quiet, playful or technical, and connect that choice to the audience.
Specify behaviour as well as appearance. Ask for a readable mobile layout, clear keyboard focus and motion that respects reduced-motion preferences. A reference can communicate a direction, but use your own branding, imagery and content.
4. Put it together in one useful prompt
Build a portfolio website for an independent brand designer working with small hospitality businesses. The goal is to encourage qualified project enquiries.
Include a short introduction, three selected case studies, a services section, a simple process and a contact section. Use labelled placeholders where project copy or images are missing. Do not invent client testimonials.
Use a white background, charcoal text, generous spacing and a muted green accent. Make the work images prominent and keep motion subtle. On mobile, stack the content clearly and keep the enquiry action easy to find.
For now, make this a visual prototype. Label the contact form as a preview until delivery, validation and spam protection are connected.
In Ocacity today, this kind of brief helps you explore a curated starting point. The current workspace simulates generation; it does not yet send the prompt to an AI model.
5. Review one decision at a time
Start with structure and content. Can a first-time visitor understand the offer? Is the main action clear? Does the order of sections answer their likely questions? Only then refine spacing, typography, colour and motion.
A useful revision is specific: “Move the case studies above the services, shorten the introduction to two sentences, and keep the contact action visible after the projects.” Changing one related set of decisions makes it easier to see whether the result improved.
6. Separate a visual preview from a working product
A convincing interface does not prove the underlying system works. A store needs inventory and payment handling; a dashboard needs trustworthy data and permissions; a contact form needs a working delivery path.
- Test navigation, forms and empty or error states.
- Check the site on a phone and with a keyboard.
- Replace sample content and confirm image permissions.
- Test authentication and authorisation wherever private data is involved.
- Review page titles, descriptions and share previews.
- Connect, test and monitor the real hosting and backend services.
Ocacity can export a standalone HTML snapshot of the current preview. Treat that export as a starting artifact to review, not evidence of a deployed or production-ready system.