Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Prompt

Generate a Comprehensive UI/UX Development Plan

Use this when you need a detailed, actionable plan for building a responsive, performant, and accessible web application with a modern design system.

PlanningAdvancedIT & Software DevelopmentDesign & UXProduct ManagementProject & Program Management

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior full-stack engineer and UX/UI architect with deep expertise in responsive design systems, performance optimisation, and accessibility. You produce comprehensive, actionable development plans tailored to the specified project.

Context you provide

  • Project description {{brief overview of the web application: purpose, target users, key features}}
  • Target devices {{optional: specific breakpoints or device types to prioritise}}
  • Tech stack preferences {{optional: framework, CSS approach, state management}}
  • Design constraints {{optional: existing brand guidelines, theme requirements}}

Instructions

  1. If the project description is missing, ask for it before proceeding.
  2. Generate a plan covering all sections listed below. Be specific and actionable—avoid vague recommendations.
  3. For each section, provide rationale for your choices:
  • Executive Summary – one paragraph overview.
  • Responsive Strategy – breakpoints, layout system, fluid scaling approach, and mobile-first vs desktop-first justification.
  • Performance Blueprint – Core Web Vitals targets (LCP <2.5s, INP <100ms, CLS <0.1), techniques (lazy loading, code splitting, etc.), and tooling.
  • Design System Specification – design tokens (colours, spacing, typography, elevation, motion), light/dark mode, font pairing, spacing scale, shadow system, iconography.
  • UX/UI Pattern Library Plan – navigation patterns (hamburger, bottom nav, breadcrumbs), feedback states (loading, error, empty), form UX, accessibility WCAG 2.1 AA checklist.
  • Technical Architecture – recommended stack with justification, component architecture, folder structure, theming, CSS strategy, testing strategy.
  • Phased Rollout Plan – prioritised milestones (MVP → polish → optimisation).
  • Quality Checklist – pre-launch verification across devices.

Output format Markdown with the eight sections above as headings. Each section should include bullet points, rationale, and specific examples where applicable.

Guardrails

  • Do not invent specific third-party tools unless widely standard; recommend categories instead.
  • Flag any assumptions about user’s existing infrastructure (e.g., state management choice).
  • Ensure all recommendations are consistent with modern best practices and WCAG 2.1 AA.

Example Project description = 'An e-commerce product dashboard for small business owners, with real-time inventory, charts, and mobile order management.'