From an empty grid to a brand kit generator, in a few days. This is the path, and the prompts to follow it.
Before any content, only structure: a board on a 24px grid, a header and a footer. Every later decision had a place to land.Prompt 1 ↓
One dark surface, one accent, hairline borders. Defined once as variables so every screen, and these pages, share them.
The empty cells turned into logo, palette, browser and app icon modules, all fed by the same brand data.Prompt 2 ↓
A "What goes here?" panel to choose each slot's content, and one-step export of the whole board as an image.
The bottom toolbar moved into a floating side panel, the header got slimmer. Same tokens, less noise.Prompt 3 ↓
Three prompts, in the order they were used. Paste each into your AI coding tool and replace everything in [brackets].
A grid board with header and footer, no content yet.
Build a web app called [App name]: a brand kit board on a [24px] grid. Stack: [React + TypeScript + Vite + Tailwind]. Layout: a top header bar, a centered board with a [4 x 3] grid of empty slots, and a footer. Style: dark, one accent color [#9890fd], hairline borders, no shadows. Start with structure only: no content inside the slots yet.
Turns empty tiles into brand modules.
Turn the empty grid slots into modules. Each slot can hold one of: [logo, color palette, browser mockup, app icon]. Rules: - Every module renders from the same brand data: [brand name, colors, logo]. - Slots can be merged by dragging across neighbouring tiles. - Keep undo/redo working for every change. Do not add new libraries unless strictly needed.
Side panel and slim header, using your tokens.
Refine the editor UI. Move the bottom toolbar into a floating side panel on the right with two tabs: [Grid] and [Fill]. Keep the header slim: brand, [breadcrumb with editable board name], undo/redo, [canvas size], preview and export. Reuse the existing design tokens. Do not introduce new colors, shadows or animations.