DEV Community

ClawGear
ClawGear

Posted on

35 ChatGPT Prompts for Web Designers: Client Briefs, Design Systems & Front-End Code

#productivity #design #ai #webdev

35 ChatGPT Prompts for Web Designers: Client Briefs, Design Systems & Front-End Code

Web designers live in the gap between creative vision and technical execution. You're interpreting vague client briefs, documenting design decisions, writing UI copy for buttons and modals, explaining front-end specs to developers, and creating presentations that make stakeholders understand why your choices matter.

ChatGPT won't design your mockups. But it will handle the writing-heavy parts of your workflow — turning a 10-minute client call into a detailed brief, generating microcopy variations in seconds, or translating your design rationale into language executives actually understand.

This guide gives you 35 prompts across five categories: client brief interpretation, design specification writing, UI copy and microcopy, front-end code documentation, and client presentation narratives. Each prompt is ready to use — add your context and get a working first draft.

How to Use These Prompts

Add project context before each prompt:

Project type: [SaaS app / e-commerce / portfolio / marketing site / mobile app]
Industry: [fintech / healthcare / e-commerce / B2B SaaS / etc.]
Brand tone: [professional / playful / minimal / bold]
Target user: [describe primary user persona]
Enter fullscreen mode Exit fullscreen mode

The more context you provide, the more tailored and useful the output.

Part 1: Client Brief Interpretation (7 Prompts)

Vague client briefs are the norm. These prompts help you extract clarity, fill gaps, and document requirements before a single pixel gets placed.

Prompt 1 — Brief Expansion from Notes 

I have rough notes from a client discovery call. Turn these into a structured design brief covering: project goals, target audience, key user flows, design constraints, success metrics, and open questions I should follow up on.

Notes: [paste your notes]
Enter fullscreen mode Exit fullscreen mode

Prompt 2 — Stakeholder Goal Alignment 

A client said they want their website to "feel modern and professional." Write 5 clarifying questions I should ask to turn this vague direction into specific design requirements. Frame the questions so a non-designer stakeholder can answer them easily.
Enter fullscreen mode Exit fullscreen mode

Prompt 3 — Competitor Benchmark Brief 

Write a competitive analysis framework for a [type of website] in the [industry] space. Include categories for: visual style, navigation patterns, color palette choices, typography, CTAs, mobile experience, and trust signals. I'll use this to evaluate [number] competitors.
Enter fullscreen mode Exit fullscreen mode

Prompt 4 — Scope of Work Document 

Based on this project brief, write a scope of work document that covers: deliverables, what's included, what's explicitly excluded, revision rounds, timeline milestones, and client responsibilities. Be specific enough that scope creep is prevented.

Brief: [paste brief]
Enter fullscreen mode Exit fullscreen mode

Prompt 5 — User Persona from Demographics 

