Fei Best Practice: Recommended Flow for Complex Runs

Last updated: January 8, 2026

This guide explains the recommended workflow for creating or redesigning a UI component in FEI IDE, especially for complex runs where accuracy and visual alignment matter.

Goal of This Flow

The goal is to accurately recreate or redesign a UI component so it visually matches a reference (image or Figma) while keeping the process simple, iterative, and controllable.

Instead of trying to get a perfect result in one step, this flow relies on progressive refinement.

Step 1: Start With a Visual Reference (Image / Figma)

Begin by providing a clear visual reference, such as:

  • A screenshot

  • A Figma design

  • A mockup image

  • Detailed description of the component

What to Include in the Instructions

When attaching the image, explain:

  • What the component is

  • What it’s used for

  • What the main goal is

Example Prompt

Please create the infrastructure for this component.

This is a Recording Component that should be used for record-like actions.

Keep it simple, but try to make it visually similar to the image.

Expected Outcome

At this stage, the generated result may look rough or inaccurate.

That’s expected — this step is about structure, not perfection.

Step 2: Use “Redesign Existing Screen”

Once the basic component exists:

  1. Choose Redesign Existing Screen

  2. Select the relevant component

  3. Use a very simple instruction

Example Prompt

Align with the image provided

Why This Works

  • It focuses on visual alignment

  • It improves layout, spacing, and structure automatically

Step 3: Iterate (Expect Multiple Passes)

You will usually need 2–3 iterations.

  • First iteration: Major layout improvements

  • Second iteration: Better alignment and proportions

  • Each iteration gets closer to the reference image

This is normal and recommended.

Step 4: Add Specific Missing Details

Once the layout is close, provide very specific feedback about what’s still wrong or missing.

Focus on things like:

  • Icons

  • Colors

  • Fonts

  • Sizes

  • Spacing

Example Prompt

Try to make the icons the same as in the image.

Use Material Icons.

The text should be white (currently it’s black).

Result

After this step, the component usually reaches a high-quality and visually accurate result.

Key Best Practices

  • ✅ Start simple — don’t over-instruct at the beginning

  • ✅ Use images or Figma whenever possible

  • ✅ Rely on Redesign Existing Screen for visual accuracy

  • ✅ Iterate instead of trying to be perfect in one step

  • ✅ Be very specific only at the final refinement stage

Summary

This flow works best because it:

  • Separates structure, layout, and details

  • Uses AI strengths progressively

  • Produces better results with less frustration

If you follow these steps, you’ll consistently get cleaner, more accurate UI components with minimal effort.