Claude Prompt for Creating Mockups
Creating mockups is a crucial step in any design process, whether for a mobile app, website, or software. Claude excels at generating detailed mockups as ready-to-view HTML/CSS code, structured descriptions for design tools, or complete specifications to guide a development team. Thanks to its deep understanding of interface design, UX principles, and modern design systems, Claude can turn a simple idea into a concrete visual prototype in seconds. Whether you're a designer looking to speed up your ideation phase, a product manager wanting to communicate a product vision, or a developer needing to quickly prototype a feature, Claude lets you move from intention to visual without mastering complex design tools. The prompt approach gives you full control over the fidelity level, visual style, and complexity of the generated mockup.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
You are a senior UI/UX designer specialized in modern interface design. Create a detailed mockup for [DESCRIBE_THE_SCREEN_OR_FEATURE] for [APPLICATION_TYPE: web/mobile/desktop].
Project context:
- Sector: [e.g., e-commerce, SaaS, fintech]
- Target audience: [e.g., professionals aged 25-45]
- Visual tone: [e.g., minimalist, corporate, playful]
Generate the mockup as complete HTML and CSS code, ready to open in a browser. Follow these principles:
- Clear visual hierarchy with a consistent typographic system
- Spacing and alignment following an 8px grid
- Harmonious color palette with primary color [SPECIFY] and secondary color [SPECIFY]
- Interactive components with visible hover/focus states
- Responsive design adapted to the targeted viewport
Include in the mockup:
- Header with navigation
- Hero section or main area
- Relevant content elements (cards, forms, lists according to context)
- Footer
- At least one visible call-to-action
Add comments in the code to explain design choices. Use realistic dummy data, not lorem ipsum.
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 an expert role to Claude, activating its in-depth knowledge of UI/UX design. The structured sections (context, principles, required elements) eliminate ambiguity and guide generation toward a complete and coherent result. The requirement for executable HTML/CSS code turns an abstract description into a concrete, immediately usable deliverable.
Use Cases
Variants
Expected Output
You will get a standalone HTML file containing a complete visual mockup with embedded CSS styles, ready to open in a browser. The result includes a structured layout with realistic UI components, a consistent color palette, and credible dummy data that allows immediate evaluation of the final render.
Frequently Asked Questions
Can Claude create mockups for mobile apps?
Yes, Claude can generate mobile mockups in HTML/CSS using adapted viewports (375px for iPhone, 390px for recent models). Specify the target dimensions in your prompt and ask for a container simulating a mobile screen. Claude can reproduce iOS conventions (top navigation bar, bottom tab bar) or Android (Material Design) according to your instructions. For an optimal rendering, ask it to include a meta viewport and simulate the phone frame.
How do I get a mockup that faithfully follows my existing brand guidelines?
Provide Claude with the key elements of your style guide: hexadecimal color codes, font names, typographic sizes, border-radius and spacing values. The more precise you are about your design tokens, the more faithful the result will be. You can also paste an excerpt from your CSS variables file or your existing design system directly into the prompt so Claude conforms to it exactly.
Can you iterate on a mockup generated by Claude to improve it?
Absolutely, it's even the recommended method. After an initial generation, you can request targeted modifications: changing the layout of a section, adjusting colors, adding a component, modifying the visual hierarchy. Claude retains the conversation context and can apply incremental changes without regenerating the whole thing. This iterative approach lets you refine the mockup progressively until you achieve the desired result, just as you would with a traditional design tool.
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 un code plus robuste, précisez les breakpoints responsive (ex: 375px, 768px, 1440px) et les micro-interactions (hover, transition, animation CSS). Claude générera alors du HTML/CSS adaptable et moderne, sans refacto.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
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.
Write a color system rationale
Document color system decisions
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.
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.