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
Answer 3 questions and Léa tailors the prompt to your situation.
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
Write a color system rationale
Document color system decisions
Perplexity Prompt for Generating Advertising Visuals
Perplexity AI, with its augmented search capabilities and advanced contextual understanding, becomes a valuable ally for designing impactful advertising visuals. Unlike traditional image generation tools, Perplexity allows you to anchor your creative briefs in real market data: current visual trends, industry color codes, platform-specific high-performing formats. By crafting precise prompts, you can obtain detailed visual descriptions, structured creative briefs for your designers or generative AI tools, and even composition recommendations based on what actually works in your industry. The approach leverages Perplexity's integrated web search to feed each creative decision with concrete data, avoiding generic visuals that drown in the advertising feed. Whether you are preparing a Meta Ads, Google Display, or LinkedIn Sponsored campaign, a well-constructed prompt transforms Perplexity into an augmented art director capable of producing actionable and differentiating visual briefs.
GitHub Copilot Prompt for Creating YouTube Thumbnails
GitHub Copilot, GitHub's AI-powered code assistant, can be a formidable ally for generating striking YouTube thumbnails directly from your code editor. By leveraging its code generation capabilities, you can create automated scripts that produce professional thumbnails in HTML/CSS, using Canvas API, or via libraries like Sharp, Jimp, or Puppeteer. Whether you're a content creator looking to industrialize your thumbnail production or a developer wanting to build a thumbnail generation tool, Copilot significantly speeds up the process. It understands your project context, suggests suitable visual compositions, handles text overlays with eye-catching effects, and proposes click-optimized color palettes. This page provides optimized prompts to get the most out of GitHub Copilot for YouTube thumbnail creation, with variants suited to each technical expertise level.
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.