Fixing Design Inconsistencies

Sometimes, your app output may not match your imagination or vision. In these cases, it’s important to know the steps to elevate the design output to match your envisioned look and feel as closely as possible - because your app deserves to look sharp!

Overview

First off, the style of writing your prompts is a big determinant in the kind of aesthetic Emergent will deliver. Let’s have a look at the right (and wrong) way to prompt your agent to get the best design out of it.

Average Prompt:

Looking plain, make it look amazing.

Why this prompt does not work:

• Too vague: What does looking plain mean? What needs to improve?
• No direction: How does the agent improve the design? What color palette’s would you like to see?
• No examples or references: Attach some color options you want to see, or an app reference that resembles your vision

A great prompt:

Make the font sizes consistent across the app, use #CDA991 throughout.

This prompt works because it follows the Effective Prompting Rules:

• It’s specific - what needs to change
• It’s descriptive - providing replicatable pointers to the app (a color hexcode, for example.)

Design - Specific Prompts

When it comes to designing your vibe-coded app, there’s a few ways to make your creation stand out from the rest:

The initial prompt

You must ensure that the basic design style for the app is conveyed to the agent from the very beginning. For example, if you want your design to be elegant, minimalist in the monochrome color palette that suits a modern tech landing page, your prompt should resemble:

Build a monochrome minimal tech landing page with:
- Black/white/gray color scheme only
- Smooth scroll animations and hover effects
- White line icons (minimal style)
- 4px rounded corners everywhere
- Sections: Hero, Features (4), How It Works (3 steps), Testimonials, CTA, Footer
- Use Tailwind CSS and keep it lightweight

Design should feel like modern SaaS products (think Vercel, Linear, Stripe style but monochrome).

This prompt ticks off the key rules for an effective design prompt:

• It’s specific: It mentions the colors we want, the desired look (4px rounded corners), and the icon style.
• It’s descriptive: It mentions the kind of animations we want and the CSS library to use (although this is not strictly needed, Emergent auto-selects modern libraries to ensure light, robust applications.)
• It has references: It clearly mentions reference websites that our agent can use to establish your expected design style.

If you want to take this to the next level, attach a screenshot of a website which has the design style and vibe you want to emulate!

Optimizing the design mid-build

There are times when you’re halfway through a build and you either

• Want to pivot to another design style
• See inconsistencies in the style in the app vs. your vision

In these cases, it is understandably frustrating to further prompt the agent and troubleshoot. However, here is the basic prompt structure that gives you a better chance of getting where you wanted:

Change [SPECIFIC ELEMENT] in [SPECIFIC LOCATION]:

Current: [What it is now]
Change to: [What you want instead]
Reason (optional): [Why you want this change]

Keep everything else as-is.

Ensure that you take screenshots of the sections you want to improve and share it with the agent for quick iterations!

Some Use Cases

1. Specific UI Changes

Here’s an example of a mid-build change where we want to alter a button:

The Best Prompt:

Change the primary CTA buttons:

Current: Black background with white text
Change to: White background with black text and 2px black border

Apply this to all CTA buttons (hero, final CTA section).
Keep hover effects the same.

A Bad Prompt:

"The buttons don't look good. Can you make them better?"

2. Spacing Issues

Sometimes, there are too many elements for the layout to render well. Here’s what we do in these cases:

The Best Prompt:

Increase spacing in the Features section:

Change: Gap between feature cards from 24px to 48px
Change: Padding inside each card from 24px to 32px

Desktop only - keep mobile spacing as-is.

A Bad Prompt:

"Make the features section more spacious."

3. Animation Issues

In case your app has those sleek animations and you want to finetune them, here’s how you go about that:

A Good Prompt:

Adjust the scroll animations:

Current: Elements fade in quickly (0.3s duration)
Change to: Slower, more dramatic fade-in (0.8s duration with 0.2s stagger)

Apply to: Features section and testimonials only
Keep hero animations as-is.

A Bad Prompt:

"The animations feel too fast."

Pro Tip: If you do not know the animation styles Emergent has used in your apps, you can ask the agent for the current duration and animation styles it is using on specific pages.

The Holy Grail of Design Tweaking Prompts

When it comes to Emergent, here is the category of tweaks and the corresponding ‘best practice’ prompt style your requirement may full under:

As always, attaching a screenshot of the UI issue in chat and describing what you want to see instead will be the cherry on top for all of these prompts.

Type A: Visual Style Tweaks

Use this format:

Element: [What element]
Property: [What CSS property]
Current value: [Current state]
New value: [Desired state]
Scope: [Where to apply]

Example:

Element: All section headings
Property: Font weight
Current value: 600 (semi-bold)
New value: 700 (bold)
Scope: All sections except footer

Type B: Component Replacement

Use this format:

Replace: [Component name/description]
Location: [Where it is]
With: [What you want instead]
Requirements: [Any specific needs]

Example:

Replace: The testimonial cards
Location: Social proof section
With: Simple text quotes with author names (no cards, no borders)
Requirements: Keep the 3-column layout, center-align text, use italic font for quotes

Type C: Add New Element

Use this format:

Add: [What to add]
Location: [Where to add it]
Style: [How it should look]
Behavior: [How it should work]

Example:

Add: A subtle gradient overlay
Location: Hero section background (over the current solid color)
Style: Linear gradient from transparent to rgba(0,0,0,0.05) top to bottom
Behavior: Should be static, not animated

Type D: Remove Element

Use this format:

Remove: [What to remove]
Location: [Where it is]
Replace with: [Nothing / Something else]

Example:

Remove: The subheadline text
Location: Hero section (below main headline, above CTA button)
Replace with: Nothing - just remove it and adjust spacing

Key Considerations to Always Remember

When it comes to tweaking designs, specificity and visual feedback to the agent is the golden standard. Here’s the quick and easy checklist to consider whenever refining your app design:

1. Use Visual Language:
   • “Move X above Y”
   • “Make X twice as large”
   • “Add 16px space between X and Y”
2. Reference Existing Elements:
   • “Make it match the hero button style”
   • “Use the same animation as the feature cards”
   • “Apply the footer color scheme here”
3. Specify Breakpoints:
   • “Desktop only (above 768px)”
   • “Mobile only (below 640px)”
   • “All screen sizes”
4. Be Explicit About Scope:
   • “Only the hero section”
   • “All buttons except the footer links”
   • “Every card in the features section”
5. Use Exact Values When Possible:
   • “32px padding” not “more padding”
   • “#F5F5F5” not “light gray”
   • “0.5s duration” not “slower”

If you’re unsure about what spacing, color hexcode or animation duration your app is currently using, you can always ask the agent for that information and tweak it accordingly.

A Quick Recap

As we have seen, the general build of your prompt should show a reference, the element you want to change, and what change you wish to see.

Change Type	Format	Example
Style Property	Change [element] [property]: [old] → [new]	Change hero button color: black → white
Spacing	[Add/Remove] [amount] [type] [location]	Add 24px margin below each feature card
Animation	Adjust [element] animation: [what to change]	Adjust card hover: scale 1.05 → 1.02
Layout	Change [section] layout: [old] → [new]	Change features: 2x2 grid → 1x4 row
Add Element	Add [element] to [location]: [specs]	Add gradient to hero: top to bottom fade
Remove Element	Remove [element] from [location]	Remove subheadline from hero section