wireframe-design

What problem does it solve?

Wireframes often fail to communicate intent clearly, leading to misinterpretations in specifications and costly rework. This skill provides structured guidance to ensure annotations convey components, data flow, and behavior, so AI-generated specs match designers' intent.

Core Features & Use Cases

• Clear annotation guidelines that emphasize component identification, data sources, behavioral requirements, and differences across layouts.
• A practical workflow that aligns wireframes with the Meta-Loop specification process, from wireframe capture to final spec generation.
• Use Case: A designer sketches a login screen; the AI reads annotated wireframes and produces a precise view spec for /ml-spec, ready for implementation.

Quick Start

Draw or import a wireframe, annotate it using the guidelines in this skill, and run the /ml-spec workflow to generate the corresponding specification.