Update Existing Screen & Generate a New Task - Preview, Build, and Evolve Your UI

Fei Studio lets Designers, Product Managers, and Engineers work directly with their UI inside the real product - whether that means evolving something that already exists or creating something brand new.

You can start in one of two ways:

• Generate a New Task - describe a new page, screen, or component and generate it from scratch

• Update Existing Screen - locate an existing screen or component and evolve it

Both paths come together once a preview is ready.

This guide walks you through the full flow:

Locate or create a component → Preview it → Request changes → Review versions → Send to developers.

1. Start a New Task

Choose your project

Use the project selector at the top of the sidebar to choose the workspace you want to work in.

Create a new task

Click New Task in the sidebar.

✨ Generate a New Task

Use this when you want to:

• Create a brand-new page, screen, or component

• Describe new functionality that doesn’t exist yet

• Start from an idea, a sketch, or a Figma design

🪄 Update Existing Screen

Use this when you want to:

• Modify an existing screen or component

• Redesign layouts

• Add functionality to something that already exists

If “New Task” is missing

Ask your Admin to confirm the project is in Ready status.

A. Generate a New Task – Describe What You Want to Build

1. Describe the new component, screen, or page you want to create

You can be as detailed or as high-level as you like:

• What the component is for

• How it should behave

• Any important UI or interaction details

2. Add a screenshot (Optional)

To make sure Fei understand the layout and UI you imagine, you can add a screenshot:

• A detailed screenshot from Figma or other tools

• A component you liked in other sites or apps

• Or even a rough sketch (yes, even a napkin sketch)

• (Connection to Figma are coming soon…)

3. Start the Generation Process

When ready, click Generate.

Fei will create the component from scratch, using your project’s components and standards.

This step can take a bit of time - Fei is setting everything up behind the scenes, planning the task and generating the code.

When done, Fei loads a preview of the component or screen.

A. Update Existing Screen - Help Fei Find the Right Component

Before making any change, Fei needs to understand which UI element or screen you want to work on.

You can help Fei locate it using a screenshot, a text description, or both together.

1. Upload or Paste a Screenshot (Recommended)

The most accurate way to target a component is to show Fei what you’re talking about.

You can:

• Click the + camera button to upload a screenshot

• Paste a screenshot directly into the field

Screenshots give Fei strong visual context, especially when your app has repeating patterns or similar components.

(Only one screenshot can be attached at a time - hover to remove it.)

2. Add a Short Text Description (Optional)

A few words help Fei confirm intent or distinguish between similar components.

Examples:

• “The login page”

• “The item card with the price at the bottom”

• “The campaigns list view”

You can combine text + screenshot for best results.

3. Start the Locate Process

Click Find Component.

Fei will:

• Analyze your screenshot

• Interpret your description

• Search your codebase

• Spin up a fresh workspace for the task

This step may take a moment - Fei is preparing your environment behind the scenes.

When done, Fei loads a preview of the component or screen.

2. Preview the Component

When Fei finishes identifies the right component or creating, you’ll see a live preview on the right.

You can scroll and interact with it to confirm Fei found what you intended.

⭐ Component Preview Note

Preview runs in a simplified environment:

For rendering this specific component preview, Fei may temporarily create mock data or disable certain functionalities (like navigation links).

Do not worry, this does not affect your actual application code and the component will behave as usual in your live app.

This ensures previews remain consistent, fast, and safe.

❓If Fei Found the Wrong Component

Click Replace Component.

You can:

• Paste or upload a clearer screenshot

• refine your text description

• use both together

Fei will repeat the locate process and reload the preview.

3. Request Changes

Once the created or existing component is shown, describe what you’d like to evolve in the Change Requests panel.

Change requests can support a wide range of updates:

• UI tweaks

• Add new elements (buttons, inputs, sections)

• Redesign the layout

• Create a new view of data and link it to this one

• Add logic or interactivity (e.g. drag-and-drop)

• Add new modals with additional functionality

• Adjust structure, spacing, and behavior

Each request creates a new version of the component.

Fei will:

• Apply your request

• Write a short success message summarizing the update

• Add a new version to your task history

• Refresh the preview

You can continue refining and changing the UI as many times as needed.

💡Pro Tip: You can ask multiple changes in the same request.

4. Review and Compare Versions

Every time Fei generates code, a new version appears in your task timeline.

Switch between versions using:

1. “Jump to This Version” in the Change Requests panel

2. The Version History dropdown at the top (V01, V02, V03…)

Previewing older versions is helpful for design exploration or decision-making.

Requesting changes from an older version

If you try to request more changes while previewing an earlier version, Fei will ask:

Do you want to jump to the latest version first, or continue from this one?

This keeps your workflow flexible while avoiding surprises.

5. Review Toolbar (Navigation & Actions)

At the top of the screen, you’ll find actions that help you navigate and manage your task:

6. Work on Multiple Tasks in Parallel

Fei Studio was built for real-world workflows.

Start new tasks at any time

You can create a new task even while another is running or waiting for review.

Recent Tasks

The sidebar shows the current project’s tasks from the past 30 days.

Switch instantly

Click any task to reload its:

• Preview

• Version history

• Conversation

• Task details

Draft tasks are editable.

Sent or discarded tasks open in read-only mode.

7. Send Your Changes to Developers

When you're happy with a version:

1. Ensure it's marked as Current Version

2. Click Send to Devs

3. Confirm in the modal

Fei prepares everything for engineering.

⭐ After sending:

Fei shows:

“All set! Your task and its changes are on their way to your devs. Here’s the PR you can share: <PR_LINK>”

Share the link with anyone who should review the your changes.

8. What Makes Fei’s PRs Unique (Developers Love This Part)

Beyond clean diffs and structured commits, Fei Studio includes something developers rarely get:

✨ A direct link back to the task in Fei Studio - with a live preview of the updated UI.

This gives developers:

• A visual reference

• Interactive preview of the component

• Version history

• Context behind each change

No guessing. No static screenshots.

Just the real UI, exactly as the PR intends it to look.

What else is inside the PR?

Your task is now complete and ready for your developers’ review. 🎉