# Front-End Agent

Transform Figma designs, screenshots, and prompts to functional front-end code in seconds

![BLACKBOX Front-end AI Agent - Create an email app](https://3920783324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0ljYkq7im6Eb0XTgcio%2Fuploads%2FtTDRjTpqcw9gxt2Kq79Z%2F433_1x_shots_so%20\(1\).png?alt=media\&token=fbdb7380-0539-4cf6-88cd-c97281ec4b8a)

The Front-End AI Agent is an innovative tool designed to streamline the creation of responsive front-end interfaces. By leveraging AI, it transforms Figma designs, screenshots, or text prompts into functional responsive front-end code.

### Key Features

* Accepts Figma designs, screenshots, or written prompts to generate front-end code
* Allows additional prompts, screenshots, or instructions to enhance or adjust the output
* Automatically provides responsive design—one optimized for desktop and one for mobile
* Easily copy the generated code for immediate use in your projects

### How to Use

{% embed url="<https://www.youtube.com/watch?v=z7f9yFvO4Jk>" %}

Visit [this link](https://www.blackbox.ai/screenshot) to start using the Front-end AI for free!

1. **Initial Input**
   * Provide a Figma design file, a screenshot, or a text prompt describing the desired interface.
   * Example Prompt: "Create a website like Spotify" or “Create a dark mode landing page”
   * For best results, ensure screenshots are clear and prompts are specific.
2. **Generate the First Version**
   * Submit your input, and the AI will process it to produce the front-end implementation.
   * The output includes two versions: one for desktop and one for mobile, ensuring responsiveness out of the box.
3. **Refine the Design (Optional)**
   * Review the generated code and preview.
   * Submit additional prompts, screenshots, or instructions to refine the result.
   * Example Refinement: "Add a sticky header and change the button color to blue."
4. **Copy and Implement**
   * Once satisfied, copy the code for either the desktop or mobile version (or both).
   * Integrate it into your project as needed.

### Tips for Best Results

* **Be Specific**: Detailed prompts or high-quality design inputs lead to more accurate outputs.
* **Iterate Gradually**: Start with a basic design and refine it step-by-step for complex layouts.
* **Test Responsiveness**: Preview both desktop and mobile versions to ensure they meet your needs.

### Limitations

* Complex animations may require manual additions post-generation.
* Backend logic is not included, for that you should use the [Fullstack Agent](https://docs.blackbox.chat/blackbox-ai-1/website/full-stack-agent).
* Input quality affects output—blurry screenshots or vague prompts may reduce accuracy.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.blackbox.chat/blackbox-ai-1/website/front-end-agent.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.