Skip to content

Doc type

Designs

App screens on a board you can tap through.

A design is a board of UI screens in device frames, from a round watch to a browser. Screens link to each other, Present plays them as an app, and each comment names the element it is about.

InstallView on GitHub
"type": "design"

Tap through the app in Present. Present plays the screens full-window and follows the taps, with a back stack and each link’s transition.

What it’s for

Screens for every device you ship on.

The agent starts the board with its targets; each screen is a small HTML file in a device frame.

  • Watch

    Round and square watch faces.

  • Mobile

    Phone screens linked into a flow, with tabs, pushes and modals.

  • Tablet

    Tablet screens at their own size.

  • Desktop

    App windows for desktop software.

  • Web

    Pages and dashboards in a browser frame.

  • App icons

    An icon sheet for iOS and Android, with PNG export.

Features

What you can do on the page.

Pan across a board of device frames

Each screen sits in its device frame, side by side on a board you pan and zoom.

Select a screen to light its links

Links between screens are drawn as right-angle connectors. Select a screen to brighten its arrows in and out and count them; Flows shows every link.

Move a screen and watch its links reroute

Drag a screen and it snaps to the others’ edges; its connectors reroute around the screens. The move is a draft the agent gets with your changes.

Re-point a link as a draft

In Link mode (L), drag an arrow’s end onto another screen. The board and Present follow the draft at once.

Tidy up the board

Tidy up lays the screens out in layers with no overlaps and no crossings. Request changes sends the layout with the command that writes it into the doc.

Inspect the app icon sheet

One sheet shows the icon as iOS light, dark and tinted, Android’s masks and themed icon, the store icons and four home screens.

Export the PNG icon sets

Export PNG sets renders every PNG size with Contents.json and the adaptive-icon XML, and saves them beside the doc.

Compare a screen with an earlier revision

The Revisions tab puts a screen at two revisions side by side and marks its links New, Removed or Changed.

Overlay two revisions as an onion skin

Or lay the newer screen over the older one and slide the opacity between them.

Line up a screen and its variants

A variant is another take on a screen. Variants puts a screen and its variants side by side at one zoom.

Redraw every screen as a sketch

Sketch redraws every screen hand-drawn, with wobbly lines and a hand font. As drawn shows each at its own fidelity again.

Re-skin every screen with a theme pick

The brief lists themes as sets of tokens. Pick one and every screen re-skins at once.

Mix kits and frameworks on one board

Screens use the plain kit, its wireframe boxes, HorizonUI, HeroUI or Tailwind, all built in and offline, or your project’s own CSS. One board can mix them.

Comment on a button inside a screen

Point at an element in a screen. The comment’s key names the screen and the element, so the agent edits that element in that file.

Draw a frame to ask for a new screen

In Frame mode (R), drag a frame onto the board and label boxes inside it. It goes to the agent as a request for a new screen.

Works on every doc

Comments, revisions and approval, the same on every type.

See every shared feature

  • Send change requests to the agent

    Request changes previews your notes as Markdown, then sends them in one go.

  • Follow a comment to Resolved

    Notes go from Pending to Open when sent, and to Resolved when the agent’s revision says it dealt with them.

  • Approve the current revision

    Approve lists your picks and records the approval against this revision. The agent waits for it.

How the agent uses it

The agent writes JSON. The server draws the page.

The agent lists the artboards in the doc and writes each screen as an HTML fragment. data-nav on an element links it to another screen.

python3 <skill>/scripts/build.py new design docs/design/acme-fit.bluedoc.json --title "Acme Fit" --target watch,mobile,web --icons
python3 <skill>/scripts/build.py docs/design/acme-fit.bluedoc.json
python3 <skill>/scripts/serve.py open docs/design/acme-fit.bluedoc.json
acme-fit-design.bluedoc.json · the board
{  "type": "board",  "id": "main",  "targets": ["watch", "mobile", "web"],  "framework": "plain",  "entry": ["login"],  "artboards": [    { "id": "today", "title": "Today", "device": "phone", "fidelity": "hifi" },    { "id": "workout", "title": "Workout", "device": "phone", "fidelity": "hifi" }  ]}
acme-fit-design.design/today.html · a screen
<main class="screen safe stack gap-4" data-bd="today">  <h1 class="title">Today</h1>  <button class="btn primary block" data-bd="start-workout"          data-nav="workout" data-nav-label="Tap Start workout">Start workout</button>  <nav class="tabbar" data-bd="tabs">    <a class="tab" data-bd="tab-activity" data-nav="tab:activity">Activity</a>  </nav></main>

The server wraps each fragment in its kit, so the agent never writes <head>, framework links or tokens. Each screen runs sandboxed, with no network.

Install

Pick your agent.

Each one installs the same skill from the GitHub repository.

claude plugin marketplace add andreiverdes/bluedoc
claude plugin install bluedoc@bluedoc

Inside a session the same commands are /plugin marketplace add andreiverdes/bluedoc and /plugin install bluedoc@bluedoc. Start a new session to load the skill.

Needs: Python 3.9 or later on PATH · git, for code reviews · gh, only to import GitHub review threads.

View on GitHub

Other doc types

Six more kinds of page.