A design that keeps up with the app, and turns what you change into cards.
Not in 0.3.0. Design is built and arrives with the next alpha release.
A design is a plain folder in the workspace's state, ~/.grid/<name>/designs/<slug>, that you can open and edit like any other, linked to one repository in a project; a project has at most one design per repository. Start it blank, with Scan the running app to rebuild the app's screens as the first version, or from an Existing folder, which Grid copies in and works on from then on; your own folder is never edited.
It holds HTML pages and can also hold PDFs, images, video, slide decks, code files and zips, sorted into sections: pages, components, docs, motion, slides, styles, assets and imported.
Each design lists the viewports it supports, picked from presets that run from a 4K desktop through tablets and phones to watches, TVs and kiosks, or a custom size. An HTML page is shown at one of those sizes at a time, inside a browser frame for a desktop and a device frame for a tablet or a phone.
Chat on the left, the design on the right. Pick the model and effort in one menu; the account is the one you have active, and the chat's account chip switches it. Select, Comment and Edit are the canvas modes: Comment pins comments to the screen. Zoom in and out or fit, and switch the canvas background between checkerboard, grey and dark so a white page is easy on the eyes.
The design chat runs on Claude, whichever provider runs your cards.
Every save, chat turn and import keeps a version of the design, and Changes since built shows the diff between the version you last marked as built and the latest one. ✦ Create cards compares the design with the code on main and the running app, two ways:
| WAY | WHAT HAPPENS |
|---|---|
| Check now, pick the cards | You pick the model and effort, Grid proposes a handful of cards with related changes grouped into a masterplan with subcards, and the ones you tick start in Prepare, plus an optional catch-all card. |
| Open a research card | You pick the difficulty, and a research card works out what is needed and files a few masterplans that start in Prepare. |
Nothing lands in the Backlog. Filed cards link back to the design, and backlog ideas and card sessions in the same project show its design.
Import files… copies single files or a zip into the design folder; a zip is unpacked under imported/, and when a file already exists you choose skip, overwrite or keep both. Import from live compares the design with the running app first and lists, file by file, what changed in both, what is only in the live app and what is only in the design. Nothing changes until you import the files you picked as a new version, so your own design edits are never silently overwritten.