185 Claude Prompts for Designers

Browse the prompts

Popular
## Role

You are an expert full-stack developer and web designer specializing in production-ready portfolio sites that combine modern frontend engineering with visual storytelling.

## Task

Create a complete, production-ready React portfolio application using TypeScript, Tailwind CSS, and Framer Motion. Build a professional digital experience that balances bold design with flawless functionality.

## Context

{{portfolio-content}}

Include: personal brand/headline, 3-5 featured projects with descriptions, technical skills and expertise areas, professional background/story, and contact information with social links.

## Output

Deliver complete, functional components structured across these sections:

### Foundation Setup
Project structure, Tailwind configuration, and theme system

### Core Layout and Navigation
Glassmorphism navigation with scroll effects

### Hero Section
Animated grad

React Portfolio Website Builder

Generates a complete, production-ready React portfolio application with TypeScript, Tailwind CSS, and Framer Motion animations. Runs on ChatGPT, Claude, and Cursor to deliver accessible, deployment-ready code.

941
Popular
## Role

You design logos. Given brand details, you produce three distinct logo concepts, each capturing a different facet of the brand's identity. You write detailed visual descriptions, clear rationales, mood board references, and honest analyses of strengths and weaknesses.

## Context

Brand name: {{brand-name}}
Industry: {{industry}}
Brand details: {{brand-details}}

## Task

1. Write a brief brand overview that frames the design direction.
2. For each of the three concepts, produce:
   - **Visual description**: what the logo looks likeβ€”shapes, type, color palette, layout
   - **Rationale**: why these specific design choices suit the brand
   - **Mood board**: list of reference images, styles, or works that informed the concept (describe each in one line)
   - **Analysis**: honest assessment of strengths and potential weaknesses
3. Recommend one concept and explain the reasoning in 

Logo Concept Generator for Brand Identity

Generates three distinct logo concepts with sketch-ready visual descriptions, design rationales, mood board references, and strengths-and-weaknesses analyses. Runs on ChatGPT, Claude, Gemini, and Grok to deliver a structured text brief with a recommended concept and ordered next steps.

525
Popular

In-App Onboarding Tooltip Writer for SaaS Products

Generates a complete set of five in-app onboarding tooltips (headline, body copy, and CTA button) for critical first-use moments in SaaS and mobile products. Runs on ChatGPT, Claude, Gemini, and Grok.

337

Recipe Organizer App Builder Prompt

Generates a complete single-file HTML recipe organizer application with meal planning, grocery list generation, and recipe import functionality. Built for ChatGPT, Claude, and Gemini to create fully functional, self-contained web apps with zero dependencies.

258

Admin Dashboard Design Specification Prompt

Generates a complete admin dashboard specification following Apple's Human Interface Guidelines for web, with information architecture, component layouts, and interaction patterns. Runs on ChatGPT, Claude, Gemini, and Grok.

240
## Role
You are an expert React developer building a browser-based brand identity platform.

## Task
Create a complete React application that guides users through professional brand creation via a multi-step wizard. The tool must generate enterprise-quality brand systemsβ€”strategic positioning, visual identity, real-time mockups, and exportable assetsβ€”with UI polish matching Linear.app and Stripe.

## Context
**Business context:** {{business-context}}

**Technical profile:** {{technical-profile}}

## Output
Structure your implementation plan with these sections:

### Technical Architecture
Component hierarchy, state management approach, and file organization strategy.

### Step-by-Step Implementation
Detailed breakdown of each wizard step with specific functionality and data flows.

### Design System Implementation
Dark theme specifications, glassmorphism effects, typography, spacing, and

React Branding App Builder Prompt

Generates a complete React application implementation plan for a browser-based brand identity platform with multi-step wizard, real-time mockups, and asset export. Runs on ChatGPT, Claude, and code-focused AI models.

220
## Role
You are an expert dashboard designer and UX architect applying information design principles and responsive web development best practices.

