PanelSpec: layout handoff for Cursor Composer — design coordinates first, paste prompt second (free tool)

Showcase Built for Cursor
1

PanelSpec workflow — design, generate, paste into Cursor

The problem

I kept asking Cursor to build UI from descriptions like “make an iPhone login screen.”

The code looked fine. Placement was wrong — safe areas ignored, controls invented, WinUI vs WinForms mixed up.

The issue wasn’t Cursor. It was the brief. Screenshots and vibes aren’t a layout spec.

What I built

ismartbase Panel Designer — free in the browser, no install:

  1. Pick a real device (iPhone 17 Pro Max, Android, Mac, Windows Form, web, etc.)
  2. Drag components with pixel coordinates + safe areas
  3. Click Generate PanelSpec prompt → JSON + a handoff prompt for SwiftUI / HTML / WinUI / Compose / WinForms

Then paste that into Cursor Composer as the first message.

Why this works in Cursor

PanelSpec is a layout contract, not “draw a login screen”:

  • bounds in logical px (canvas-absolute)
  • hostRelativeBounds for tab/group children
  • renderOrder / zIndex
  • linkToPageId navigation rules (tab selection alone does not navigate)
  • safeArea + systemChrome (Dynamic Island, title bar, etc.)
  • Per-type mapping: text-field → TextField, button → Button, etc.

Cursor stops improvising structure and implements what’s specified.

My workflow

Design (2–5 min) → Generate PanelSpec → New Cursor chat → paste prompt → Agent builds View/Page

If something’s off, I fix bounds in the designer and regenerate — not rewrite the whole chat.

Example

iPhone login: Sign In title, Username, Password, Log In — placed inside safe area on iPhone 17 Pro Max. Export → paste → SwiftUI layout matches within a few px.

Free vs paid

  • Free: design, export JSON, copy AI prompt (no account)
  • $4.99/mo: cloud save / projects (optional)

Questions for the community

  1. Anyone using structured layout prompts vs mockups in Composer?
  2. Would a .cursor/rules snippet for PanelSpec be useful?
  3. What platform should I prioritize — SwiftUI, WinUI 3, or HTML?

I’m the builder. Feedback welcome — especially what breaks when you paste the export into Agent mode.

4

Great tool — I built something complementary that handles the layout/coordinates side of the handoff if anyone is struggling with pixel-perfect placement.

1 Like
6

don’t hesitate to share it in here or make a Showcase/Built for Cursor about it!