How to Make Claude Design Like a Pro: 7 Prompt Patterns for UI/UX Designers
If you have tried using Claude to generate UI designs and gotten back something that looks like a wireframe from 2015, the problem is not the model. It is the prompt. Claude can produce genuinely good UI layouts when you give it the right structure, constraints, and context. This guide breaks down the prompt patterns that work, based on the carousel by @uiux.asim.
Post by @uiux.asim.
Making Claude design like a pro. Image: @uiux.asim via Instagram.
Why Claude needs more than a vague prompt
Most designers approach Claude the same way they approach a design tool: they describe what they want in general terms and expect the output to be polished. Claude does not work that way. It is a language model, not a design engine. It responds to specificity. When you say "design a dashboard," you get a generic dashboard. When you say "design a SaaS analytics dashboard with a left sidebar nav, a top KPI row showing three metrics, and a main chart area with a line graph and a filter bar," you get something you can actually work with.
The difference is structure. A good design prompt tells Claude four things: what you are building, who it is for, what the layout should contain, and what the visual style should be.
Prompt 1: The layout structure prompt
The layout structure prompt pattern. Image: @uiux.asim.
Start by defining the page layout in terms of sections. Claude understands spatial language when you use it deliberately. Instead of asking for a "login page," describe the sections:
Design a login page with the following layout: a centered card on a split-screen background. The left half is a full-bleed image with a dark overlay. The right half is white with the login card vertically centered. The card contains a heading, an email field, a password field, a primary button, and a secondary text link for password reset. The card has 32px padding and 16px corner radius.
Notice what makes this work: every element is named, positioned, and given dimensions. Claude does not have to guess what "a login page" looks like because you told it exactly what yours contains.
Prompt 2: The component specification prompt
Component specification breakdown. Image: @uiux.asim.
When you need a specific component, describe it as a set of properties rather than a concept. For a button:
Create a primary button component. Width: auto with 24px horizontal padding. Height: 44px. Background: #4F46E5. Text: white, 15px, semibold. Corner radius: 8px. Hover state: background changes to #4338CA. Focus state: 2px outline in #818CF8 at 2px offset. Disabled state: background #C7D2FE, text white at 60% opacity.
This prompt gives Claude enough detail to produce a component that matches your design system. The hex codes, pixel values, and state definitions are what separate a real component from a rough approximation.
Prompt 3: The color and typography prompt
Color and typography specification. Image: @uiux.asim.
Claude will not invent a good color palette on its own. It will default to blues and grays. To get something intentional, specify the palette directly:
Use the following color system: primary #4F46E5, secondary #06B6D4, background #F9FAFB, surface #FFFFFF, text primary #111827, text secondary #6B7280, border #E5E7EB. For typography, use Inter as the font family. Body text: 16px regular, line-height 1.6. Headings: H1 32px bold, H2 24px semibold, H3 20px medium. All headings have 1.2 line-height.
When Claude knows your exact palette and type scale, it applies them consistently across the layout instead of improvising.
Prompt 4: The context and audience prompt
Audience and context framing. Image: @uiux.asim.
The same dashboard looks different for a CFO and for a warehouse manager. Tell Claude who the user is:
This is a dashboard for a fitness app targeting users aged 25-40 who check it daily on mobile. The design should feel energetic but not overwhelming. Prioritize three key metrics: steps, calories, and active minutes. Use the primary color for the main metric and secondary color for supporting data.
Context changes the hierarchy, the tone, and even the density of the layout. Claude will make different choices when it knows the user is on mobile vs desktop, daily vs monthly, expert vs beginner.
Prompt 5: The iteration and critique prompt
Iteration and critique loop. Image: @uiux.asim.
Once Claude produces a layout, do not accept it as final. Ask it to critique its own work:
Review the design you just created. Identify three issues with the visual hierarchy, spacing, or accessibility. Then propose specific fixes for each issue. Do not implement the fixes yet, just describe them.
This prompt pattern is powerful because it forces Claude to audit its output against design principles before you commit to changes. You get a list of potential improvements, and you decide which ones to apply.
Prompt 6: The real-world design prompt
Real-world design scenario prompt. Image: @uiux.asim.
For a complete, production-ready prompt, combine everything above into one structured request. Here is a template:
Design a [page type] for [product name], targeting [audience]. Layout: [describe sections top to bottom]. Components: [list each component with properties]. Colors: [list palette]. Typography: [list type scale]. Style reference: [describe the visual feel]. Constraints: [list any limitations like max width, mobile-first, dark mode support].
Fill in the brackets and you have a prompt that gives Claude everything it needs to produce a design you can actually use.
Prompt 7: Pro tips for better results
Pro tips for Claude design prompts. Image: @uiux.asim.
Three habits that separate good results from great ones:
- Reference real products. Tell Claude "the layout should feel like Linear's sidebar" or "the card style should match Stripe's dashboard." Claude knows these products and will mirror their patterns.
- Ask for one thing at a time. Do not request a full 12-page app in one prompt. Build page by page, component by component. Each response will be sharper.
- Specify what to avoid. "Do not use rounded corners over 12px. Do not use drop shadows. Do not use gradients." Negative constraints are just as important as positive ones.
Putting it into practice
The core insight is that Claude designs well when you design the prompt well. Vague prompts produce vague layouts. Specific, structured prompts produce specific, structured layouts. Start with the layout structure prompt, add your component specifications, layer in your color and type system, give it audience context, and iterate with critique prompts. That sequence produces results that look designed, not generated.
If you want to take a Claude-generated design and turn it into a real working app without writing code, Base44 lets you import a Figma frame or start from a prompt and build the full app from there.
Original carousel by @uiux.asim on Instagram.
Want to turn your AI-generated designs into working apps? Try Base44 and go from prompt to production.
Related on NewForm
Keep reading
Find Your Stack
Discover the perfect design tools for your workflow.
Take the 60-second quizNewForm Studio
Turn your designs into professional mockups instantly.
Open StudioMore from NewForm
Best AI App Builders for Designers in 2026: What to Choose for Real UI Work
Compare Base44, Lovable, Bolt, v0, Replit and Framer for design fidelity, control, real app behavior and pricing. A transparent evaluation guide for designers.
9 min read · Oct 30, 2026
How to Use Adobe Firefly AI Assistant to Restyle a Portrait
A practical, art-directed workflow for exploring portrait styles with Adobe Firefly AI Assistant, from the source photo and prompt to reviewing and refining variations.
4 min read · Oct 30, 2026