## Task
Design a comprehensive dashboard interface that prioritizes data hierarchy, eliminates visual clutter, and supports rapid decision-making. Balance aesthetic appeal with functional clarity, ensuring critical information captures attention first while maintaining logical relationships between data points.

## Context
Effective dashboards require:
- Clear information hierarchy based on decision-making priorities
- Strategic grouping of related metrics
- Appropriate visualizations matched to data types
- Responsive layouts that preserve priority across screen sizes
- Interactive controls positioned for optimal workflow
- Visual feedback systems (status indicators, loading states)
- Design that follows natural eye movement and cognitive p

Dashboard Design Specification Prompt

Generates a complete dashboard design specification with information architecture, responsive layouts, visual components, and interactive elements. Runs on ChatGPT, Claude, Gemini, and Grok.

219

Brand Identity Generator

Generates a complete brand identity system as structured text: logo concept, color palette with psychology notes, two-font typography pairing, and brand guidelines tailored to your business context. Runs on ChatGPT, Claude, and Gemini.

194

Website Development Plan Generator

Generates a complete website blueprint covering structure, content, user personas, design guidelines, and implementation strategy. Runs on ChatGPT, Claude, Gemini, and Grok.

159
## Role
You are an expert UI/UX designer creating comprehensive design guidelines that reflect industry best practices across color, typography, iconography, layout, navigation, interactive elements, consistency, accessibility, and user experience optimization.

## Task
Develop a detailed, structured design guideline document for {{product-type}} that serves as a foundational reference for designers, developers, and stakeholders. The guidelines must promote consistency, enhance accessibility, and optimize user experience.

## Context
{{design-context}}

Include relevant details such as:
- Target audience characteristics and user personas
- Brand personality, values, and visual identity requirements
- Specific accessibility considerations or compliance needs
- Technical constraints or platform-specific requirements

## Output
Deliver the guidelines as a comprehensive document structured w

UI/UX Design Guidelines Generator for Digital Products

Generates a comprehensive, structured design guideline document covering color, typography, layout, navigation, accessibility, and interaction patterns. Runs on ChatGPT, Claude, and Gemini to produce ready-to-implement standards for design teams.

154
## Role

You are a children's book developer creating imaginative, educational, age-appropriate content including themes, characters, plots, and illustration direction.

## Task

Produce a complete creative brief for a children's book on the following topic:

{{book-topic}}

## Requirements

**Theme**  
Propose one central theme that encourages imagination, curiosity, and a meaningful lesson. Include potential character arcs, settings, and plot twists.

**Title**  
Suggest one captivating, memorable title that resonates with young readers.

**Characters**  
Create three detailed character profiles. For each include: name, background, personality, appearance, motivations, and how the character grows across the story.

**Illustration Direction**  
Describe the illustration style, a five-color palette, and five key scenes to illustrate.

**Plot**  
Outline an engaging introduction, three ch

Children's Book Creative Brief Generator

Generates a complete creative brief for a children's book, including theme, title, three character profiles, illustration direction, plot outline, and ending. Returns structured text output for ChatGPT, Claude, or Gemini.

149

Book Cover Design Concept Prompt

Generates a complete, publication-ready book cover design concept including imagery direction, typography specifications, color palette, and layout composition. Runs on ChatGPT, Claude, Gemini, and Grok.

148

Tailwind CSS Brand Style Guide Generator

Generates a complete Tailwind CSS brand style guide with colors, typography, spacing, components, shadows, and a working example component. Runs on ChatGPT, Claude, Gemini, and Grok.

147

UI Modernization Prompt for Dashboard Refactoring

Generates production-ready React code that transforms legacy dashboard interfaces into modern, accessible, high-performing UIs while maintaining 100% feature parity. Runs on ChatGPT, Claude, and Cursor.

120
## Role

You are an expert creative technologist and motion graphics engineer specializing in animated screensavers and kinetic digital experiences.

## Task

Design and develop a fully animated, professional-grade screensaver with smooth animations, dynamic effects, and seamless platform integration. Provide a comprehensive, step-by-step implementation plan with technical specifications, code frameworks, and deployment guidance.

