Best Practices for Using Fei

Overview

Fei is designed to interpret Figma designs, extract metadata, and implement the design using local components from the codebase. It generates the necessary files in a designated folder (AutonomyGenerated), leaving final integration and backend connectivity to the developers.

Workflow

1. Input Handling

   • Provide a clean, structured Figma design.

   • While the agent can work effectively even with a disorganized design system, maintaining clear distinctions between reusable components and page-specific elements can improve accuracy and efficiency.

   • Much like a human developer, just reviewing the Figma design may not be enough, as some visual elements are not obvious to understand without explanations (e.g., notes from the design or product manager). The agent may misinterpret parts of the design during its visual semantic analysis. Providing textual implementation notes can help the agent better understand the design and produce a more accurate implementation.

2. Metadata Extraction and Component Matching

   • The agent analyzes the Figma input to understand the structure and layout. It attempts to map elements to existing local components in the codebase.

   • To improve accuracy, deselect folders containing non-reusable components that are not part of the design system. This minimizes conflicts and improves the agent's component selection.

3. File Generation

   • The agent creates implementation files and stores them in the AutonomyGenerated folder.

   • The agent also downloads all assets from the Figma design into a folder named assets. For performance reasons, only assets smaller than 1MB are downloaded to ensure better UI performance.

   • Developers must manually place these files in their appropriate locations within the project structure.

4. Developer Responsibilities

   • Remove mock data: The agent may include placeholder data; developers need to replace it with real data.

   • Connect to backend: The agent does not handle backend integration. Developers must wire up APIs and data sources.

   • Fine-tune component selection: In cases where the automatic component selection isn’t optimal, you can easily deselect or add components.

   • Validate and Customize Coding Standards: The agent learns coding standards by analyzing various components in the codebase. However, these components may not fully align with the organization's golden standard. You can re-trigger the learning mechanism on a selected set of components or manually edit the text description of the coding standards. Ensuring the coding standards match your expectations allows the agent to produce code that is more tailored to your organization.

   • Provide Feedback for Corrections: If the agent misinterprets something or makes an error in its implementation, you can provide feedback after reviewing the draft, and it will correct itself accordingly.

   • Use .autonomyignore for Exclusions: If there are files or folders you do not want the ACE (Agentic Context Engine) to analyze, you can create a .autonomyignore file, similar to .gitignore. This can be useful for:

     • Protecting private or sensitive parts of the codebase.

     • Preventing the agent from learning from code owned by other teams that is not relevant.

     • Avoiding references to legacy code that should not be used.

Optimizing Agent Performance

• Reduce Component Overlap: The more distinct and well-defined the components are, the easier it is for the agent to choose the correct one.

• Use a Clear Naming Convention: Consistent naming in both Figma and the codebase helps with accurate mapping.

• Avoid Excess Unused Components: The agent performs better when it only considers relevant, reusable components.

By following these best practices, teams can maximize the efficiency and accuracy of Fei, reducing manual intervention and speeding up the design-to-code workflow.