DEV Community

Cover image for Your AI-Generated UI Doesn't Need Another Gradient
Akkarapon Phikulsri
Akkarapon Phikulsri

Posted on AI-assisted

Your AI-Generated UI Doesn't Need Another Gradient

Impeccable: The missing design vocabulary for agents

Turn AI slop into interfaces you’re proud to ship. Impeccable gives your agent the design expertise to build from scratch, improve what you have, and stay true to your design system.

favicon impeccable.style

The feature works. The buttons respond. The data loads.

But the screen still feels off.

There are cards inside cards. Every heading has an icon. Every status is a colorful badge. A giant title takes up half the space above a table that actually needs the room.

Imagine trying to fix that with one more prompt:

Make this look more professional.

What should “professional” mean here? Less decoration? Better spacing? A completely different layout?

That ambiguity is a good reason to give the next request a smaller job.

Prompt Impeccable is a collection of 35 focused UI/UX prompts stored as standalone Markdown files. Instead of treating polish as one big redesign, it breaks the review into specific concerns: hierarchy, typography, tables, forms, loading states, accessibility, and more.

Here's a practical way to use it without getting stuck in an endless redesign loop.

Start with the task

Consider a hypothetical document-processing app.

A user opens the document list to answer three questions:

  • Did the upload finish?
  • Is the document ready?
  • If processing failed, how can it be retried?

Keep those questions beside the component while reviewing it. They give you something more useful than “make it modern.”

For this example, a proposed cleanup could look like this:

Element Proposed change
Document name Give it the strongest emphasis in each row
Processing status Keep a readable label visible
Retry action Make it discoverable on failed items
Updated timestamp Keep it available, but visually quieter
Decorative icon beside every label Remove where it adds no information
Nested card wrappers Replace with rows or simpler grouping where appropriate

This is an illustrative design proposal, not a tested before-and-after result. A different product might need a different treatment.

The important part is the reasoning: each change should support what someone came to do.

Pick the relevant prompt

You don't need to run all 35 prompts against every screen.

The repository includes a table and data-grid prompt for data-heavy views.

  • Table / Data Grid UX
/impeccable

Refine this table or data-heavy interface for fast scanning.

Prioritize:

* important columns
* alignment
* readable row density
* clear headers
* predictable actions
* useful filtering
* sorting
* pagination
* selection states

Reduce:

* icons in every cell
* excessive badges
* unnecessary borders
* oversized rows
* repeated information

Keep row actions visually secondary until needed.

Make large amounts of information easier to compare.
Enter fullscreen mode Exit fullscreen mode

There are also separate prompts for card reduction,

  • Card Reduction
/impeccable

Audit all cards and containers on this interface.

For every card, determine whether a visual container is actually necessary.

Flatten unnecessary cards.

Avoid:

* card inside card
* every section becoming a card
* excessive borders
* excessive shadows
* oversized radius
* decorative surfaces

Prefer:

* sections
* lists
* rows
* whitespace
* subtle separators
* typography

Keep cards only where they provide meaningful grouping.
Enter fullscreen mode Exit fullscreen mode

icon discipline

/impeccable

Review icon usage across this interface.

Preserve icons that improve:

* navigation
* recognition
* actions
* status
* scanning

Remove icons that are:

* decorative
* repeated unnecessarily
* placed beside every heading
* placed beside normal metadata
* duplicating obvious text
* used only to fill space

Do not make the interface icon-free.

Reduce icon density rather than removing iconography entirely.

Functional icons should remain.

Decorative icons should disappear.
Enter fullscreen mode Exit fullscreen mode

design-system consistency.

/impeccable

Audit this interface against the existing product design system.

Find inconsistencies in:

* spacing
* typography
* colors
* radius
* shadows
* buttons
* inputs
* cards
* badges
* icons
* states

Reuse existing components and tokens wherever possible.

Do not introduce a new visual pattern when an existing pattern already solves the problem.

Reduce one-off styling.
Enter fullscreen mode Exit fullscreen mode

For the document list, start with the table review. Open the Markdown file, read it, and give its instructions to your coding assistant along with the relevant component and the task you're trying to improve.

Then add project-specific boundaries. For example:

Review the document-list component using the supplied table prompt.

Users need to check processing progress and retry failed documents.

Keep search, sorting, pagination, permissions, and API behavior unchanged.
Use the existing components and design tokens.
Do not change other screens.

Before editing, explain the proposed changes and any trade-offs.
Enter fullscreen mode Exit fullscreen mode

This additional brief is an original example, not a copied repository prompt.

Read the proposal before approving it. If the assistant suggests removing the owner column, check who uses that information. An administrator reviewing shared uploads may need it even when a single-user account doesn't.

Simpler doesn't mean emptier

A cleanup can go too far.

Suppose the new layout hides document status in a menu. The screen might look calmer, but the user now has to open each item to find the failed upload.

That's not an improvement for the task above.

The repository's information-density prompt explicitly warns against hiding useful information merely to simplify the interface.

  • Information Density Optimization
/impeccable

Optimize the information density of this interface.

Reduce unnecessary visual noise without making the interface empty.

Keep important information visible and easy to scan.

Group related information together.

Reduce duplication.

Move secondary details into quieter presentation when appropriate.

Avoid solving complexity by simply hiding useful information.

The goal is:

high information value with low visual noise.
Enter fullscreen mode Exit fullscreen mode

Try reducing emphasis before removing content. A timestamp can use quieter text. Row actions can remain accessible without looking like primary calls to action. Related metadata can share a line instead of occupying separate boxes.

Likewise, don't remove every icon. Keep a recognizable action or status symbol when it helps. Question the icon whose only job is filling an empty corner.

Check the awkward states

Once the populated screen looks reasonable, test the versions that aren't in the happy-path demo.

What happens before the first upload? During processing? After a failed request? When a search returns nothing?

Prompt Impeccable has dedicated prompts for empty, loading, and error states.

For the hypothetical app, distinguish an empty library from an empty search result. One could offer an upload action; the other could offer a way to clear filters.

For errors, only promise recovery actions the application supports. Don't add a “Retry” button with no retry behavior behind it, and don't invent a failure reason the backend never supplied.

Then try the main path with the keyboard and on a narrow screen. Use the accessibility audit as a checklist—not as proof that the result meets an accessibility standard.

Keep the change reviewable

After each pass, inspect the diff and repeat the original task.

Can you identify the document? Read its state? Find the retry action? Do sorting and pagination still work?

If a visual cleanup also changes fetching logic or introduces a new dependency, ask why that belongs in this change. Keep unrelated work separate unless there's a clear reason to include it.

There isn't a prompt that can make that judgment for your product. These files provide a useful review brief; you still need to check the implementation.

Pick one screen that feels unfinished. Choose the prompt closest to its actual problem. Make one small change, then use the screen again.

Impeccable UX/UI Prompt Collection

A modular collection of 35 targeted UX/UI prompts designed to eliminate AI-generated sloppiness, enforce design system consistency, and elevate web applications to production-grade craftsmanship.

Each prompt is stored in its own standalone markdown file under this directory, ready to be used individually or combined for specific design, refactoring, and code review purposes.


🎯 Categorized by Purpose

1. General Polish & AI-Slop Elimination

Targeted prompts to eliminate common AI design tropes (excessive containers, decorative gradients, random badges) and restore visual discipline.





Top comments (0)