MethodDesign & CreativeWeb & UI designIntermediate

Design a web page (wireframe to UI)

A section-by-section web design: wireframe, visual system, components and responsive behaviour.

This is a practical, copy-paste process for designing a homepage, landing page or product page.. Use it when you want a clear structure, then add your own details and the linked evidence.

Published by Deepstory Research. Reviewed Sep 2026.

How to use this method

1. Copy or downloadCopy the prompt below, or download the method file and attach it to your chat.
2. Paste into any AIChatGPT, Claude, Gemini or Copilot. Replace each [PLACEHOLDER] with your details, or let the AI ask you.
3. Add evidenceAttach the evidence files listed on this page so the AI works from sourced numbers, not guesses.

The prompt

Paste it as-is. The AI will ask for anything still in [BRACKETS].

Download .md

# Design a web page (wireframe to UI)
Method by Deepstory Research: deepstoryresearch.com/method/web-page-design

You are a senior web and UI designer. Follow the method below step by step. Goal: A section-by-section web design: wireframe, visual system, components and responsive behaviour.

## My inputs
- Page purpose: [PAGE_PURPOSE]  (example: SaaS pricing page)
- Audience: [AUDIENCE]  (example: startup founders)
- Brand: [BRAND]  (example: colours, fonts, references)
- Content: [CONTENT]  (example: paste copy or draft)

Before you start: if any input above is still in [BRACKETS] or missing, ask me for it in one short numbered list and wait. Do not guess. If I attached files (data, briefs, Deepstory evidence files), treat them as the primary source.

## Steps to follow
1. Define the page goal and primary action.
2. Lay out sections as a wireframe in text.
3. Define visual system: grid, type scale, colour tokens, spacing.
4. Specify components and states.
5. Describe mobile vs desktop behaviour.
6. Give accessibility notes.
7. Produce a prompt for an AI design or code tool.

## Deliver the output in this structure
- Goal
- Wireframe
- Visual system
- Components
- Responsive notes
- Accessibility
- Build/design prompt

## Quality rules
- WCAG AA contrast, 44px touch targets, visible focus states.
- Label every number as FACT (with source and date), ESTIMATE (show the calculation) or ASSUMPTION.
- If a Deepstory evidence file is attached, use its figures as the reference values and cite its source references; tag claims that are not from it as [UNVERIFIED].
- End with: the 3 assumptions that matter most, what would change the answer, and the single best next step.

What you need to give the AI

Input	Placeholder	Example
Page purpose	[PAGE_PURPOSE]	SaaS pricing page
Audience	[AUDIENCE]	startup founders
Brand	[BRAND]	colours, fonts, references
Content	[CONTENT]	paste copy or draft

Use it when

Designing a homepage, landing page or product page.

What you get

Goal
Wireframe
Visual system
Components
Responsive notes
Accessibility
Build/design prompt

The procedure, step by step

Read this before you run it, so you can check the AI actually followed the method.

1
Define the page goal and primary action.
2
Lay out sections as a wireframe in text.
3
Define visual system: grid, type scale, colour tokens, spacing.
4
Specify components and states.
5
Describe mobile vs desktop behaviour.
6
Give accessibility notes.
7
Produce a prompt for an AI design or code tool.

Quality checks built into the prompt

• WCAG AA contrast, 44px touch targets, visible focus states.
• Every number labelled FACT, ESTIMATE or ASSUMPTION; claims outside attached evidence tagged [UNVERIFIED].

Evidence for this method

This method runs on your own material: your files, brief or code. If your task needs market or economic numbers, attach a sourced context file from the evidence library alongside the prompt.

Browse evidence

Run next

Methods that chain well after this one.

Technology & DevelopmentBuild a website or landing page with AIA site plan, copy, section structure and the exact code-generation prompts to build and deploy it.Design & CreativeRun a UX auditA heuristic UX review with severity-ranked issues and redesign recommendations.Design & CreativeDesign an app onboarding flowAn onboarding flow that gets new users to value fast, with screens, copy and metrics.

Deepstory methods are process guidance for AI tools. Review AI output before relying on it; legal, tax, medical and investment decisions need a qualified professional.