## Context

**Theme**: {{screensaver-theme}}

**Target platform(s)**: {{target-platform}}

**Technical requirements and skill level**: {{requirements-and-skill-level}}

## Output

Structure your screensaver development plan with these sections:

● **Theme Analysis & Visual Concept Design** – Translate the theme into concrete visual elements, color palettes, and motion principles that create captivating idle-screen experiences

● **Animation Architecture & Techn

Animated Screensaver Design and Development Prompt

Generates a complete implementation plan for building animated screensavers, including code frameworks, animation architecture, performance optimization, and platform deployment. Runs on ChatGPT, Claude, and Cursor.

120
## Role
You are an expert digital marketing designer specializing in cohesive, multi-platform campaign materials.

## Task
Design a complete set of marketing materials for a digital campaign, including social media graphics, website banners, and email templates. Ensure all deliverables are visually unified, brand-consistent, and optimized for their respective platforms.

## Context
- Brand name: {{brand-name}}
- Primary color scheme: {{color-scheme}}
- Target audience: {{target-audience}}
- Campaign message: {{campaign-message}}
- Brand logo: {{logo-description}}

## Output
Provide structured design specifications under these headings:

### Social Media Graphics
- Platform-specific dimensions and format recommendations
- Composition, typography, and visual hierarchy
- Branding element placement
- Call-to-action design

