Turn a reference into an original design.

A useful AI web design workflow begins with a clear brief and ends with a page someone has inspected. This PageBrowser guide explains how to work with an external coding assistant while keeping design decisions and acceptance checks visible.

Write the acceptance criteria

Describe the audience, purpose, required content, and main action on the page. Add examples of the visual direction and name the elements that must remain consistent. State how the layout should behave on narrow screens. Give the assistant these requirements before asking for code.

Inspect the implementation

Review the generated structure, styles, and dependencies. GitHub’s Copilot documentation warns that code can look valid while failing to match the developer’s intent, and advises review and testing. Check that headings form a logical outline, controls have clear names, and images have appropriate text alternatives.

Compare the page with the brief

Open the result at different viewport sizes and try its links and controls with a keyboard. Check visible focus, readable text, contrast, and content order. Compare each requirement with the rendered page, record gaps, and revise. Keep a working version so you can inspect later changes against an approved baseline. Ask the reviewer to confirm both the visible result and the code that produces it before publishing.

For the underlying guidance, see Application card: GitHub Copilot Chat | GitHub Docs.

Write a brief a person could use

State the audience, the page’s purpose, the information it must contain, and the action that should be possible. Include constraints such as static hosting, supported devices, accessible navigation, and the content you actually have permission to use.

A focused prompt to adapt

Create an original webpage for the audience and purpose described in my brief. Use the supplied text and assets. Organize the content into a clear introduction, useful details, and a working next step. Use semantic HTML, responsive CSS, visible keyboard focus, and descriptive link labels. Flag missing facts instead of inventing business claims. Explain any functionality that needs a separate service. Use references only to understand design principles, not to copy their branding, wording, or artwork.

Review the draft in passes

Content: verify facts, claims, contact information, labels, and sources.
Structure: confirm a logical heading order and useful navigation between completed destinations.
Behavior: check links, controls, keyboard use, and the mobile layout.
Presentation: refine type, spacing, image treatment, and contrast around the actual content.

For a practical starting point, open the webpage templates. For stronger reference notes, use the web design browsing guide.