5 prompts for better AI web design

Written by Nick CybelaPublished 11/02/2026

Send or copy the canonical page link.

Compare five styles using the same fictional project board. WYN created the screenshots and prompts for this guide. Choose a style, copy its prompt into your AI builder, and attach the desktop and mobile screenshots. Replace the sample projects with your own content. Results will vary by tool.

Expressive & Fun

Use for: Community tools, creative apps, and personal projects.

Design: Coral and yellow panels, large rounded headings, pill buttons, and roomy cards.

On mobile: Replace the sidebar with a top bar and stack the cards.

Prompt tip: Use a neutral background so the colorful cards and main button stay easy to read.

Read or copy the prompt manually

Design a colorful project dashboard with rounded shapes.
- Use coral, sunny yellow, and lilac panels on a pale background, with dark text.
- Use large rounded sans-serif headings and readable body text.
- Put the heading and main button in a coral panel. Below it, show project totals and three rounded project cards.
- Use pill buttons, soft corners, and small offset shadows.
- Add a small lift on hover and a clear pressed state. Respect reduced-motion preferences.
- Mark the selected navigation item with a shape or border as well as color.

Use the fictional project board in the screenshot: Website refresh, Community meetup, and Launch checklist. Keep the screenshot text, navigation labels, project status, next tasks, and Create project button. Keep the totals: 03 active projects, 12 tasks this week, and 08 completed. Start with the heading "Project overview" and the project controls.

Show desktop at 1440px and mobile at 390px. On mobile, use a compact top bar and stack the projects. Keep the main button easy to reach and fit the page to the screen width. Use readable text, visible keyboard focus, labeled controls, sufficient contrast, and touch targets at least 44px tall. Include empty, loading, error, and success states. Respect reduced-motion preferences. Show both sizes before building more pages.

Bold & Disruptive

Use for: Creative studios and portfolios.

Design: Black and white, an acid-yellow main button, thick lines, square corners, and heavy type.

On mobile: Stack the project rows and reduce the headline size to fit the phone screen.

Prompt tip: Keep navigation labels readable and buttons large enough to tap.

Read or copy the prompt manually

Design a bold, brutalist project dashboard.
- Use black and white. Reserve acid yellow for the main button and selected navigation item.
- Use a large, heavy, narrow sans-serif heading and fixed-width labels.
- Build a desktop grid with thick black lines and square corners.
- Put projects in horizontal rows with large numbers, clear titles, status, and next tasks.
- Use flat fills and solid borders.
- Invert the button colors on hover and show when a button is pressed.

Use the fictional project board in the screenshot: Website refresh, Community meetup, and Launch checklist. Keep the screenshot text, navigation labels, project status, next tasks, and Create project button. Keep the totals: 03 active projects, 12 tasks this week, and 08 completed. Start with the heading "Project overview" and the project controls.

Show desktop at 1440px and mobile at 390px. On mobile, use a compact top bar and stack the projects. Keep the main button easy to reach and fit the page to the screen width. Use readable text, visible keyboard focus, labeled controls, sufficient contrast, and touch targets at least 44px tall. Include empty, loading, error, and success states. Respect reduced-motion preferences. Show both sizes before building more pages.

Minimal & Focused

Use for: Writing tools, simple planners, and focused productivity apps.

Design: A narrow content column, black type, generous whitespace, and plain project rows.

On mobile: Keep one column and leave the main actions visible for touch and keyboard users.

Prompt tip: Keep essential controls visible and make secondary actions usable by touch and keyboard.

Read or copy the prompt manually

Design a project dashboard with a minimal, focused interface.
- Use a white background, charcoal text, and gray secondary text.
- Use a readable sans-serif font with clear heading sizes and comfortable line spacing.
- Put navigation across the top and center the content in a narrow column.
- Follow the heading with a plain project list, including status and next tasks.
- Separate projects with whitespace and thin lines.
- Keep Create project and navigation visible. Make secondary actions usable by touch and keyboard.
- Keep transitions short.