### Website Banners
- Responsive sizing guidelines (desktop, tablet, 

Visual Design Specs for Multi-Platform Campaigns

Generates detailed design specifications for social media graphics, website banners, and email templates that maintain visual unity across a digital marketing campaign. Runs on ChatGPT, Claude, Gemini, and Grok.

120

Contact Form Builder Prompt for ChatGPT

Generates a complete contact form implementation plan optimized for high completion rates, mobile-first UX, and secure data handling. Runs on ChatGPT, Claude, Gemini, and Grok.

114

React TypeScript UI Designer and Code Generator

Generates production-ready React + TypeScript + Tailwind CSS interfaces with shadcn/ui components, complete accessibility, and micro-interactions. Runs on ChatGPT, Claude, and Cursor.

107
## Role
You are a UI/UX designer experienced in user journey mapping for digital platforms.

## Task
Create a comprehensive user journey map that traces each step a user takes to complete a specific action on a website or app. The map should anticipate user needs, remove friction, and create an engaging experience from initial contact through post-completion.

## Context
{{user-action-and-platform}}

User goals, motivations, and context: {{user-context}}

## Output
Structure the journey map using these stages:

**1. Initial Engagement**
Describe the user's first interaction with the platform. What attracts them? How are they welcomed?

**2. Onboarding (if applicable)**
Outline any tutorial or introduction steps that orient the user to relevant features.

**3. User Goals & Motivations**
Clearly define what the user aims to achieve and why they're motivated to complete this action.

**4. N

User Journey Mapping Prompt for Digital Platforms

Generates a comprehensive user journey map tracing each stage from initial engagement through post-completion for any website or app action. Runs on ChatGPT, Claude, Gemini, and Grok.

104
## Role
You are an expert infographic designer who transforms complex data into visually engaging, easily digestible content.

## Task
Create structured infographic content for {{topic}} in the {{industry}} industry. Distill key data points and insights into clear, concise copy and suggest compelling visual representations that tell a cohesive story.

## Requirements
- Present information in a logical flow that builds a narrative
- Use accessible languageβ€”avoid jargon unfamiliar to the target audience
- Focus on the most important data; prioritize clarity over comprehensiveness
- Ensure statistics, insights, and visual suggestions are specific and actionable
- Make the key takeaway and call to action compelling and concrete

## Output
Deliver a complete infographic structure with:

- A concise, compelling title
- Three main sections, each containing:
  - A descriptive heading
  - Two key

Infographic Content Structure Generator

Generates structured infographic content that transforms complex data into clear, narrative-driven sections with statistics, insights, and visual suggestions. Runs on ChatGPT, Claude, and Gemini.

103

Profession-Specific Kanban App Builder

Generates a complete React Kanban board application that dynamically adapts its interface, terminology, workflows, and data fields to match any profession's specific work reality. Runs on ChatGPT, Claude, and Cursor to produce production-ready TypeScript code with drag-and-drop, state management, and persistence.

103

Recreate Mobile App UI Designs From Screenshots

Generates pixel-perfect, production-ready UI code from a mobile app screenshot with a full forensic breakdown of colors, typography, spacing, and component specifications. Runs on ChatGPT, Claude, Gemini, and Grok.

97

Recipe Finder App Front-End Blueprint Prompt

Generates a complete front-end technical implementation guide for building a recipe finder web application with search, meal planning, nutrition tracking, offline mode, and social sharing. Runs on ChatGPT, Claude, Gemini, and Grok.

97
## Role

You are a design systems architect building production-ready style guides that bridge design and engineering with living documentation, interactive components, real code snippets, and clear integration guidance.

## Task

Build a comprehensive, interactive style guide as a single-file React artifact using Tailwind CSS. The guide serves as a single source of truth that eliminates design ambiguity and accelerates development.

## Context

{{brand-context}}

Include: industry/sector, brand personality (modern/classic/playful/professional), existing brand assets (logos, colors, design elements), primary products or applications where the style guide will be used, and team structure (design/development composition).

## Output

Deliver a production-ready, single-file React application with embedded Tailwind styles that includes:

**Brand Foundation**
- Complete color system: primary,

Design System Style Guide Generator

Generates a production-ready, interactive style guide as a single-file React application with Tailwind CSS, including brand foundations, component libraries, design tokens, and implementation instructions. Runs on ChatGPT, Claude, and Cursor.

96

What are claude prompts for Designers?

claude prompts for Designers are engineered instructions that already work, written and tested for Claude. These are not one-line questions. Each one fixes the role, the context, the task and the output format before you type a word, so you get a usable result on the first run instead of the fourth.

They cover the work Designers actually get asked for: research and briefs, copy and content, analysis and reporting, planning, outreach and the admin that eats the day. Open a card to see the full prompt and the output it returns.

Popular on this page right now: "React Portfolio Website Builder", "Logo Concept Generator for Brand Identity", "In-App Onboarding Tooltip Writer for SaaS Products".

185 on this page, every one scoped to Designers. Free to read, free to copy.

Why these prompts work for Designers

A weak prompt costs you the hour you were trying to save: you rewrite it three times, get something generic, then finish the job by hand. An engineered prompt front-loads that thinking once.

In Designers that means first drafts you can send, analysis you can act on, and the repetitive work handed off, so the time goes into judgement instead of typing.

Every prompt here was written for a real job and tested against the models people actually use. Nothing scraped from a thread.

How to use these prompts in Claude

Open a prompt, copy it, and replace the [bracketed] variables with your own product, audience or topic. The structure around them stays as is. That structure is the part doing the work.

Paste it into Claude and run. If the output drifts, tighten the context line instead of rewriting the whole prompt.

No account needed to copy one. No setup, no extension, nothing to install.

Do these prompts only work with Claude?

They are tuned for Claude, but the skeleton of role, context, task and format carries over to any capable model. Swap model-specific settings like tone or length when you move.

Are these AI prompts free to use?

A big part of the library is free: open a prompt, copy it, use it. Premium packs and the Complete AI Bundle unlock the full collection with lifetime updates.

How do I adapt these prompts to my use case?

Start with the [variables]: niche, audience, constraints. If the result still misses, add one example of the output you want. A single good example beats three extra instructions.

For a prompt built from scratch, the Start Now card above opens the custom prompt generator.

Related resources

Get smarter on AI every week

One email a week with the best new prompts, tools, and model updates. Unsubscribe anytime.

Join 100,000+ subscribers. One email a week, real prompts, tools, and model updates. Unsubscribe anytime.