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.
Learn more
Check the full skill on Prompt Guide to master this technique from A to Z.
View on Prompt Guide📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Similar Prompts
Sora Prompt for Creating a Brand Style Guide
Sora, OpenAI's video and visual generation model, opens up unprecedented possibilities for creating brand style guides. Traditionally reserved for experienced designers mastering tools like Adobe Illustrator or Figma, designing a cohesive visual identity can now be initiated thanks to artificial intelligence. By formulating a precise prompt, you can generate inspiration boards, harmonious color palettes, typographic proposals, and visual elements that form the foundation of a professional style guide. Sora's advantage lies in its ability to produce visually consistent outputs, which is essential for a unified brand identity. Whether you are an entrepreneur launching your project, a marketing manager looking to refresh your image, or a designer seeking to accelerate your ideation phase, the prompts on this page will guide you step by step. You will learn how to structure your instructions to obtain usable results: from color selection to defining the visual tone, including variations across different media. The goal is to transform an abstract vision into concrete and coherent graphic elements.
Evaluate Climate Impact on Architectural Design
Analyze climate impact on your architectural projects and integrate resilience strategies from the design phase.
Write Impactful Advertising Copy
Writes persuasive advertising copy by exploring multiple creative angles using the AIDA method.
Claude Prompt for Creating YouTube Thumbnails
YouTube thumbnails are the first visual element viewers see before clicking on a video. An effective thumbnail can double or triple your click-through rate, making it one of the most powerful growth levers on the platform. Claude excels at thumbnail design thanks to its ability to generate precise visual descriptions, balanced compositions, and catchy text tailored to your niche. By using Claude as a creative assistant, you can quickly iterate on thumbnail concepts, get high-contrast color recommendations, structure visual hierarchy, and write short, emotionally impactful text. Whether you are a beginner creator or an established YouTuber, Claude helps you systematize your thumbnail creation process to produce visuals that are consistent with your brand, optimized for mobile, and designed to trigger the click. This guide provides ready-to-use prompts to turn Claude into a true art director for your YouTube thumbnails.