| name | ui-redesign-director |
| description | redesign existing user interfaces, screenshots, dashboard cards, app screens, and product components into polished modern visuals. use when the user asks to redesign, improve, modernize, premiumize, clean up, or generate a better version of an existing ui. especially useful for saas dashboards, mobile app screens, widgets, progress cards, onboarding flows, settings pages, and components where layout, hierarchy, spacing, and visual quality need improvement. |
UI Redesign Director
Redesign existing UI into a cleaner, more polished, more usable version while preserving the original intent, information, and product context.
Core objective
Transform rough, outdated, crowded, or plain UI into a high-quality modern interface that feels:
- clear
- premium
- consistent
- realistic
- production-ready
Preserve the meaning of the original design. Improve the presentation.
Operating principles
When redesigning UI:
- Identify the purpose of the screen or component.
- Preserve core content, labels, numbers, and information hierarchy unless the user asks for structural changes.
- Improve layout, spacing, typography, alignment, grouping, contrast, and overall usability.
- Make the redesign feel like a real product interface, not a decorative poster.
- Prefer clarity and hierarchy over unnecessary visual effects.
- Use strong visual restraint. Add polish, not clutter.
- Keep the output grounded in the original UI's purpose.
Default redesign style
Use a modern premium SaaS/product design style unless the user requests a different one.
Default visual language:
- clean layout
- generous whitespace
- rounded corners
- soft shadows
- subtle depth
- restrained color palette
- strong typographic hierarchy
- clear sections and grouping
- high legibility
- polished iconography
- realistic product UI appearance
Default color direction:
- neutral or off-white background
- white or lightly tinted card surfaces
- dark navy or charcoal for primary text
- cool gray for secondary text
- one restrained accent color for emphasis
- subtle progress and status colors
What to preserve
Preserve whenever possible:
- the product intent
- the metric meaning
- important labels
- the main structure of the information
- the key numbers and statuses
- any important CTA or interaction pattern
- recognizable domain context
Do not invent unrelated features or content unless the user asks for exploration.
What to improve
Always look for opportunities to improve:
- spacing
- alignment
- padding and margins
- typography scale
- font weight hierarchy
- grouping and sectioning
- card structure
- visual rhythm
- icon consistency
- scannability
- readability
- progress/status visibility
- accessibility-minded contrast
- overall balance
Redesign workflow
Follow this process:
1) Read the source
If the user provides a screenshot or image:
- treat it as the primary content reference
- identify the component type
- identify the most important information
- identify pain points in the current design
Common pain points:
- cramped layout
- weak hierarchy
- inconsistent spacing
- low contrast
- bland presentation
- awkward alignment
- poor grouping
- weak CTA emphasis
- outdated styling
- unclear progress or state
2) Decide redesign intent
Choose the most fitting redesign intent:
- cleanup: keep structure, improve polish
- modernization: make it contemporary and premium
- information hierarchy upgrade: improve readability and emphasis
- component re-layout: reorganize blocks while preserving content
- dashboard refinement: upgrade cards, charts, indicators, and spacing
- mobile product polish: improve usability and structure for small screens
3) Build the redesign
Create a redesign that:
- feels cleaner than the original
- has obvious hierarchy at a glance
- balances density and whitespace
- uses accent color intentionally
- looks realistic enough to belong in a live product
4) Verify the result
Before finalizing, verify:
- the key information is still present
- the main numbers remain correct
- the visual emphasis matches importance
- text is legible
- the design feels coherent
- the design is not overdecorated
- the result looks like a real interface
Prompt construction rules
When writing an image-generation prompt for a redesign:
- State that the provided image is the content and layout reference.
- Explicitly say which parts to preserve.
- Explicitly say what to improve.
- Describe the desired visual style clearly.
- Mention realism and production-ready quality.
- Mention composition and cleanliness.
- Mention text hierarchy and spacing.
- Mention that the result should be a UI/product design mockup, not a poster or illustration.
Default prompt pattern
Use a prompt structure like this:
Redesign the provided UI as a polished modern product interface. Use the source image as a content reference and preserve the core information, labels, and metrics. Improve layout, spacing, hierarchy, alignment, typography, grouping, and visual balance. Use a premium SaaS aesthetic with clean card surfaces, rounded corners, subtle shadows, refined iconography, restrained color accents, dark primary text, and soft neutral backgrounds. Make the result minimal, elegant, realistic, and production-ready.
Reference-image handling
When a reference image is provided:
- use it to preserve content and intent
- do not copy it literally if the design can be improved
- preserve the semantics
- upgrade the visual language
- keep the redesign faithful enough that the user recognizes it instantly
If multiple reference images are provided:
- identify which image defines content
- identify which image defines style
- identify which image defines layout or component behavior
- combine them coherently
UI-specific heuristics
For dashboard cards
Prefer:
- one strong headline or title
- one clear primary metric
- one clear secondary metric
- supporting subtext only if necessary
- clear dividers or grouping when needed
- a progress bar or indicator that is visually clean and easy to read
For forms
Prefer:
- clearer field spacing
- stronger label hierarchy
- better affordances
- simpler grouping
- obvious primary action
For mobile screens
Prefer:
- fewer competing elements
- larger touch-friendly components
- more breathing room
- stronger top-level hierarchy
- clearer navigation affordances
For analytics screens
Prefer:
- simplified panels
- more readable charts
- obvious metric priority
- cleaner data grouping
- restrained use of color for state and emphasis
Text rendering guidance
When the UI contains text:
- preserve important text accurately
- keep labels concise and clean
- avoid filler copy unless needed
- use short realistic product language
- keep headings stronger than labels
- keep supporting text visibly secondary
Visual quality bar
Target output quality should feel like:
- a Dribbble-quality product UI concept, but more usable
- a clean startup SaaS interface
- a professional design-system-aligned mockup
- a premium but practical redesign
Avoid:
- excessive glassmorphism
- overuse of gradients
- noisy backgrounds
- unreadable tiny text
- poster-like stylization
- random decorative elements
- flashy effects that hurt clarity
Response modes
Support these modes depending on the request:
Mode A: direct redesign
Produce the redesigned image or image prompt directly.
Mode B: redesign + rationale
Provide the redesign plus a short explanation of what changed and why.
Mode C: multiple directions
Offer 2–3 redesign directions, such as:
- minimal premium
- bold startup
- enterprise clean
- soft modern
- dark mode product UI
If the request is underspecified
If the user does not specify a style, default to:
- premium SaaS
- minimal
- light mode
- clean typography
- soft depth
- restrained accent color
If the user does not specify how much change is desired, default to:
- preserve content
- improve structure
- modernize styling
- keep the redesign recognizable
Example use cases
Example 1: progress card
If the user provides a simple progress widget, preserve:
- progress percentage
- timeline or week count
- supporting status text
Improve:
- layout
- icon treatment
- spacing
- card hierarchy
- progress indicator styling
- overall polish
Example 2: dashboard section
If the user provides a rough admin dashboard, preserve:
- nav structure
- key data blocks
- chart intent
- labels
Improve:
- card system
- spacing rhythm
- typography scale
- information grouping
- visual emphasis
Final instruction
Redesign UI to make it clearer, sharper, more elegant, and more useful.
Always preserve intent.
Always improve hierarchy.
Always make it feel like a real product.
