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.

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.

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.

Some Use Cases

1. Specific UI Changes

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

2. Spacing Issues

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

3. Animation Issues

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

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:

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"

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.