REF_01 // INTRODUCTION

System Documentation

This documentation reflects what is currently implemented and working in Mini App Factory.

01Introduction

Mini App Factory generates multi-file static websites from a single prompt, then lets you iterate with AI transforms, manual code edits, and a live preview.

Generate

Create a project from a prompt. The system outputs multiple HTML files with shared partials when appropriate.

Iterate

Use transform prompts, targeted element edits, and polish passes to refine the output.

02Quick Start Guide

Create a project, wait for the generation pipeline, then iterate in the editor.

Example_Prompt.txt

A minimalist dashboard for a satellite telemetry system.
Use a dark palette with neon cyan accents.
Include a real-time clock and status indicators in the header.
Add data visualization cards in the main grid.

Tip

Include layout, tone, and content constraints to get consistent structure and better first-pass output.

03Architecture Specs

The pipeline is: prompt → design spec → multi-file HTML output → editor transforms → polish → publish or export.

Storage

Projects and files are stored in Convex. Editor changes sync automatically while you work.

Multi-file Output

Generated sites can include shared partials like `partials/header.html` and `partials/footer.html`.

04/generate

Generates a project from a prompt. Returns multiple files as code blocks which are parsed into the editor.

Request_Payload.json

{
  "prompt": "Build a retro-futurist landing page for a robotics lab",
  "projectName": "robotics-lab"
}

05/transform

Applies targeted edits to the current project files. You can optionally include the active file and a selected element.

Request_Payload.json

{
  "files": [/* full project file list */],
  "prompt": "Make the hero headline tighter and add a gradient underline",
  "activeFile": "index.html"
}

06/polish

Runs a structured refinement pass for typography, motion, and responsive layout using the transform engine.

Request_Payload.json

{
  "files": [/* full project file list */],
  "polishDescription": "improve typography hierarchy, add subtle animations, refine mobile spacing"
}

07Tool Call Schema

Transform operations are executed through structured tool calls. Each call must be a JSON object with a tool name and args.

Tool_Call_Example.json

[
  { "tool": "replaceContent", "args": { "file": "index.html", "selector": "h1", "newContent": "Hello" } },
  { "tool": "updateStyle", "args": { "selector": ".hero", "properties": { "gap": "24px" }, "action": "merge" } }
]

Constraints

File paths must be relative (no leading slash, no .. segments).
Supported file types: .html, .css, .js.
Use partials for shared layout: header.html and footer.html.
Selectors should be specific (IDs/classes over tag names).

08Model Selection

The editor lets you choose the provider and model for transforms. Vision-capable models are tagged in the selector.

09Editor & Preview

Edit files directly, switch between preview/code/split views, and preview multi-page navigation.

Undo/redo, quick open, and file tree navigation are available in the editor.

10Export ZIP

Export your project as a ZIP with all files and a generated README.

11Deploy

Deployment lets you publish a live URL directly from the editor. Choose the deploy option that fits your workflow, then follow the prompts to connect any required accounts and confirm your publish settings.

After a successful deploy, the editor displays the live URL and repository link (when applicable) so you can share or continue iterating.

Use the dashboard to redeploy or export at any time without re-opening the editor.

12Project Settings

Project settings live at /edit/[projectName]/settings, including deployment info and metadata/SEO controls.

REF_01 // INTRODUCTION

System Documentation

This documentation reflects what is currently implemented and working in Mini App Factory.

01Introduction

Mini App Factory generates multi-file static websites from a single prompt, then lets you iterate with AI transforms, manual code edits, and a live preview.

Generate

Create a project from a prompt. The system outputs multiple HTML files with shared partials when appropriate.

Iterate

Use transform prompts, targeted element edits, and polish passes to refine the output.

02Quick Start Guide

Create a project, wait for the generation pipeline, then iterate in the editor.

Example_Prompt.txt

A minimalist dashboard for a satellite telemetry system.
Use a dark palette with neon cyan accents.
Include a real-time clock and status indicators in the header.
Add data visualization cards in the main grid.

Tip

Include layout, tone, and content constraints to get consistent structure and better first-pass output.

03Architecture Specs

The pipeline is: prompt → design spec → multi-file HTML output → editor transforms → polish → publish or export.

Storage

Projects and files are stored in Convex. Editor changes sync automatically while you work.

Multi-file Output

Generated sites can include shared partials like `partials/header.html` and `partials/footer.html`.

04/generate

Generates a project from a prompt. Returns multiple files as code blocks which are parsed into the editor.

Request_Payload.json

{
  "prompt": "Build a retro-futurist landing page for a robotics lab",
  "projectName": "robotics-lab"
}

05/transform

Applies targeted edits to the current project files. You can optionally include the active file and a selected element.

Request_Payload.json

{
  "files": [/* full project file list */],
  "prompt": "Make the hero headline tighter and add a gradient underline",
  "activeFile": "index.html"
}

06/polish

Runs a structured refinement pass for typography, motion, and responsive layout using the transform engine.

Request_Payload.json

{
  "files": [/* full project file list */],
  "polishDescription": "improve typography hierarchy, add subtle animations, refine mobile spacing"
}

07Tool Call Schema

Transform operations are executed through structured tool calls. Each call must be a JSON object with a tool name and args.

Tool_Call_Example.json

[
  { "tool": "replaceContent", "args": { "file": "index.html", "selector": "h1", "newContent": "Hello" } },
  { "tool": "updateStyle", "args": { "selector": ".hero", "properties": { "gap": "24px" }, "action": "merge" } }
]

Constraints

File paths must be relative (no leading slash, no .. segments).
Supported file types: .html, .css, .js.
Use partials for shared layout: header.html and footer.html.
Selectors should be specific (IDs/classes over tag names).

08Model Selection

The editor lets you choose the provider and model for transforms. Vision-capable models are tagged in the selector.

09Editor & Preview

Edit files directly, switch between preview/code/split views, and preview multi-page navigation.

Undo/redo, quick open, and file tree navigation are available in the editor.

10Export ZIP

Export your project as a ZIP with all files and a generated README.

11Deploy

After a successful deploy, the editor displays the live URL and repository link (when applicable) so you can share or continue iterating.

Use the dashboard to redeploy or export at any time without re-opening the editor.

12Project Settings

Project settings live at /edit/[projectName]/settings, including deployment info and metadata/SEO controls.