mockup

Category: Content & Multimedia | Uploader: fieldsphere | Downloads: 0 | Version: v1.0（Latest）

Create production-ready UI mockups tied to real API states and design system constraints. Use when the user asks for polished screen mockups, stateful UI explorations, or handoff-ready visual specs.

Changelog: Source: GitHub https://github.com/fieldsphere/cursor-team-marketplace-template

Directory Structure

Current level: plugins/design/skills/mockup/

📄 SKILL.md 1.7 KB

SKILL.md

---
name: mockup
description: Create production-ready UI mockups tied to real API states and design system constraints. Use when the user asks for polished screen mockups, stateful UI explorations, or handoff-ready visual specs.
---

# Mockup Creation

Build implementation-ready mockups that align with backend states, brand guidelines, and design system constraints.

## Workflow

1. Define scope
   - Confirm target screens, user flow, and platform (web/mobile).
   - Identify required states: loading, empty, success, error, and permission-restricted.

2. Map data contract
   - List the API endpoints and response fields each screen depends on.
   - Represent realistic payload sizes and edge cases in the mockup (long text, missing fields, zero-state).

3. Design system and brand alignment
   - Follow `../wireframes/design_language.md` and `../wireframes/brand_guidelines.md`.
   - Use a consistent spacing scale, typography hierarchy, and semantic color usage.

4. Produce mockup package
   - Primary mockup for each screen.
   - Variant mockups for each required state.
   - Annotation layer with:
     - element purpose
     - bound API field(s)
     - interaction behavior
     - validation/error rules

5. Handoff details
   - Include component inventory and reusable tokens.
   - Include interaction notes (hover, focus, disabled, keyboard behavior).
   - Include implementation risks and unanswered product questions.

## Quality Bar

- Every important backend state is represented.
- Critical paths are complete end-to-end.
- Layout and copy are internally consistent.
- Accessibility constraints are represented in the design.
- Specs are actionable for engineering handoff without additional clarification.

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

mockup

Directory Structure

SKILL.md

Report

Notice