skills.rest
jpavley
jpavleyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

wireframe-design

Convert annotated wireframes into precise Meta-Loop view specifications.

3|Updated Feb 5, 2026
Search Tags:#design#documentation#specification#UI#annotations#wireframe
One-click install
npx skills add https://github.com/jpavley/meta-loop-ios --skill wireframe-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe-design
Source: https://github.com/jpavley/meta-loop-ios/tree/main/skills/wireframe-design
Command: npx skills add https://github.com/jpavley/meta-loop-ios --skill wireframe-design

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about wireframe-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert annotated wireframes into precise UI specifications?▼

Annotated wireframes drive precise UI specifications by using structured guidelines that emphasize component identification, data sources, and behavioral requirements, ensuring AI-generated specs match the designer's intent without costly rework.

What is the best way to annotate a wireframe for AI spec generation?▼

The best way to annotate a wireframe for AI spec generation is to clearly label UI components, define data flow, document behavioral requirements, and note layout differences so the AI produces matching view specifications.

Why do my wireframe specifications fail to communicate design intent clearly?▼

Wireframe specifications fail to communicate intent clearly when annotations lack structured guidance for components, data flow, and behavior, leading to misinterpretations and costly rework during the implementation phase.

Can I use digital mockups to generate Meta-Loop view specs?▼

Yes, you can use digital mockups to generate Meta-Loop view specs by importing them, applying the skill's structured annotation guidelines, and running the specification workflow to produce implementation-ready outputs.

Do I need to annotate layout differences when creating wireframe specifications?▼

Yes, you need to annotate layout differences when creating wireframe specifications because highlighting variations across layouts ensures the AI generates accurate behavioral and component specifications for each view.

Related Skills

Explore More Design & Creative Skills→
guilhermemarketingguilhermemarketing
59

guimkt-wireframe-landing-page

Generate two-phase wireframe landing pages from client briefings.

Community
Advanced
TomazWangTomazWang

block-a-spec-validation

Create and validate project specs before implementation handoff.

Community
Advanced
himaxxhimaxx
1

ui-ux-designer

Designs wireframes, prototypes, and token-based component libraries with WCAG compliance and user research.

Community
Advanced
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

developpeur-front

Convert validated HTML mockups into production-ready frontend code.

Community
Advanced