Create a detailed user persona for a [type of website]. Demographics: [age range, occupation, tech comfort level]. Goals: [what they're trying to accomplish]. Frustrations: [common pain points]. Include a name, photo description, and a typical user journey for this persona.
Enter fullscreen mode Exit fullscreen mode

Prompt 6 — Design Requirements Checklist 

Generate a pre-project design requirements checklist for a [type of project]. Include sections for: brand assets provided, accessibility requirements, browser/device targets, CMS requirements, performance expectations, and third-party integrations. Format as a checklist I can send to clients.
Enter fullscreen mode Exit fullscreen mode

Prompt 7 — Project Kickoff Agenda 

Write a 60-minute kickoff meeting agenda for a [type of website redesign/new build]. Include: icebreaker, project overview review, stakeholder Q&A, design process walkthrough, timeline and milestone confirmation, and next steps. Add discussion prompts for each section.
Enter fullscreen mode Exit fullscreen mode

Part 2: Design Specification Writing (7 Prompts)

Design specs bridge the gap between your Figma file and the final build. These prompts help you document design decisions in ways developers actually use.

Prompt 8 — Component Specification 

Write a design specification for a [component: button / modal / form / navigation bar / card]. Include: states (default, hover, focus, disabled, active), dimensions, spacing values, typography, color tokens, and interaction behavior. Format for a developer handoff document.
Enter fullscreen mode Exit fullscreen mode

Prompt 9 — Design Token Documentation 

I have the following design tokens: [list your tokens — colors, typography, spacing, etc.]. Write documentation for these tokens explaining: what each token is used for, naming convention rationale, and how to use them correctly in code. Include examples of correct and incorrect usage.
Enter fullscreen mode Exit fullscreen mode

Prompt 10 — Responsive Behavior Documentation 

Document the responsive behavior for a [component or layout]. Breakpoints: [mobile: Xpx / tablet: Xpx / desktop: Xpx]. For each breakpoint, describe: layout changes, component adjustments, hidden/shown elements, and any interaction changes. Format for developer handoff.
Enter fullscreen mode Exit fullscreen mode

Prompt 11 — Accessibility Annotation Guide 

Write accessibility annotations for a [screen or component]. Include: ARIA labels and roles, keyboard navigation order and behavior, focus indicators, color contrast requirements, and screen reader text for non-text elements. Format as annotations I can add to my design file.
Enter fullscreen mode Exit fullscreen mode

Prompt 12 — Animation and Transition Spec 

Write animation specifications for [UI element or interaction]. Include: trigger conditions, animation type (fade, slide, scale, etc.), duration, easing curve, delay if any, and reduced motion alternative. Format for CSS implementation.
Enter fullscreen mode Exit fullscreen mode

Prompt 13 — Design Rationale Document 

Write a design rationale document for the following decision: [describe your design choice — layout, color, typography, navigation pattern, etc.]. Explain: the problem it solves, alternatives considered, why this approach was chosen, and any trade-offs acknowledged. Audience: stakeholders with no design background.
Enter fullscreen mode Exit fullscreen mode

Prompt 14 — Icon and Illustration Usage Guidelines 

Write usage guidelines for icons in a [type of product] design system. Cover: when to use icons vs text, sizing system, color usage rules, accessibility requirements, approved icon set and how to request new icons, and anti-patterns to avoid.
Enter fullscreen mode Exit fullscreen mode

Part 3: UI Copy and Microcopy (7 Prompts)

The words in your designs are as important as the pixels. These prompts generate microcopy that fits your brand and helps users complete tasks.

Prompt 15 — Empty State Copy 

Write 5 variations of empty state copy for a [screen: dashboard / inbox / search results / activity feed]. The empty state should: explain what goes here, motivate the user to take action, and match a [tone: friendly / professional / playful] brand voice. Include a headline, body text, and CTA button label for each.
Enter fullscreen mode Exit fullscreen mode

Prompt 16 — Error Message Copy 

Write error messages for these scenarios in a [product type]: [list 5-8 error scenarios — form validation, network failure, permission denied, etc.]. Each message should: clearly explain what happened, tell the user what to do next, and avoid technical jargon. Tone: [helpful / direct / reassuring].
Enter fullscreen mode Exit fullscreen mode

Prompt 17 — Onboarding Copy 

Write onboarding tooltip copy for a [product type] with [number] steps. Each tooltip should: explain what the feature does (1 sentence), tell the user how to use it (1 sentence), and show progress (e.g., "Step 2 of 5"). Feature list: [list the features being introduced].
Enter fullscreen mode Exit fullscreen mode

Prompt 18 — CTA Button Variations 

Generate 10 CTA button label variations for a [action: sign up / start free trial / upgrade / download / schedule demo] on a [product type]. Vary by: urgency, benefit-led, action-led, curiosity-based. Mark which 3 you'd A/B test first and why.
Enter fullscreen mode Exit fullscreen mode

Prompt 19 — Form Label and Helper Text 

Write form labels, placeholder text, and helper text for a [type of form: registration / checkout / profile / onboarding]. For each field: provide a label, placeholder (if useful), helper text for unclear fields, and validation error messages. Keep all copy under 15 words per element.
Enter fullscreen mode Exit fullscreen mode

Prompt 20 — Modal and Dialog Copy 

Write copy for a [type of modal: confirmation / destructive action warning / upgrade prompt / success / error]. Include: headline, body text (max 2 sentences), primary CTA, and secondary action (cancel/dismiss). Write 3 variations — test-friendly, trust-focused, and minimal.
Enter fullscreen mode Exit fullscreen mode

Prompt 21 — Notification and Toast Messages 

Write notification copy for these events in a [product type]: [list 6-8 events — file saved, item deleted, subscription renewed, payment failed, etc.]. Each notification should fit in one line and clearly communicate what happened. Include both success and failure variants.
Enter fullscreen mode Exit fullscreen mode

Part 4: Front-End Code Documentation (7 Prompts)

Handing off to developers goes smoother when your specs are clear and your code comments tell the full story. These prompts help you document front-end work precisely.

Prompt 22 — Component README 

Write a README for a [component name] UI component. Include: description, props table (prop name, type, default, description), usage examples, accessibility notes, and known limitations. Format in Markdown for a component library.
Enter fullscreen mode Exit fullscreen mode

Prompt 23 — CSS Custom Property Documentation 

I have these CSS custom properties: [list your variables]. Write documentation explaining: what each property controls, valid values, where it's inherited from, and usage examples showing correct implementation. Format for a design system documentation site.
Enter fullscreen mode Exit fullscreen mode

Prompt 24 — JavaScript Interaction Documentation 

Document the JavaScript behavior for [UI interaction: dropdown / carousel / accordion / modal / sticky nav]. Include: initialization, event listeners, state management, public methods/API, browser compatibility notes, and dependencies. Write for a mid-level developer audience.
Enter fullscreen mode Exit fullscreen mode

Prompt 25 — Storybook Story Descriptions 

Write Storybook story descriptions for a [component]. For each story variant — default, with [variant A], with [variant B], edge case — write a description explaining: what this story demonstrates, when to use this variant, and any implementation notes.
Enter fullscreen mode Exit fullscreen mode

Prompt 26 — Pull Request Description Template 

Create a PR description template for front-end design implementation PRs. Include sections for: what changed and why, before/after screenshots notes, components affected, design file link, accessibility checks completed, browser testing notes, and open questions for reviewer.
Enter fullscreen mode Exit fullscreen mode

Prompt 27 — Changelog Entry 

Write a user-facing changelog entry for these design system updates: [describe changes — new component added, visual regression fix, breaking change, etc.]. Write separate sections for: New, Changed, Fixed, Deprecated, and Breaking Changes. Audience: designers and developers using the system.
Enter fullscreen mode Exit fullscreen mode

Prompt 28 — Design System Contribution Guide 

Write a contribution guide for our design system. Include: how to propose a new component, the review and approval process, coding standards, documentation requirements, testing expectations, and how to submit a PR. Tone: welcoming for first-time contributors.
Enter fullscreen mode Exit fullscreen mode

Part 5: Client Presentation Narratives (7 Prompts)

Design decisions need to be sold as much as shown. These prompts help you build presentations that stakeholders understand, remember, and approve.

Prompt 29 — Design Concept Presentation Script 

Write a presentation script for presenting [number] design concepts to a client. For each concept, include: concept name and 1-sentence description, the problem it solves, key design choices explained in non-designer language, and a transition to the next concept. End with a decision-making framework for choosing between concepts.
Enter fullscreen mode Exit fullscreen mode

Prompt 30 — Design Decision Justification 

A stakeholder is questioning our decision to [design choice]. Write a 3-paragraph response that: acknowledges their concern, explains the reasoning behind the decision using user experience rationale, and presents data or precedent that supports it. Tone: confident but collaborative.
Enter fullscreen mode Exit fullscreen mode

Prompt 31 — Revision Feedback Response 

A client gave this feedback: "[paste feedback]". Write a professional response that: acknowledges the feedback, clarifies what we'll change, pushes back constructively on anything that conflicts with the design goals, and confirms next steps. Keep it under 200 words.
Enter fullscreen mode Exit fullscreen mode

Prompt 32 — Design Review Meeting Summary 

Write a meeting summary email for a design review meeting. Decisions made: [list]. Feedback received: [list]. Action items: [list with owners and deadlines]. Open questions: [list]. Send to: client stakeholders. Format: professional email, scannable with bullets.
Enter fullscreen mode Exit fullscreen mode

Prompt 33 — A/B Test Proposal 

Write an A/B test proposal for testing [design element: headline / CTA / hero image / navigation / checkout flow]. Include: hypothesis, control variant description, test variant description, success metric, minimum sample size rationale, and test duration recommendation. Format for stakeholder review.
Enter fullscreen mode Exit fullscreen mode

Prompt 34 — Portfolio Case Study Outline 

Write a case study outline for a project where I redesigned [type of product]. Include sections for: project overview, the problem and business context, discovery and research methods, design process and key decisions, final solution walkthrough, results and metrics, and lessons learned. Add prompts in each section for what to write.
Enter fullscreen mode Exit fullscreen mode

Prompt 35 — Design Handoff Checklist 

Create a design handoff checklist for handing off a [type of project] to a development team. Include checks for: Figma file organization, component completeness, responsive specs documented, interaction states covered, assets exported, accessibility annotations added, and dev notes written. Format as a checklist with checkboxes.
Enter fullscreen mode Exit fullscreen mode

Take Your Workflow Further

These 35 prompts are a starting point. The designers getting the most value from ChatGPT use it consistently — not for one-off tasks, but as a built-in layer of their workflow.

If you want a complete library of prompts organized by profession and workflow stage, check out the full collection at pinzasrojas.gumroad.com.

Use code LAUNCH30 for 30% off — it's our launch discount and won't last forever.

Have a prompt that's been working well in your design workflow? Drop it in the comments — the best ones might make the next edition.

Top comments (0)