Use the fictional project board in the screenshot: Website refresh, Community meetup, and Launch checklist. Keep the screenshot text, navigation labels, project status, next tasks, and Create project button. Keep the totals: 03 active projects, 12 tasks this week, and 08 completed. Start with the heading "Project overview" and the project controls.

Show desktop at 1440px and mobile at 390px. On mobile, use a compact top bar and stack the projects. Keep the main button easy to reach and fit the page to the screen width. Use readable text, visible keyboard focus, labeled controls, sufficient contrast, and touch targets at least 44px tall. Include empty, loading, error, and success states. Respect reduced-motion preferences. Show both sizes before building more pages.

Corporate & Professional

Use for: Business portals and team tools.

Design: A navy sidebar, blue main button, aligned totals, and a project table.

On mobile: Turn table rows into labeled cards. Keep the project name, status, and next task.

Prompt tip: Name the information each mobile card needs to show.

Read or copy the prompt manually

Design a professional project dashboard for a business team.
- Use a navy desktop sidebar, light gray background, white panels, and a muted blue main button.
- Use a readable sans-serif font, consistent heading sizes, and aligned labels.
- Put the heading and main button above three cards showing project totals.
- Show projects in an accessible table with Project, Status, and Next task columns.
- Use thin borders, slightly rounded corners, and subtle shadows. Write each status in words alongside its color.
- On mobile, turn the rows into labeled cards with the same information and reading order.

Use the fictional project board in the screenshot: Website refresh, Community meetup, and Launch checklist. Keep the screenshot text, navigation labels, project status, next tasks, and Create project button. Keep the totals: 03 active projects, 12 tasks this week, and 08 completed. Start with the heading "Project overview" and the project controls.

Show desktop at 1440px and mobile at 390px. On mobile, use a compact top bar and stack the projects. Keep the main button easy to reach and fit the page to the screen width. Use readable text, visible keyboard focus, labeled controls, sufficient contrast, and touch targets at least 44px tall. Include empty, loading, error, and success states. Respect reduced-motion preferences. Show both sizes before building more pages.

Glassmorphic & Layered

Use for: Portfolios, creative workspaces, and design tools.

Design: A dark teal background, frosted panels, thin translucent borders, and layered cards.

On mobile: Stack the panels and reduce the blurred areas.

Prompt tip: Put a solid surface behind text when blur is unavailable or the reader prefers reduced transparency.

Read or copy the prompt manually

Design a project dashboard with frosted glass panels.
- Use a dark teal and midnight-blue gradient background.
- Put navigation and projects on translucent panels with thin light borders.
- Use bright, readable text and a solid mint main button with dark text.
- Separate the panels with spacing, soft shadows, and a little background blur.
- Highlight cards on hover or keyboard focus while keeping their contents in place.
- On mobile, stack the panels and reduce blur and overlap. Keep the text contrast clear.
- Use solid panels when blur is unavailable or the reader prefers reduced transparency.

Use the fictional project board in the screenshot: Website refresh, Community meetup, and Launch checklist. Keep the screenshot text, navigation labels, project status, next tasks, and Create project button. Keep the totals: 03 active projects, 12 tasks this week, and 08 completed. Start with the heading "Project overview" and the project controls.

Show desktop at 1440px and mobile at 390px. On mobile, use a compact top bar and stack the projects. Keep the main button easy to reach and fit the page to the screen width. Use readable text, visible keyboard focus, labeled controls, sufficient contrast, and touch targets at least 44px tall. Include empty, loading, error, and success states. Respect reduced-motion preferences. Show both sizes before building more pages.

Make the prompt your own

Describe who the page is for and the one action they should take.
Replace the fictional project board with your own page, content, and features.
Choose one visual direction and attach its screenshot. Mention exactly what you like.
Ask for desktop and mobile versions before expanding the design to other pages.
Check readability, keyboard navigation, touch targets, and loading and error states in the working page.

The selection is inspired by styles 1, 5, 7, 12, and 17 in Felix Haas’s Prompt Library for UI. WYN wrote the prompts and built the sample screens for this guide.

Keep building

Back to AI Collective tips Browse all guides

Sources

Prompt Library for UI by Felix Haas (styles 1, 5, 7, 12, and 17)