Prompt Gemini for Creating a UI Design

Gemini, Google's artificial intelligence, is emerging 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 accelerate 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 for creating professional UI designs with Gemini, along with variants adapted to your skill level and project complexity. You will discover how to structure your requests to obtain consistent, aesthetic, and functional interfaces while respecting modern design best practices.

The prompt

Gemini

Act as a senior UI/UX designer with 15 years of experience. I want to create the interface design for [TYPE_OF_APPLICATION: SaaS, e-commerce, mobile app, dashboard...] aimed at [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 hexadecimal codes (primary, secondary, accent, background, text colors) justified by color psychology. 2) Typography with Google Fonts recommendations for headings and body text, with sizes and weights. 3) Detailed layout of the main page with the arrangement of each element (header, hero section, content sections, CTA, footer). 4) Necessary UI components (buttons, cards, forms, navigation) with their states (hover, active, disabled). 5) Spacing and the grid used (8px grid). The visual style should be [MODERN_AND_MINIMALIST / BOLD_AND_COLORFUL / CORPORATE_AND_ELEGANT]. Ensure the design meets WCAG 2.1 AA accessibility standards and is responsive (mobile-first). Provide the result as detailed specifications that I can directly pass to a developer.

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 because it assigns a precise expert role to Gemini, which directs the quality and level of detail of the 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.

Expected result

Gemini will generate a comprehensive UI specification document including a coherent color palette, precise typographic recommendations, a structured layout section by section, and a component library with their various 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.

Variants by level

FAQ

Can Gemini directly generate visual mockups for my UI design?

Gemini can generate UI mockup images thanks to its multimodal capabilities, but the results are often approximate 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?

Add mobile-specific constraints to 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 adapted navigation (bottom navigation, hamburger menu). Also specify the breakpoints of your responsive strategy and ask Gemini to design the mobile version first before scaling to tablet and desktop.

Can I ask Gemini to generate CSS or React code from the UI design?

Yes, Gemini excels at generating front-end code. Once the design is defined, you can ask it to produce CSS code (with custom properties 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 tech stack in the prompt to get code directly integrable into your project. Consider asking for reusable components rather than monolithic code.

How to use this prompt

Copy the prompt with the button above.
Paste it into ChatGPT, Claude or your favorite AI assistant.
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.

Prompt library Learn prompting Prompt builder Prompt optimizer

Already have a prompt?

Paste it into the Optimizer, AI improves it in 5 seconds: role, context, format. Free, no signup.

Open the Optimizer

More prompts to explore

Prompt Gemini for Generating Advertising Visuals

Generating advertising visuals is one of the most powerful use cases for Gemini. With its advanced multimodal capabilities, Gemini allows you to create impactful advertising images in seconds, where a graphic designer would take hours. Whether you are a marketing manager, entrepreneur, or content creator, mastering the right prompts for Gemini transforms your creative workflow. The challenge is not simply to ask for an image, but to structure your request to get a visual that respects your brand identity, captures your target audience's attention, and drives action. A well-constructed prompt integrates the product context, desired visual tone, technical constraints of the advertising format, and essential composition elements. In this guide, you will discover an optimized main prompt for Gemini, its variants according to your expertise level, and best practices for obtaining professional advertising visuals that convert. Each prompt has been tested and refined to maximize rendering quality and commercial relevance.

Prompt Gemini for Optimizing a Landing Page

Optimizing a landing page is a crucial lever for maximizing your conversion rates and making your acquisition campaigns profitable. Gemini, Google's AI model, stands out for its ability to simultaneously analyze textual content, visual structure, and behavioral data of a page. By submitting your landing page to it, you get a comprehensive audit covering message hierarchy, value proposition clarity, call-to-action effectiveness, and user journey consistency. Unlike a manual audit that takes hours, Gemini produces actionable recommendations ranked by potential impact in seconds. Whether you want to reduce your bounce rate, increase sign-ups, or improve your cost per acquisition, the following prompts will help you fully leverage Gemini's analytical capabilities. Each variant is designed for a different expertise level, from beginner marketer to senior growth engineer, so everyone can immediately improve their conversion performance.

Prompt Gemini for Writing a Cover Letter

The cover letter remains a decisive element in any application process. Yet writing a text that captures the recruiter's attention in just a few seconds is a major challenge for many candidates.

Prompt Gemini for Writing a Press Release

Writing a press release is a demanding exercise that requires precision, structure, and impact. Every word counts: you need to capture journalists' attention from the very first lines, convey essential information concisely, and respect established codes of corporate communication.

Prompt Gemini for Writing Prospecting Emails

Email prospecting remains one of the most powerful levers for generating qualified leads, but writing messages that capture attention in a crowded inbox is a real challenge.

Prompt Gemini to Analyze a Financial Balance Sheet

Analyzing a financial balance sheet is a complex exercise that requires a deep understanding of accounting items, financial ratios, and the economic dynamics of a company.