Claude Prompt to Create 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 in the form of ready-to-view HTML/CSS code, structured descriptions for design tools, or complete specifications to guide a development team. Thanks to its fine understanding of interface design, UX principles, and modern design systems, Claude can transform a simple idea into a concrete visual prototype in seconds. Whether you are a designer looking to speed up your ideation phase, a product manager wanting to communicate a product vision, or a developer wanting to quickly prototype a feature, Claude lets you go from intent to visual without mastering a complex design tool. The prompt approach gives you total control over the fidelity level, visual style, and complexity of the generated mockup.
The prompt
You are a senior UI/UX designer specialized in modern interface design. Create a detailed mockup for [DESCRIBE_SCREEN_OR_FEATURE] intended for [TYPE_OF_APPLICATION: WEB/MOBILE/DESKTOP].
Project context:
- Industry: [EX: E-COMMERCE, SAAS, FINTECH]
- Target audience: [EX: PROFESSIONALS 25-45 YEARS]
- Visual tone: [EX: MINIMALIST, CORPORATE, PLAYFUL]
Generate the mockup as complete HTML and CSS code, ready to be opened 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 [SPECIFY]
- Interactive components with visible hover/focus states
- Responsive design adapted to the target viewport
Include in the mockup:
- Header with navigation
- Hero section or main area
- Relevant content elements (cards, forms, lists depending on 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
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
Why it works
This prompt works because it assigns an expert role to Claude, which activates its deep knowledge of UI/UX design. The structure in sections (context, principles, required elements) eliminates ambiguity and guides generation toward a complete and coherent result. The requirement for executable HTML/CSS code transforms an abstract description into a concrete and immediately usable deliverable.
Expected result
Variants by level
FAQ
Can Claude create mockups for mobile applications?
How to get a mockup faithful to my existing brand guidelines?
Can we iterate on a mockup generated by Claude to improve it?
Related prompts
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.
More prompts to explore
Claude Prompt to Create YouTube Thumbnails
YouTube thumbnails are the first visual element your 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 Prompt to Generate Brand Names
Finding the perfect brand name is one of the most strategic steps when creating a business or launching a product. A good name must be...
Claude Prompt to Optimize a Conversion Rate
Conversion rate optimization (CRO) is a major strategic lever for any online business. Every percentage point gained on your conversion rate can represent thousands of euros in additional revenue, without increasing your acquisition budget.
Claude Prompt to Optimize a Landing Page
A high-performing landing page can make the difference between a visitor who bounces and a customer won over. Yet optimizing every element — from the catchy headline to the call-to-action and argument structure — requires expertise in copywriting, UX, and conversion psychology. Claude excels at this because it can simultaneously analyze message clarity, value proposition strength, visual content hierarchy, and psychological triggers. By submitting your current landing page or brief, you get a structured audit with concrete recommendations and ready-to-use rewrites. Whether you're launching a new SaaS product, an online course, or a B2B service, Claude identifies friction points that hurt your conversion rate and suggests tested alternatives. The approach is methodical: section-by-section analysis, scoring of key elements, and suggestions prioritized by potential impact. You save hours of work while benefiting from expert insight on every component of your page.
Claude Prompt to Optimize a Workflow
Workflow optimization is a major productivity lever, but it requires systematic analysis that few professionals have time to conduct. Claude excels in this area due to its ability to break down complex processes, identify bottlenecks, and propose concrete, actionable improvements.
Claude Prompt to Optimize Ads
Ads represent a major investment for any business, and their effectiveness largely depends on the quality of the message, targeting, and creative structure.
Go further
Get new prompts every week
Join our newsletter.