Skip to content
Ileen Docs

Tutorial 1: Design Mode — From Idea to Production

What you’ll build: A fully planned, architecturally designed, and actively developed software project — entirely driven by conversation with AI agents.

Time to complete: 20–30 minutes for the design phases; coding runs in the background.

Prerequisites: An Ileen account with a credit balance. See Quick Start if you haven’t signed up yet.

Overview

Design Mode guides new projects through four sequential agents. Each one unlocks when the previous stage is complete.

AgentWhat it does
🏛️ AI ArchitectGathers requirements via conversation and generates an architecture plan
⚙️ Tech LeaderDesigns the system architecture, tech stack, and milestone roadmap
👥 Team LeaderBreaks each milestone into granular development tasks
💻 DevelopmentSets up Git repos and runs autonomous coding agents

Use the interactive demo below to explore each stage before you try it in the app.

Interactive Demo🎨 Design
Step 1 / 7
🏛️AI Architect●
›
⚙️Tech Leader🔒
›
👥Team Leader🔒
›
💻Development🔒
✦ New Project
Project name
E-commerce platform
Describe your project
A multi-vendor marketplace with real-time inventory, Stripe payments, and a React storefront. We need a REST API, an admin panel, and email notifications.
📎 Attach files
Create Project →
💡 Start by giving your project a name and describing what you want to build. You can attach reference files — images, PDFs, code snippets — as context for the AI.

Step 1 — Create a new project

  1. Open ileen.hypaz.com and sign in.
  2. In the left sidebar, click the project selector dropdown → New project.
  3. Fill in the modal:
    • Project name — a short, memorable name (e.g. E-commerce Platform).
    • Describe your project — write 2–5 sentences covering what you want to build, who will use it, and any known constraints. The more context you give, the better the output.
    • Attach files (optional) — drag in wireframes, existing API specs, competitor screenshots, or any reference that helps the AI understand your vision.
  4. Click Create Project. Ileen analyses your description and creates the project workspace.

Step 2 — Chat with the AI Architect

The AI Architect is a conversational agent that builds a precise picture of your requirements before generating any documents.

  1. You’ll see the Chat panel on the left and a live Project Summary panel on the right.
  2. Answer the Architect’s clarifying questions. Common topics:
    • User types and personas
    • Expected scale (users, requests, data volume)
    • Integrations with third-party services
    • Security and compliance requirements
    • Technology preferences or constraints
  3. Watch the Project Summary panel update in real time as the Architect extracts requirements from your conversation.
  4. You can also edit a past message by hovering over it and clicking the pencil icon — useful if you want to change direction without starting over.

Step 3 — Generate the architecture plan

When requirements feel complete, generate the formal Architecture Plan document.

  1. Click Generate Plan in the chat panel toolbar.
  2. A progress bar appears — plan generation takes approximately 3 minutes.
  3. The Plan Viewer opens automatically. It includes:
    • Auto-generated table of contents with collapsible sections
    • Executive summary, system architecture, database schema, API design, security model, deployment architecture, and a milestone roadmap
  4. Download the plan as Markdown or PDF using the buttons in the top-right of the viewer.

Step 4 — Review with the Tech Leader

The Tech Leader agent transforms your architecture plan into concrete technical decisions.

  1. Click Tech Leader in the agent pipeline (it unlocks after plan generation).
  2. Review the deliverables:
    • Component architecture with Mermaid diagrams
    • Final tech stack selection
    • Repository structure
    • Data flow and security design
    • Milestones — a phased roadmap with durations and dependencies
  3. Use the chat panel to iterate: “Change the backend from FastAPI to Django”, “Split the frontend into two separate repos”, “Add a mobile app milestone”.
  4. If you want to regenerate milestones entirely after a major change, click Regenerate milestones.

Step 5 — Break tasks with the Team Leader

The Team Leader agent produces the granular task list that coding agents will execute.

  1. Click Team Leader in the agent pipeline.
  2. Review each milestone’s task breakdown. Each task includes:
    • Title and description
    • Acceptance criteria
    • Dependencies on other tasks
    • Target repository
  3. Tasks are the direct input to the Development agent — verify they’re specific and well-scoped before proceeding.

Step 6 — Configure Git and start development

  1. Click Development in the agent pipeline.
  2. The Developer Setup screen asks for Git credentials for each repository defined in the Tech Leader stage:
    • Repository URL (HTTPS)
    • Personal Access Token (needs read/write access)
    • Toggle Share token across all repos if you’re using one account for everything
    • Target branch (defaults to main)
  3. Repositories must be empty — Ileen pushes the initial commit and structure.
  4. Click Save & Start Development.

Step 7 — Monitor the Development Dashboard

Once development starts, the Development Dashboard shows everything in real time.

  • Summary tiles — total tasks: completed / running / failed / todo
  • Elapsed time — total and average per task
  • Milestone tree — expand any milestone to see individual task statuses and timers
  • Lessons Learned — per-repo notes added by the coder agent; you can add, edit, or delete entries inline
  • The dashboard auto-refreshes every 15 seconds while jobs are active

If a task fails, it’s shown with a ✗ status. You can investigate the error in the task detail and click Resume Development to retry.

What’s next?