# March 12, 2024

**DevMode Plus** is a tool provided by Function12 that combines design optimization algorithms and AI to analyze and explore design information suitable for frontend UI development, supporting developers in their development process.&#x20;

**CodeGen** is a tool that automatically converts design data into UI code (React, Flutter, HTML5, etc.) to be utilized by frontend developers.

New features added:

1. **(Upgrade) Inspector Panel**: \
   A panel providing options for Frontend UI Framework, styles, and assets that can be utilized when writing frontend publishing code.&#x20;

   A. **(Upgrade) Code tab:** \
   &#x20;  Generates code tailored to Frontend UI Frameworks (React, Flutter, HTML, etc.) and style frameworks (CSS, Tailwind, Dart, etc.) necessary for publishing.&#x20;

   &#x20;  a. **(Upgrade) Inspector tab**: \
   &#x20;       Provides basic style code, tokens, and assets.&#x20;

   &#x20;  b. **(Upgrade) Style tab**: \
   &#x20;       Provides style code related to selected objects in the chosen framework.&#x20;

   &#x20;  c. **(Upgrade) Edit tab**: \
   &#x20;       A tool for customizing frontend UI code and styles.&#x20;

   B. **(Upgrade) Screen Style tab**: \
   &#x20;    Provides styles within the screen.&#x20;

   C. **(New) Assets tab**: \
   &#x20;    Allows copying and downloading of tokens (color, font) and assets (vector, image) within the screen.
2. **(New) UI Kit Panel**:&#x20;

   A. **(New) Figma Components**: \
   &#x20;   Provides a list of Figma components.&#x20;

   B. **(New) Project Assets**: \
   &#x20;   Allows copying and downloading of tokens (color, font) and assets (vector, image) within the project.
3. **(Upgrade) Preview Mode**: \
   Allows viewing of analyzed code results through preview mode.


---

# 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.function12.io/release-note/march-12-2024.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.
