ChatGPT Prompt for Creating a UI Design
User Interface (UI) design is an area where ChatGPT can become a valuable assistant, even if it doesn't directly generate visual mockups. By precisely describing your needs — app type, target audience, color palette, desired components — you get detailed specifications, page structures, design system recommendations, and even ready-to-integrate frontend code. ChatGPT excels at turning a vague idea into a structured interface architecture: visual hierarchy, element layout, 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're a designer seeking to speed up ideation, a developer wanting a solid starting point, or an entrepreneur creating an MVP, these prompts let you go from idea to concrete prototype in minutes instead of hours.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
Act as a senior UI/UX designer with 10 years of experience. I want to create the interface for a [APP_TYPE: e.g., project management SaaS]. Target audience: [e.g., project managers in SMBs, 30-45 years old]. Desired style: [e.g., modern, clean, professional]. For each screen I ask you, 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 (mobile-first) HTML + Tailwind CSS code, 5) Suggested micro-interactions and animations. Start with the main dashboard. Follow WCAG 2.1 AA accessibility principles. 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 this prompt works
This prompt works by assigning a precise expert role that activates the model's specialized knowledge in UI design. The structure with 5 numbered deliverables forces a comprehensive and organized response, while the variables in square brackets allow contextual customization. The mention of concrete standards (WCAG 2.1, design tokens, mobile-first) anchors the responses in professional best practices.
Use Cases
Variants
Expected Output
You will get a complete specification of your interface: page structure with responsive grid, list of components with their state variants, consistent 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.
Frequently Asked Questions
Can ChatGPT really create visual UI designs?
ChatGPT doesn't generate mockup images directly, but it produces detailed specifications, text-based wireframes, and frontend code (HTML, CSS, Tailwind, React) you can use immediately. For visual mockups, combine ChatGPT with DALL-E or render the generated code in a browser for instant visual output. The code-first approach is often faster than using a traditional mockup tool.
How can I 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 request to maintain consistency.
What level of code can ChatGPT produce for a UI design?
ChatGPT can generate vanilla HTML/CSS, 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, thorough accessibility, and performance optimization. For a production-ready result, specify your tech stack and accessibility constraints in the prompt.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
Pour affiner le résultat, ajoutez une phrase décrivant l’identité de marque (ex. « palette de couleurs basée sur le bleu #2A7DE1 ») ou le vocabulaire UX à respecter (ex. « libellés courts, tons neutres »). Cela évite les sorties trop génériques et améliore la cohérence visuelle dès le premier écran.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Rush Fee Justification
Charging appropriately for urgent projects
GitHub Copilot Prompt for Creating Infographics
GitHub Copilot, the AI-powered coding assistant, proves to be a formidable ally for generating SVG, HTML, and CSS code to create visually impactful infographics. Instead of starting from a blank page in a design tool, you can precisely describe the desired structure, data, and style directly in your code editor. Copilot then generates the necessary markup — from bar charts to timelines, flow diagrams, and statistical compositions. This programmatic approach offers several advantages: reproducibility, versioning via Git, dynamic data customization, and export in multiple formats. Whether you are a developer looking to integrate visuals into technical documentation, a marketer creating communication materials, or a data analyst seeking to make your data readable, GitHub Copilot transforms your textual descriptions into structured and aesthetic infographics. The following prompts will guide you to fully leverage this capability, from simple explanatory diagrams to complex multi-section infographics with consistent color palettes and controlled visual hierarchy.
Write a design brief
Kick off design projects clearly
Gemini Prompt to Create a Logo
Gemini, Google's multimodal artificial intelligence, offers remarkable capabilities for logo creation thanks to its advanced understanding of language and visual design. Whether you're an entrepreneur launching a new brand, a freelancer looking to quickly prototype visual identities, or a designer seeking to explore creative avenues, Gemini can generate professional logo concepts from precise textual descriptions. The tool excels particularly at interpreting complex creative briefs, combining typographic style, symbolism, color palette, and brand positioning. By crafting a structured prompt that details your industry, brand values, and aesthetic preferences, you will obtain coherent and actionable logo proposals. This approach does not replace the work of a professional designer for finalization, but it significantly accelerates the ideation phase and allows you to arrive at meetings with concrete visual concepts rather than mere abstract descriptions.