Fei Agent - Features

Last updated: August 18, 2025

Fei supports a wide range of real-world use cases — not just full screens or new components, but the everyday tasks developers handle all the time. Just pick the task you're working on, and Fei will tailor the experience to fit it.


NewElement.png

When should I use it?

You’re building a part of a screen - like a card, a sidebar, or a reusable form block.

What should I provide?

Describe the element in your own words, upload a Figma frame if you have one, or (even better) paste a relevant ticket - whichever works best for you.

How does it work?

Fei will turn your input into a clean, styled component using your project’s standards - and you can refine it further with follow-up instructions.


Describenewdesign.png

When should I use it?

You need to create a new screen but don’t have a Figma design yet. Great for internal tools or when product requirements are clear but visuals aren’t finalized.

What should I provide?

Describe the purpose and sections of the screen, or paste a product ticket.

How does it work?

Fei uses your project’s components to build a screen that fits your description - so it looks consistent with the rest of your product.


UItweak.png

When should I use it?

You’re making small visual updates - like spacing, padding, text, colors, repositioning an element on the screen or applying a visual polish.

What should I provide?

Let Fei know which component you’re adjusting and describe the tweak.

How does it work?

Fei finds the relevant piece of code and updates just what you asked for, leaving the rest of the component untouched.


Add UI Funcationality.png

When should I use it?

You want to add logic or interactions - like validation, toggles, conditional displays, or a new field or button.

What should I provide?

First, select the component this functionality belongs to. Explain the behavior in your own words, upload a Figma or paste a product ticket.

How does it work?

Fei modifies your code while keeping the existing layout untouched, so your functionality evolves without breaking visuals.


RedesignExisting.png

When should I use it?

You have a fresh Figma design for an existing screen, or you’re modernizing a legacy layout.

What should I provide?

Paste the Figma and select the existing screen you want to update.

How does it work?

Fei maps your current logic and states onto the new design - modernizing without rewriting everything from scratch.


NewVarient.png

When should I use it?

You’re creating a variation of an existing screen - for A/B testing, feature flags, user roles, personalization, or alternate flows.

What should I provide?

Point to the base component and describe how the new version should work. You can use Figma or text (or both) to define the new variant.

How does it work?

Fei updates the existing component to support multiple variations through conditional logic - not by duplicating it.


NewDesignComponent.png

When should I use it?

You’re introducing a new foundational component to your design system.

What should I provide?

Figma frame or a written description (or ticket) with details like states, props, and behaviors.

How does it work?

Fei creates a clean, reusable component that fits your design system - including variants and interactive states if needed.


redesign.png

When should I use it?

You’ve got a Figma update to a reusable component like Button, Tag, or Alert, with a new visual, layout design or state.

What should I provide?

The new Figma design and the name of the component.

How does it work?

Fei updates the component to match the new visual spec, while preserving all logic and props.


ModelingNewScreen.png

When should I use it?

You have raw business requirements or a rough idea but no clear design yet - and you want to visualize ideas fast.

What should I provide?

Describe the goals and structure of the screen, even loosely.

How does it work?

Fei proposes a draft layout with logical sections. You can preview it, iterate with change requests, and use it to spark design discussions or even ship faster.


ImproveComponentcode.png

When should I use it?

You want cleaner, more maintainable code - without changing how it looks or behaves.

What should I provide?

Just select the component - Fei takes it from there.

How does it work?

It upgrades your code to match best practices without affecting behavior or layout, and will let you know if anything was improved.


💬 Have another use case in mind?

Let us know! If there’s a type of task you’d like Fei to support, reach out and we’ll prioritize it.