Skip to content
ChalkScriptAI
Start with a sketch

ChalkScript AI · sketch → prototype

Your whiteboardis closer tosoftwarethan you think.

Photograph a hand-drawn wireframe. ChalkScript AI reads the boxes, labels and arrows, and turns them into an editable, interactive web preview — something you can click, not a wall of generated code.

Start with a sketchWatch a sketch compile
A hand-drawn wireframe in chalk: a browser window for a page called Launch checklist, with a task input, an Add button, filter tabs and three tasks with checkboxes. The task list has been recognised and replaced by a working list you can tick.

● Concept preview — the first build reads hand-drawn website wireframes.

fig. 01 — whiteboard, partly compiled

02 — The compile table

Watch one sketch become something you can click.

Press compile and follow the page as it’s read, structured and rendered. Then use it: add a task, filter the list, rename the heading — every edit lands in the project JSON.

Interactive concept demo — the transformation is simulated in your browser. Nothing is uploaded.

Sketch ready. Press Compile sketch to start.

fig. 02 — the same idea on paper (illustration). Labels turn mono once they’re read.

Hand-drawn wireframe of the Launch checklist page: a top bar with an avatar, a heading, a line of copy, a task input with an Add button, All / Open / Done filters, a list of three tasks and a count. Margin notes say the button is primary, the list is a container and the count is live.

output · launch-checklist

idle

No structure yet.

Press Compile sketch, or step through 01–04 yourself.

Inspector available once the sketch is compiled

button#button-1 → style.backgroundColor

03 — From thought to structure

Four moves from marker to model.

  1. 01

    Capture

    Photograph the whiteboard, the notebook page, the back of the napkin. A PNG or JPEG is enough.

  2. 02

    Interpret

    A multimodal vision model reads what you drew — headings, text, inputs, buttons, images, containers — and roughly where each one sits.

    Gemma 4 is the intended model.

  3. 03

    Structure

    The reading becomes validated project JSON: one element per box, with an id, a type, a position and a size. That JSON is the source of truth.

  4. 04

    Explore

    React renders the JSON as a live preview. Select an element, change its text or colour, inspect the structure.

    PNG export is in progress.

04 — One sketch, many shapes

Different drawings.
Different software.

Every kind of technical drawing carries a different structure. The first build reads website wireframes; the other plates show where the same idea is headed.

plate 01 · website wireframes

First build

ProfilenameAda L.email updateson / off?SAVEsketch

Profile

Email updates
output

Boxes become inputs, toggles and buttons you can actually press. This is what the first build is focused on.

  • text
  • button
  • input
  • image
  • container

05 — Inside the transformation

Pixels in.
Structure out.

The photo goes to a server route that asks a multimodal vision model to name the elements it can see and where they sit. Its answer is parsed and validated against the project schema — only then does the browser render anything. The JSON, not the photo, is what you edit.

  1. 01

    Input

    A photo of the sketch.

    multipart · field “image”

  2. 02

    Regions

    The vision model marks what it sees.

    Gemma 4 · intended model

  3. 03

    Relations

    Boxes are grouped into a hierarchy.

    layout · containment

  4. 04

    Contract

    Checked before anything renders.

    zod · wireframeProjectSchema

  5. 05

    Preview

    React renders the JSON as a page.

    /workspace · editable

Concept visualization of the planned pipeline. Real model output will vary with the sketch.

First build — in development

  • Hand-drawn website wireframes● first build
  • text · button · input · image · container● first build
  • Edit text and colour in the inspector● first build
  • Structure view of the project JSON● first build
  • PNG export◐ in progress

Next — roadmap

  • Architecture diagrams○ planned
  • ER diagrams and database schemas○ planned
  • User flows○ planned
  • Chat edits that change the JSON○ planned
  • draw.io export○ planned

06 — Before / after

Same idea.
Now it has edges.

fig. 01 from the top of the page, beside the interface it describes. Every boundary on the right sits exactly where a chalk line was. Drag the divider, or focus it and use the arrow keys.

Before · whiteboard

After · editable preview

On the left, the hand-drawn Launch checklist wireframe. On the right, the same layout as a finished interface: navigation, heading, task input with an Add button, filters, three tasks and an image, each outlined where its sketched box used to be.

07 — Who it’s for

For people who think
with a marker in hand.

  • 01

    Engineers & architects

    You sketched the settings screen during the review. Leave the room with a preview the team can click, not a blurry photo in the chat.

  • 02

    Product builders & indie hackers

    The weekend idea lives on a notebook page. Turn the page into a clickable starting point before you open an editor.

  • 03

    Technical founders & PMs

    Show the flow you mean, not the one people imagine. Share something editable instead of describing boxes over a call.

  • 04

    Students

    See how a drawn box maps to a real element — a heading, an input, a button — and read the JSON that describes it.

08 — Early access

Put the marker down.Open the prototype.

ChalkScript AI is in early development. The first build turns hand-drawn website wireframes into editable previews; architecture, ER and flow diagrams are on the roadmap. Early access opens as the first build firms up — watch the repo to follow along.

Start with a sketchFollow the build on GitHub(opens in a new tab)

● /workspace is the in-progress first build · no account needed

fig. 01, resolved — every chalk line is now a boundary.