Web UI
AI web wireframe from a prompt
A Sketvio Web UI is one browser on the board: traffic lights, a URL, a 236px sidebar, a header with search, three metric cards, and a four-column table. The model fills the copy. The frame is always the same size so the page looks designed, not like scattered rectangles.
Written from the Sketvio compilers at Rajosa Tech. Reviewed 20 September 2026.
When to use Web UI
Use Web UI when you need a desktop dashboard people can point at in a meeting. A founder showing “this is the home screen.” A designer who wants real labels before Figma. You are not asking for a clickable prototype.
Skip Web UI if you need two phone screens (Mobile UI), a process diamond (Flowchart), or service boxes (Architecture). Asking “Web UI” for a system map will still draw a browser.
How generate actually works
Ask for one desktop page. The model returns nav labels, metric numbers, table copy, and an insight sentence. The compiler draws the 1440×900 chrome, the 236px sidebar, and the table grid.
Early Web UI generates were empty rectangles because we asked the model for pixels. The current path never sends coordinates. If you still have a board full of boxes with no type, it is an old save.
The footer account is a real string in the spec, not a generic “User.” Change it. The URL bar is also copy — it will not navigate.
What lands on the board
One 1440×900 chrome
The compiler draws a single desktop frame at a fixed origin. It does not sprinkle loose cards on the canvas. Sidebar, header, metrics, table, and an insight strip all live inside that window.
Copy, not pixels, from the model
The prompt asks for five nav items, three metrics, four columns, and four rows. Status cells stay short: On track, In progress, or Due. We stopped asking the model for x/y coordinates after it drew empty boxes.
A person in the footer
The sidebar ends with a named account — the default draft uses Maya Chen — so the wireframe feels inhabited. Change the name after generate if the product is not hers.
HabitFlow dashboard
Paste this on a board after you pick Web UI.
Web UI for HabitFlow dashboard at habitflow.app/dashboard. Nav: Dashboard, Habits, Stats, Members, Settings. Primary: New habit. Metrics for streak, completion, and active members. Table of today’s habits.
- Browser chrome with habitflow.app/dashboard
- Sidebar of five items, Dashboard active, Maya Chen in the footer
- Three metric cards and a four-by-four habit table
- Indigo primary button labeled New habit
- A one-line insight under the table
After the draft
- Edit a cell if the habit name is wrong.
- Do not expect a second page from one generate. Open another prompt or draw it.
- The wireframe is board elements. You can delete the sidebar if the real app is top-nav only.
- Share the URL. This is a sketch, not production HTML.
Mistakes that waste a generate
- Do not ask for five pages in one generate. You will still get one browser.
- Do not expect the URL bar to navigate. It is a label inside a wireframe.
- Do not treat the table as live data. Edit the cells; they are text on the board.
Related tools
Questions about Web UI
Why only one page?
Two browsers on one generate became two half-empty windows. One complete dashboard beats two outlines. Describe the next page in a second prompt on the same board.
Can I get a marketing landing instead of a dashboard?
You can ask. The compiler still uses the dashboard skeleton — nav, metrics, table — so a marketing page will look like an admin theme until you delete the table and draw the hero by hand.
Why did older generates look like empty boxes?
We used to ask the model for pixel JSON. It under-drew. Web UI now returns copy only. Code places every rect. If you still see a sparse board, you are on an old save — generate again.
Open a board and try Web UI.
Three starter boards. No card. The draft is editable the moment it lands.
Start free