Wireframes

wiresmith renders a project as an infinite, pannable canvas: each flow a labelled lane, each screen an isolated device frame, with navigation wired across frames so you can click through the product.

The files it reads

Alongside the spec/ folder, a project carries the rendering inputs:

wiresmith.yml                                    project name and asset folders
design.md                                        the design tokens: colour, type, spacing
flows/<flow>/[NN-]<id>.<device>[.<state>].html   one file per screen variant
flows/<flow>/meta.yml                            optional title, description and order
flows/<flow>/annotations.yml                     optional notes shown beside the screens
flows/<flow>/*.css                               optional CSS scoped to this flow
docs/                                            optional markdown, shown in a Docs tab

Naming a screen file

The file name is the contract, so a screen never declares itself twice:

So 01-overview.mobile.html is the overview screen on mobile, sorted first, in its default state, and 01-overview.mobile.empty.html is that same screen empty. Anything in the folder that does not parse as a screen, like meta.yml, is simply skipped.

Each device renders at a fixed size, which is the canvas you are composing against:

The optional files

meta.yml gives a flow a human title, a description and an order among the other flows. annotations.yml is a list of { screen, note } entries, the design rationale shown beside the screens, which is where a note belongs rather than written on the mockup itself. Any .css in the folder is injected into that flow's screens only, after the design system.

Interactions

Links between screens use an explicit id model: a trigger carries data-wf-to="<target-id>", and the target screen carries a matching id. wiresmith wires them into a clickable prototype and flags any link whose target does not exist.

The canvas

Four views sit behind the top bar:

• Screens, the pannable board of flows and frames.
• Spec, the spec/ folder rendered as prose, so the source of truth sits one tab away from the screens.
• Design, the design system reference.
• Docs, any markdown you shipped under docs/.

The canvas is spec aware. Because the model carries the parsed spec and the check findings, each frame can show:

• a drift flag when a rendered screen is not in the spec,
• a coverage ghost for a spec'd screen that renders nothing yet,
• a finding badge for any check that fails on that screen.

From a selected screen you can jump straight to its flow in the Spec tab, so a drift is one click from the line that explains it.