Gemini Prompt for Creating a UI Design
Gemini, Google's artificial intelligence, stands out as a powerful tool for user interface design. With its multimodal capabilities, Gemini can generate detailed UI mockups, propose complete design systems, and even produce functional front-end code. Whether you are a designer looking to speed up your ideation phase or a developer wanting to quickly prototype an interface, Gemini offers remarkable flexibility. The AI understands fundamental design principles—visual hierarchy, accessibility, responsive design—and can apply them to your specific projects. By crafting precise prompts that describe the usage context, target audience, and technical constraints, you will get immediately actionable results. This guide provides an optimized prompt to create professional UI designs with Gemini, along with variants adapted to your expertise level and project complexity. You will discover how to structure your requests to obtain consistent, aesthetic, and functional interfaces while adhering to modern design best practices.
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 15 years of experience. I want to create the interface design for [APP_TYPE: SaaS, e-commerce, mobile app, dashboard...] targeting [TARGET_AUDIENCE]. The main goal of this interface is to [GOAL: convert, inform, engage...]. Generate a complete UI design including: 1) A color palette with hex codes (primary, secondary, accent, background, text) justified by color psychology. 2) Typography with Google Fonts recommendations for headings and body text, with sizes and weights. 3) The detailed layout of the main page with the placement of each element (header, hero section, content sections, CTA, footer). 4) Required UI components (buttons, cards, forms, navigation) with their states (hover, active, disabled). 5) Spacing and grid system used (8px grid). The visual style should be [modern and minimalist / bold and colorful / corporate and elegant]. Ensure the design complies with WCAG 2.1 AA accessibility standards and is responsive (mobile-first). Provide the result as detailed specifications that I can directly hand off to a developer.
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 because it assigns a precise expert role to Gemini, which guides the quality and detail level of responses. The five-point numbered structure forces the AI to cover all essential aspects of a design system without omissions. The variables in brackets allow contextual customization while maintaining a rigorous methodological framework that produces professional and actionable results.
Use Cases
Variants
Expected Output
Gemini will generate a complete UI specification document including a coherent color palette, precise typographic recommendations, a structured section-by-section layout, and a component library with their different states. The result will be detailed enough to serve as a brief for a front-end developer or to guide the creation of mockups in Figma.
Frequently Asked Questions
Can Gemini directly generate visual mockups for my UI design?
Gemini can generate UI mockup images thanks to its multimodal capabilities, but results are often rough for complex interfaces. The most effective approach is to use Gemini to produce detailed specifications (colors, typography, layout, components) that you then implement in a tool like Figma or directly in code. You can also ask it for ASCII wireframes or very precise visual descriptions that serve as design guidelines.
How do I adapt the prompt for a mobile-first design with Gemini?
Include mobile-specific constraints in your prompt: target screen size (375px for iPhone, 360px for Android), accessible thumb zones, minimum touch target size (44x44px per Apple, 48x48dp per Google), and appropriate navigation (bottom navigation, hamburger menu). Also specify the breakpoints of your responsive strategy and ask Gemini to design the mobile version first before expanding to tablet and desktop.
Can I ask Gemini to generate CSS or React code from the UI design?
Yes, Gemini excels at front-end code generation. Once the design is defined, you can ask it to produce CSS code (with custom properties variables for design tokens), React components with Tailwind CSS or styled-components, or even configuration files for UI frameworks like shadcn/ui or Material UI. Specify your technical stack in the prompt to get code directly integrable into your project. Remember to ask for reusable components rather than monolithic code.
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
Astuce : ajoute en fin de prompt « fournis les tokens de design (couleurs, espacements) au format JSON exportable vers Figma ou Tailwind » pour passer directement des specs au code.
📬 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.