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 styles you have already added, click "Library."
If you select "Add style," a window for creating a custom style opens. Enter a name and add the style data in the field below. Then click "Save."
Your style will then be available when creating a Vibe Block.
If you open the style library, select a style from the list or browse styles by category. You can also search 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 it and click "Edit." You can also copy or download the style.
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 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.
