skills.rest
fieldsphere
fieldsphereOFFICIAL
Explore all skills by this author →
GitHub

mockup

Create UI mockups aligned with API states and design-system constraints.

37|20|Updated Mar 2, 2026
Search Tags:#handoff#design-system#stateful#annotation#mockup#ui-prototyping
One-click install
npx skills add https://github.com/fieldsphere/cursor-team-marketplace-template --skill mockup-fieldsphere
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup
Source: https://github.com/fieldsphere/cursor-team-marketplace-template/tree/main/plugins/design/skills/mockup
Command: npx skills add https://github.com/fieldsphere/cursor-team-marketplace-template --skill mockup-fieldsphere

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create production-ready UI mockups tied to real API states and the project's design system, enabling polished handoffs and faster design-to-engineering collaboration.

Core Features & Use Cases

  • Align mockups with backend states (loading, empty, success, error, and permission-restricted) to ensure realistic visuals.
  • Produce an annotation layer that details element purpose, bound API fields, interaction behavior, and validation rules for developers.
  • Deliver a handoff-ready package including a component inventory and reusable tokens, with implementation notes for engineers.
  • Ensure design-system alignment and accessibility considerations are reflected in every mockup.

Quick Start

Create a production-ready UI mockup for a target screen that reflects live API responses and attach an annotation layer for handoff.

Frequently Asked Questions about mockup

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

FAQPage Schema
How do I create UI mockups that reflect real API loading and error states?▼

Yes, you can align mockups with your design system by enforcing design-system constraints and applying reusable tokens, ensuring every generated screen adheres to established component standards.

What is the best way to prepare design handoff specifications for engineers?▼

Generate handoff-ready mockups by attaching an annotation layer that defines element purpose, bound API fields, interaction behavior, and validation rules, plus a component inventory for engineering implementation.

Can I map data contracts to UI mockups for both web and mobile screens?▼

Yes, you can map data contracts to UI mockups for both web and mobile screens, applying state coverage and design-system constraints to ensure consistent visual outputs across platforms.

How do I annotate UI mockups with bound API fields and validation rules?▼

Annotate UI mockups by applying an annotation layer that specifies element purpose, bound API fields, interaction behavior, and validation rules, providing developers with clear implementation guidance.

Does this approach work for designing permission-restricted and empty states?▼

Yes, this approach covers permission-restricted and empty states by mapping live API responses to mockups, ensuring all five core UI states are visually represented and documented for handoff.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
abdusamaraieabdusamaraie

designer

Create UI design specifications with theme tokens and RTL requirements.

Community
Intermediate
jangtrinhjangtrinh

design

Coordinate design tokens, UX psychology, and design-system rules for UI tasks.

Community
Advanced
brixtonphambrixtonpham

stitch

Generate UI screens and design assets from text prompts via Stitch MCP.

Community
Intermediate