P

ChatGPT Prompt for Creating UI Design

User interface (UI) design is an area where ChatGPT can become a valuable assistant, even if it doesn't generate visual mockups directly. By precisely describing your needs—type of application, target audience, color palette, desired components—you get detailed specifications, page structures, design system recommendations, and even frontend code ready to integrate. ChatGPT excels at transforming a vague idea into a structured interface architecture: visual hierarchy, element placement, typographic choices, spacing system, and navigation logic. The AI can also generate HTML/CSS/Tailwind code or React components faithful to your specifications. Whether you are a designer looking to accelerate the ideation phase, a developer wanting a solid starting point, or an entrepreneur creating an MVP, these prompts allow you to go from idea to concrete prototype in minutes instead of hours.

The prompt

ChatGPT

Act as a senior UI/UX designer with 10 years of experience. I want to create the interface of a [TYPE_OF_APPLICATION: e.g., a project management SaaS application]. Target audience: [e.g., project managers in SMEs, 30-45 years old]. Desired style: [e.g., modern, clean, professional]. For each screen I request, provide: 1) The detailed page structure (layout, grid, sections) with visual hierarchy, 2) The list of necessary UI components with their states (default, hover, active, disabled), 3) Design token recommendations (colors, typography, spacing, border-radius), 4) Responsive and accessible HTML + Tailwind CSS code (mobile-first), 5) Suggested micro-interactions and animations. Start with the main dashboard. Adhere to WCAG 2.1 AA principles for accessibility. Use a consistent design system throughout the project.

Personalize this prompt with Léa

Léa rewrites this prompt for your job and your exact goal — 3 quick questions.

Why it works

This prompt works by assigning a precise expert role that activates the model's specialized knowledge in UI design. The structure in 5 numbered deliverables forces a comprehensive and organized response, while the variables in brackets allow contextual personalization. The mention of concrete standards (WCAG 2.1, design tokens, mobile-first) anchors the responses in professional best practices.

Expected result

You will obtain a complete specification of your interface: page structure with responsive grid, list of components with their state variants, coherent color palette and typographic system, as well as functional Tailwind CSS code. The result is directly usable for prototyping in Figma or implementing in code.

Variants by level

FAQ

Can ChatGPT really create visual UI designs?
ChatGPT cannot generate visual mockup images directly, but it produces detailed specifications, text-based wireframes, and frontend code (HTML, CSS, Tailwind, React) that you can integrate immediately. For visual mockups, combine ChatGPT with DALL-E or use the generated code in a browser to get instant visual rendering. The code-first approach is often faster than traditional mockup tools.
How to get consistent results across multiple screens?
First ask ChatGPT to define a complete design system (color palette, typography, spacing, reusable components) before designing individual screens. Reference this design system in each subsequent prompt by saying "Following the previously defined design system." You can also copy the design tokens into the context of each new query to maintain consistency.
What level of code can ChatGPT produce for UI design?
ChatGPT can generate vanilla HTML/CSS code, Tailwind CSS, React, Vue, or Svelte components, as well as design system configurations (JSON token files, Tailwind themes). The code is generally functional and responsive, but requires review for edge cases, fine accessibility, and performance optimization. For production-ready results, specify your tech stack and accessibility constraints in the prompt.

Related prompts

How to use this prompt

  1. Copy the prompt with the button above.
  2. Paste it into ChatGPT, Claude or your favorite AI assistant.
  3. Replace the bracketed variables with your details, then refine the result.

About Prompt Guide

Prompt Guide is a free library of 4800+ ready-to-use prompts for ChatGPT, Claude and other AIs, with guides to learn prompting and tools to build and optimize your own prompts.

More prompts to explore

ChatGPT Prompt for Creating YouTube Thumbnails

YouTube thumbnails are the first visual element your viewers see before clicking on a video. An eye-catching thumbnail can make the difference between an ignored video and viral content.

ChatGPT Prompt for Data Analysis

Data analysis has become an indispensable strategic lever for businesses and professionals. Yet extracting relevant insights from raw datasets remains a technical challenge that usually requires skills in statistics, programming, or specialized tools like advanced Excel, Python, or R. ChatGPT radically transforms this approach by allowing anyone to analyze complex data through natural language instructions.

ChatGPT Prompt for Evaluating Skills

Skills assessment is a central issue for recruiters, managers, and trainers. Traditionally time-consuming and subjective, this process can be significantly improved with ChatGPT.

ChatGPT Prompt for Generating Advertising Visuals

Creating advertising visuals is a major challenge for any company looking to stand out on social media, display, or print. With Cha

ChatGPT Prompt for Grading Papers

Grading papers is one of the most time-consuming tasks for teachers, trainers, and tutors. Between spelling mistakes, grammar errors, stylistic awkwardness, and content evaluation, each paper can take 10 to 30 minutes of meticulous work. ChatGPT radically transforms this process by offering a fast, structured, and consistent first pass of correction. The AI can identify language errors, assess argumentative quality, check coherence, and provide personalized pedagogical feedback. Unlike a simple spell checker, ChatGPT understands context, analyzes text structure, and can adapt its feedback to the student's level. It doesn't replace the teacher's judgment but saves considerable time by automating the mechanical part of grading. Used intelligently, it allows more time for personalized support and qualitative feedback that truly helps students progress. Here is an optimized prompt to fully leverage this capability.

ChatGPT Prompt for Optimizing SEO

SEO (Search Engine Optimization) is a fundamental lever for generating qualified organic traffic to your website. Yet mastering all its facets...

Go further

Get new prompts every week

Join our newsletter.