Vibe Coding is a visual editing mode. Instead of describing where something is, you point at it - then describe what you want to change.Documentation Index
Fetch the complete documentation index at: https://docs.foenix.ai/llms.txt
Use this file to discover all available pages before exploring further.
How it works
- Open a session and click Vibe Coding in the bottom toolbar
- Your live site appears in the center panel
- Click any element - text, image, button, heading, section
- The selected element is highlighted with an orange dashed border
- Describe the change in the text field on the right
- Foenix finds the exact file responsible and applies the change
What you can edit
| Element | What you can change |
|---|---|
| Text / heading | Content, font size, color, weight, alignment |
| Image | Replace image, change alt text, adjust size |
| Button | Label, color, border radius, link target |
| Navigation item | Label, URL, visibility |
| Section / block | Layout, background, spacing, visibility |
Example prompts
Tips
- You can switch between Vibe Coding and the chat panel at any time in the same session
- If you select the wrong element, click elsewhere to deselect and try again
- For changes affecting multiple elements at once, use Direct Edits instead
- Works with both classic themes and block (FSE) themes