Vibe Coding Experiment

Vibe Coding is a lightweight method of experimenting with code and design by working directly with editable files inside the `assets/` folder of a local Federated Wiki. This setup allows rapid iteration with live previews using the about frame plugin, and collaborative improvement using agents and ghost pages.

# Folder Structure A typical Vibelet experiment lives in a subfolder inside `assets/`. For example:

wiki/assets/ └── home/ ├── index.html └── plan.md

The `index.html` is your minimal working code. The `plan.md` describes what you're trying to accomplish and is read by agents or AI tools.

# Writing the Plan The plan file should clearly define: - The current state of the code - The goal (e.g. responsiveness, accessibility, animation, data binding) - Design constraints (e.g. no JS, no frameworks) - Step-by-step instructions or questions for agents - Expected output (e.g. updated HTML, a new Vibelet, or a ghost page)

Agents can then load and execute this plan, modifying `index.html` directly or preparing a draft as a ghost-page.

You can see the latest Vibe Coding Plan in wiki. As we progress with the experiment we will get the agents to use wiki-pages instead of markdown files - see Plan in Wiki.

# Running Agents If using CrewAI or Open Interpreter: - Point the agent to the folder containing `plan.md` and `index.html` - Load the contents of `plan.md` into a task or prompt - Allow the agent to generate and return updated HTML - Optionally, compare outputs and show them in a ghost page before merging

# Preview and Iterate Since Federated Wiki automatically serves `assets/` files, you can preview your Vibelet in a wiki page like this:

home

assets/home/index.html

This allows immediate visual feedback as you code and collaborate.

# Ghost Pages and Provenance You may optionally export intermediate versions as Federated Wiki ghost pages using JSON, with versioned links back to the source files. All changes can be reviewed, traced, and optionally signed for use in secure federated agent environments.

# Summary Vibe coding combines editable local files, prompt-based agents, and Federated Wiki to produce interactive, auditable, and creative code experiments. It offers a smooth entry point for collaborative intelligence workflows.

# See - github.com - github.com - github.com