🏠 Landing Pages
Purpose
To generate visually engaging home or marketing pages that convey hierarchy, focus, and clarity.
Prompt Example
Intent: Create a landing page for a mindfulness app.
Layout: A full-width hero section with a large headline, supporting paragraph, and two call-to-action buttons. Below, three feature cards in a centered grid.
Behavior: Smooth scroll when clicking “Learn More.”
Style: Calming color palette with soft gradients and rounded corners.
Accessibility: High-contrast text and descriptive button labels.
Mini-Explanation
The clear structure (“hero section,” “feature cards”) gives the AI spatial context, while adjectives like soft and calming shape its visual tone.
Stretch Variation
“Redesign this for a dark mode variant using a minimal aesthetic and accent color highlighting CTAs.”
💬 Forms & Onboarding
Purpose
To generate accessible input forms or multi-step signup flows.
Prompt Example
Intent: Design a user signup form for a book club community.
Layout: Two-column form with name, email, password, and genre preferences on the left; right side shows a short welcoming illustration.
Behavior: Step indicator animates between pages.
Style: Modern, spacious layout with neutral tones and gentle hover effects.
Accessibility: All inputs have visible labels, focus outlines, and ARIA attributes.
Mini-Explanation
When you include “visible labels” and “focus outlines,” most design tools immediately output compliant, real-world-ready forms.
Stretch Variation
“Add optional social login buttons styled with platform colors, and a password strength meter.”
📊 Dashboards & Data Displays
Purpose
To prompt structured, information-rich layouts suitable for admin tools or analytics views.
Prompt Example
Intent: Design a responsive dashboard for a task management app.
Layout: Top navigation bar, summary cards for task stats, and a main area with a sortable table.
Behavior: Table headers clickable for sorting; cards animate slightly on hover.
Style: Light background, accent color for primary actions, consistent spacing.
Accessibility: Keyboard navigation and clear tab order.
Mini-Explanation
Dashboards benefit from verbs like sortable, hover, responsive — they hint at dynamic functionality even without code.
Stretch Variation
“Add a collapsible sidebar and a floating ‘Add Task’ button following Material Design elevation rules.”
🧭 Navigation & Menus
Purpose
To create intuitive headers, sidebars, and mobile nav patterns.
Prompt Example
Intent: Generate a responsive website header with logo, navigation links, and a call-to-action button.
Layout: Horizontal on desktop, collapsible hamburger menu on mobile.
Behavior: Smooth dropdown transitions and sticky header on scroll.
Style: Minimal design with accent underline hover effect.
Accessibility: Keyboard navigation, ARIA roles for menu items.
Mini-Explanation
Pairing “horizontal” + “collapsible” tells the model to account for both device types — the simplest form of responsive reasoning.
Stretch Variation
“Add a language selector dropdown and make the CTA visually distinct with color contrast of 4.5:1 or better.”
🧍♀️ Profile & Cards
Purpose
To create reusable UI components for user profiles, lists, or product cards.
Prompt Example
Intent: Design a profile card component.
Layout: Circular avatar on top, user name, short bio, and Follow button below.
Behavior: Button changes color on hover and toggles text to “Following.”
Style: Rounded edges, subtle drop shadow, pastel palette.
Accessibility: Button includes ARIA label and sufficient contrast.
Mini-Explanation
This small-scale prompt teaches component logic: one piece, one behavior, one aesthetic — perfect for micro-learning.
Stretch Variation
“Convert this into a grid of four cards with equal spacing and responsive scaling down to 320 px width.”
🎞️ Micro-Interactions & Motion
Purpose
To enhance usability with subtle animations that respond to user behavior.
Prompt Example
Intent: Add micro-interactions to a mobile app home screen.
Layout: Buttons gently bounce when tapped; icons fade in on scroll.
Behavior: Use easing curves for smooth transitions.
Style: Light neumorphic design with soft shadows.
Accessibility: Motion duration under 300 ms for comfort.
Mini-Explanation
Even a simple “under 300 ms” tells the AI you care about UX pacing — that’s design literacy in action.
Stretch Variation
“Add a loading spinner that morphs into a success checkmark after completion.”
📱 App Screens & Flows
Purpose
To describe entire app screen sequences, teaching flow and consistency.
Prompt Example
Intent: Design a 3-screen onboarding flow for a fitness app.
Layout:
1️⃣ Welcome screen with illustration and “Get Started.”
2️⃣ Preferences screen with activity checkboxes.
3️⃣ Success screen with motivational quote and CTA.
Behavior: Progress indicator updates each step.
Style: Energetic palette, rounded buttons, clear typography.
Accessibility: Descriptive alt text and keyboard-focus support.
Mini-Explanation
Breaking your layout into numbered screens helps LLMs preserve sequence and logical flow.
Stretch Variation
“Add a transitional animation between screens using swipe gestures.”
🧩 Accessibility & Inclusivity Prompts
Purpose
To remind AI tools to design for everyone.
Prompt Example
Intent: Generate a color palette and typography set for a travel website.
Layout: Display sample headings, paragraphs, and buttons.
Behavior: None.
Style: Contrast ratio ≥ 4.5:1, sans-serif font with large x-height.
Accessibility: Meets WCAG AA standards, supports dark mode.
Mini-Explanation
Prompting with numeric constraints (“≥ 4.5:1”) gives the model a quantifiable design boundary — that’s how you get consistency.
Stretch Variation
“Include a high-contrast toggle and show visual differences between default and accessible modes.”
🧠 Reflection Prompts (Meta-Learning)
These are for journaling, self-assessment, or retraining your intuition after each project.
- “Which adjective in my prompt had the biggest visual impact?”
- “What detail did I forget that made the design feel incomplete?”
- “What’s one term (like component, breakpoint, or state) I now understand clearly?”
- “What feedback did the AI output teach me about my own preferences?”
Mini-Explanation: Reflection converts experience into insight — it’s how you internalize the language of systems thinking.
🧭 Using This Library
- Start with any prompt category that matches your project.
- Copy the example and adapt it with your own adjectives or goals.
- Paste it into your chosen tool (Uizard, Penpot, V0.dev, or Framer AI).
- Record your result in the Prompt Journal template.
- Iterate — one change per run — until you can predict outcomes.
Remember:
AI tools don’t replace designers — they amplify clear thinkers.
Your words are your interface.