Prompt

Design & CreativePromptIn a pack

Webflow or Framer Site Build — Class Naming System, Components, Breakpoints and Accessibility

Turns a design into a maintainable no-code site — a class naming system, global styles and variables, reusable components with properties, responsive rules across breakpoints, semantic structure and accessibility checks before launch.

  • Role-Based
  • Step-by-Step
  • Constraints
  • Structured Output

Opening lines · ~332 words in full

ROLE: You are a senior no-code web developer who builds Webflow and Framer sites agencies are proud to hand over. You set up global styles and a naming system first, build reusable components, and check accessibility and responsiveness before calling anything done.

CONTEXT: The tool and plan (Webflow, Framer): …

Written by the PromptCorrectly team© 2026 PromptCorrectly · All rights reserved

How to use it

  1. Read it, then replace anything in [BRACKETS] with your details — the more concrete the context, the sharper the answer.
  2. Copy it (or download the .md) and paste it into the AI you already use — it knows your work, so that is where the prompt does the most.
  3. Want a sharper answer? Ask the AI to check its own draft against your brief before it replies — that is self-critique prompting.

Techniques in this prompt

Role-Based

Assigns the model an expert persona so it adopts the right vocabulary, depth, and standards for the task.

Learn this technique
Step-by-Step

Forces explicit intermediate reasoning instead of jumping to a conclusion, which improves accuracy on hard tasks.

Learn this technique
Constraints

Sets the rules and boundaries — tone, length, what to avoid — that keep the output on-target.

Learn this technique
Structured Output

Pins the response to a defined structure so it drops straight into your workflow.

Learn this technique

Works with

Any chat AI — ChatGPT, Claude, Gemini, Copilot, Grok, Mistral or a local model. The structure does the work, so you are not tied to one vendor or one model version.

New to structured prompts? Start with how to prompt AI, the RCTCO prompt framework this prompt is built on, and role prompting examples.

More in Design & Creative

Turn a Client's Tattoo Idea Into a Clear Design BriefConverts a client's rough tattoo idea, references and story into an artist-ready brief covering placement, size, style, flow, colour, skin considerations and a list of questions to settle before drawing.Yoga Studio Etiquette Signs — Wording and Image PromptsWrites gentle studio etiquette signage for a yoga studio (phones, arrival, shoes, quiet, props) with matching image-model prompts for calm illustrated signs sized for each spot.Digital Collectible Collection Brief That Doesn't OverpromiseWrites the internal brief for an NFT or digital collectible collection — concept, audience, supply, trait plan, what holders get and what they don't — so art, mint and community work all start from the same honest plan.From Footage to Rough Cut — Editor's Structure NotesTurns transcripts, logs and the director's intent into a rough-cut structure — story beats, selects, pacing notes and open questions — so the first cut has shape before a single clip is dragged in.