> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fimo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Vibe Coding 101

> Learn how to build with Fimo by guiding AI step by step.

Vibe coding is about **building by feel, not by code**.

Instead of writing every line yourself, you describe what you want, guide Fimo’s AI with prompts, and refine step by step. It’s less about coding skills, more about **having a clear vision** and learning to communicate it.

***

## The vibe coding philosophy

At its heart, vibe coding is about staying in **flow**:

* **Start with an idea**: A bakery site, a portfolio, a landing page.
* **Guide the AI**: Use prompts to describe structure, content, and style.
* **Iterate**: Review what Fimo builds. Tweak with UI editors or refine your prompt.
* **Publish**: Make it live when it feels right.

Think of it as **talking to a helpful builder** who listens and builds in real time.

Like sketching a drawing or building LEGO, you don’t aim for perfection first, you start, then improve.

***

## Principles of vibe coding in Fimo

Here are five simple rules to keep in mind:

1. **Clarity beats complexity**\
   Write clear, focused prompts. Simple always works better than long, messy instructions.

2. **One step at a time**\
   Add a hero section first. Then add testimonials. Then restyle buttons. Breaking it down makes results smoother.

3. **Use the right tool**\
   AI for creation. UI for editing. Don’t burn credits on fixing typos when the CMS can do it instantly.

4. **Iterate, don’t restart**\
   Treat each draft as a step forward. Adjust prompts or refine in Preview instead of wiping everything.

5. **Human in the loop**\
   The AI builds, but you guide. Your taste, ideas, and choices set the direction.

***

## From idea to site

<Steps>
  <Step title="Write your first prompt">
    Example: *“Make me a homepage for my bakery with a hero section, menu, and contact form.”*

    See [Prompt Engineering 101](/guides/prompt-engineering-101) for tips on writing better prompts.
  </Step>

  <Step title="Preview instantly">
    Fimo shows you the draft in the **Preview window**. This is your sandbox, safe to experiment.

    Learn more in the [Preview overview](/preview/overview).
  </Step>

  <Step title="Refine step by step">
    * Add a prompt like: *“Add a testimonials section with three customer quotes.”*
    * Edit directly in **CMS** to fix typos or update text.
    * Use the **style editor** to adjust fonts, colors, and spacing.

    Explore [Edit mode](/preview/edit) for details.
  </Step>

  <Step title="Test responsively">
    Switch to **Responsive Mode** to see how it looks on phones and tablets.

    Learn more in [Responsive mode](/preview/responsive).
  </Step>

  <Step title="Publish live">
    Click **Publish**. Your site goes live at `yourproject.fimo.site`.

    See [Deployment](/publish/deployment) for details.
  </Step>
</Steps>

***

## Collaboration as conversation

Vibe coding isn’t just you and the AI, it can be your whole team:

* Teammates comment directly in Preview.
* Editors update text in CMS.
* Designers restyle in the style panel.

It’s like sketching together on the same canvas. Everyone sees changes in real time. Learn more about how to [collaborate](/project/collaboration).

***

## Common mistakes to avoid

Even with good vibes, it’s easy to slip:

* **Overloading prompts**: Asking for too many changes at once leads to confusion.
* **Retrying too much**: If it’s close, just edit in the UI instead of re-prompting endlessly.
* **Being too vague**: “Make it better” tells Fimo nothing.
* **Forgetting Preview is safe**: Don’t hold back, nothing you do there affects your live site.

<Tip>
  Follow the golden rule: **Create via AI, edit via UI**. It saves credits and keeps things smooth.
</Tip>

***

## Why vibe coding works with Fimo

* **AI handles the heavy lifting**: layouts, sections, and structure.
* **UI gives you control**: edit text, swap images, tweak styles.
* **History protects you**: roll back anytime if things go wrong.
* **Preview is your sandbox**: a safe place to explore and try ideas.

***

## Workflow at a glance

<Steps>
  <Step title="Imagine">
    Think of the type of site you need and its key parts.
  </Step>

  <Step title="Prompt">
    Tell Fimo in plain words what to build first.
  </Step>

  <Step title="Iterate">
    Add prompts or tweak directly in Preview, Content, or Styles.
  </Step>

  <Step title="Collaborate">
    [Invite](/project/collaboration) teammates to comment, edit, or review in real time.
  </Step>

  <Step title="Publish">
    When happy, click [Publish](/publish/deployment) to go live.
  </Step>
</Steps>

***

## Remember

Vibe coding is about **flow, not perfection**:

* Start fast.
* Stay clear and specific.
* Refine in small steps.
* Share the work with others.
* Publish when it feels right.

<Tip>
  You don’t need to “code” in the traditional sense. With Fimo, **your words are the code**.
</Tip>