Website Design Prompts for ChatGPT

Give ChatGPT the website brief

Specify the audience, purpose, sections, supplied copy and primary action. Describe the visual direction with a few concrete choices. Protect product facts, prices and existing links, and ask it to flag missing information instead of inventing testimonials or functionality.

Request files and inspect the available preview

Ask for named files and instructions for opening them. OpenAI documents HTML previews in the file viewer where that feature is available. If your session returns code instead, save and open it locally. Sites is a separate building and hosting workflow; a prompt alone does not publish a website.

Refine a specific visible problem

Report the viewport, affected section and expected result. For example, fix a specimen that overflows at 320 pixels while preserving desktop typography and links. Inspect the changed output; an explanation of a CSS change is not a browser verification.

Hand off the result with its limits

Give the coding agent the actual files, brief, asset list and unresolved issues. Ask it to inspect the existing framework and routes before implementing. Preserve authentication, pricing and backend contracts, then check the main action, mobile layout and keyboard behavior in the real project.

Original exercises you can adapt

These original Neruve examples remain in English. They are proposed inputs, not tested tool outputs or paid template prompts. Replace the fictional facts before using them.

Create an original website brief for Fieldnote, a fictional research-notes app.
Audience: small product teams. Explain collect → compare → decide.
Output: one self-contained HTML/CSS file if your current tools can create files;
otherwise provide complete code and explain how to open it locally.
Use warm paper, ink text and one clearly fictional research-note specimen.
Sections: introduction, specimen, three-step workflow and a closing workflow link.
The primary action is “Explore the workflow” and targets #workflow.
Include semantic headings, a skip link, visible focus and reduced motion.
Support 1280, 390 and 320 px. Do not add signup, prices, customer logos or metrics.
List the output files and the checks actually performed.

Review the current Fieldnote output. At 320 px, the note specimen extends
beyond the viewport. First identify the specific element and sizing rule.
Change only the specimen layout; preserve desktop typography, all copy and links.
Use wrapping or responsive sizing instead of hiding content or clipping the page.
Return the changed file, then repeat 320, 390 and 1280 px checks.
If you cannot open the result in a browser, mark those checks as not performed.
Do not describe proposed CSS as a verified fix.

A real exercise: Fieldnote with Codex

Fieldnote includes an original brief, the unchanged Codex HTML and desktop/mobile checks. No frontend-design Skill was supplied; this is not a ChatGPT or Claude Design test.

Common questions

Explore designs and paired prompts

Neruve's public catalog offers website designs, available paired prompts and a skills directory. Interactive previews are available without signing in; paired prompts follow the item and plan access rules. This workflow uses your own coding tool and does not require a public Neruve site generator.

• Explore library
• SaaS Landing Page HTML Templates & Prompts
• Designer Portfolio Website Templates with HTML Source

Official references

• OpenAI · Files and previews
• OpenAI · Sites

Third-party tools and skills belong to their respective authors. These links are references, not a claim of partnership or bundled access.