ZenCode AI – Complete User Manual
Back to ZenCode App

📘 Chapter 1: Getting Started — Your First Project

🚀 One-Shot Website Builder (All plans)

Turn a short description (plus optional image) into a complete, single-page site. Great for landing pages, resumes, and prototypes.

  1. Click Build a Website in the top bar.
  2. Describe your vision (brand, sections, tone, features).
  3. Optional: Upload an image. Colors and style will be inferred.
  4. Click Generate Website. Your index.html is created and ready to edit/preview.
Pro Tip: If your idea spans many pages, ZenCode will propose switching to the step-by-step chat flow.

🖥️ Main Interface

PanelFunction
Project Panel (Left)File tree, project actions
Editor Panel (Top Right)Code editor & preview
AI Assistant (Bottom Right)Talk to Architect / Surgeon / Librarian
Build a modern SaaS landing page for a time-tracking app. Sections: hero, features, pricing, FAQ. Primary color indigo. Include CTA buttons and a sticky header.

📁 Chapter 2: Managing Your Project Files

📂 Creating & Uploading

  • New Folder: Click the folder icon with a ➕
  • New File: Ask the Surgeon:
Create a new file named style.css
  • Upload: Use ⚙️ Project Actions or drag-and-drop files/folders into the Project Panel.

📥 Downloading & Previewing

  • Download File: Select a file → click ↓
  • Download Project: ⚙️ → Download as ZIP
  • Preview Image: Hover an image → click 👁️
Tip: Keep assets in /assets and reference with relative paths (./assets/hero.jpg) for portability.

🧠 Chapter 3: The Three AI Experts — Core Workflow

🏛️ Plan Mode: The Architect

Role: Planning & strategy (no manual code typing required).

Use for: Mapping big, vague ideas into clear blueprints and then auto-executing them step-by-step.

  1. Select Plan Mode: Toggle the AI Mode to Plan.
  2. Give a high-level goal:
I want a WordPress theme for my travel blog. List files and build order.
  1. Receive the blueprint: A step-by-step plan of files, features, and logical order.
  2. Auto-Generate Code: Run Execute Full Plan and the Architect + Surgeon will create each file and feature in sequence.
  3. Manual Control (optional): Instead of full auto, you can ask it to implement steps one by one.

⚡ Feature Spotlight: Auto-Execute the Plan

  • End-to-end generation: After the blueprint is ready, ZenCode can write the code for each step in order.
  • Manual or automatic: Let it run all steps, or run them one-by-one with edits between.
  • Pause / Resume: Stop after any step to review changes, then continue.
  1. Click Execute Full Plan to start automatic step execution.
  2. ZenCode generates code for Step 1, updates checked files, and summarizes what changed.
  3. It proceeds to the next steps. Use Pause to stop, make edits, then Resume.
Execute the full plan now. After each step, summarize the changes and pause if an error occurs.
Do only step 3 next: build the responsive navbar in index.html and style.css.
Plan ▶ Code idea (goal) blueprint (steps 1..N) auto step (code gen) review (pause/resume)

🖼️ Image → Plan (Visionary only)

On the Visionary plan, you can upload an image (UI mockup, screenshot, wireframe, or design) and ask ZenCode to analyze it, map a project plan, and then auto-generate the steps.

  1. Switch to Plan Mode and upload an image.
  2. Say: Create a development plan from this image. Identify components, pages, styles, and assets.
  3. Review the blueprint (files, components, build order).
  4. Click Execute Full Plan to generate code step-by-step (Pause/Resume anytime).
From this image, generate the plan, then auto-create the files and implement each step in order.
Plan Mode turns your idea (or image on Visionary) into a numbered plan, then (optionally) generates code step-by-step. Available on all plans.

👨‍⚕️ Normal Mode: The Surgeon

Role: Precise code operations: write, edit, refactor, fix.

Use for: Implementing features, changing styles, wiring APIs, debugging.

Golden Rule: The Surgeon only operates on the files you check in the file list.
In index.html, replace the hero image with ./assets/hero.jpg and add a CTA button linking to #pricing.

🧠 Vector Mode: The Librarian

Role: Deep knowledge & memory.

Use for: Understanding codebases, Q&A, retrieving context across files.

Golden Rule: Click 🧠 Vectorize to index files first. (Checkboxes not required in this mode.)
Explain how auth.js validates JWTs and where refresh logic lives.
Pro Tip: Brief with the Librarian → build with the Surgeon. Iterate fast, avoid guesswork.

🧩 Chapter 4: Advanced Workflows

🔄 Refactoring — Level up structure

Start simple (everything in index.html). As complexity grows, split responsibilities:

  • Move CSS into style.css
  • Move JS into app.js
  • Create components/partials (e.g., partials/header.html)
Refactor the inline styles into style.css, extract scripts to app.js, and update index.html links.

🖼️ Swapping Images — Precision vs. Vision

🔧 Forge Plan (Precision)

  1. Upload my-hero.jpg
  2. Switch to Normal Mode
  3. Check index.html
  4. Command:
Replace hero image URL with ./assets/my-hero.jpg

✨ Visionary Plan (Context-Aware)

  1. Upload image
  2. Say:
Swap the hero image with the one I just uploaded

The AI sees the image and adapts styles automatically.

AI Vision image ➜ colors, layout, mood site theme adapted

💾 Chapter 5: Project Lifecycle — Saving & Loading

  • Auto-Save: Work is saved continuously.
  • Name your project: Use the Project Name box.
  • Manage projects: Click 🗂️ to save, load, duplicate, or delete.

🔁 Versioning (manual)

Create checkpoints by downloading ZIPs after milestones (v1, v2…). Keep a CHANGELOG.md in the root.

# CHANGELOG - v1: Initial one-shot site - v2: Split CSS/JS, added pricing - v3: Swapped hero image, improved accessibility

🧭 Chapter 6: Features & Plans

⚡ Spark
(Apprentice)

Architect, Surgeon, One-Shot Builder

🔥 Forge
(Specialist)

All Spark + Librarian (Vector Mode)

✨ Visionary
(Master)

All Forge + AI Vision

📊 Comparison

FeatureSparkForgeVisionary
Plan Mode (Architect)✓✓✓
Normal Mode (Surgeon)✓✓✓
One-Shot Website Builder✓✓✓
Vector Mode (Librarian)—✓✓
AI Vision (image-aware changes)——✓
Image → Plan → Auto-steps——✓
Project ZIP Export✓✓✓
Priority Token/Compute—✓✓

🖼️ Vision Highlights

  • Image → Plan:
From this uploaded screenshot, create a build plan and then execute the full plan automatically.
  • Describe images:
Describe banner.png and suggest a matching color palette.
  • Style from logo:
Extract brand colors from logo.svg and apply to the site.
  • Context-aware edits:
Make the CTA match the dominant hue in hero.jpg.

Inline Graphic

Code + Vision <button class="primary">Buy Now</button> .primary { background: indigo; } Buy Now

❓ FAQ & Troubleshooting

"The AI didn't change my file."

Make sure the file is checked (Surgeon mode) or vectorized (Librarian). Re-run the command.

"One-shot generated the wrong layout."

Be more specific about sections, color palette, and examples. Add an image for style guidance.

"It forgot earlier context."

Vectorize key files and ask the Librarian to summarize them for quick refreshers.

Scroll to Top