Help Center
How to Create a Vibe Block Using DESIGN.md
Add a DESIGN.md style to a Vibe Block to create blocks with a consistent design.
Important: DESIGN.md describes a design, including its colors, typography, and components. The AI Agent reads the file and creates blocks in the same style.
Adding DESIGN.md to a Vibe Block
Add a Vibe Block to the page, click the plus icon, and select DESIGN.md from the list.
In the context menu, click "Add style" to add your own style and use it for generation. To view the styles you have already added, click "Library."
If you select "Add style," a pop-up for creating your own style will open. Enter a name and add the style data in the field below. Then click "Save."
Your style will then become available for use when creating a Vibe Block.
If you have switched to the style library, select a style from the list or find a suitable style by category. You can also use search to find a style by name.
To use a style, click it in the list.
Then click Apply style.
In the style card, you can also read the full description, copy the style, or download it to make your own changes.
In the style card, you can also read the full description, copy the style, or download it to make your own changes.
In the library, you can also switch to the tab with your styles.
To add another style, click "Add style" in the library.
To apply a style, click it in the list or open the three-dot menu. The menu includes "Apply," "Edit," and "Delete."
To edit a style, open the style pop-up, edit it, and click Save.
Example of Using DESIGN.md
If no style is selected in the block, enter a prompt and start generation.
In this case, the AI model will choose the style for creating the Vibe Block.
If a DESIGN.md style is selected when generating the block, it will appear in the "Context" field.
Important: Only one DESIGN.md style can be used per generation.
The Vibe Block will then be generated according to the selected DESIGN.md style.
