Wireframe Skill

Generate ./wireframe.html directly from STN design files in ./design/.

Core Contract

This skill is for rapid GUI prototyping from STN. The output must look like a real application wireframe, not a visualization of the STN tree.

• Render the screen structure as recognizable product UI: app bars, navigation, panes, toolbars, tables, cards, lists, tabs, forms, actions, assistant panels, empty states, and content areas.
• Do not render STN as a nested outline, raw block tree, inline label dump, or generic placeholder stack.
• Treat STN as semantic intent. Parent/child/sibling relationships, quoted strings, bindings, variants, conditional markers, and responsive annotations together determine the interface.
• Parse STN syntax deterministically, then let the agent infer UI intent. Do not build exact-name mapping tables as the primary rendering strategy.
• The viewer template provides chrome, controls, and a baseline wireframe vocabulary. The generated wireframe output is not limited to the CSS already present in viewer.html.
• Generate additional document-specific CSS whenever it improves fidelity, as long as it keeps the output wireframe-like rather than high-fidelity visual design.

No standalone generator script owns the semantic rendering. The agent reads the design files, builds a syntax tree, infers UI intent, copies the canonical viewer shell, injects generated CSS and document payloads, and writes wireframe.html.

STN Reference