skills.rest
is-ivanov
is-ivanovCOMMUNITY
Explore all skills by this author →
GitHub

mockups

Generate desktop and mobile HTML mockups from user story specifications.

2|1|Updated Nov 7, 2025
Search Tags:#html#screenshots#prototyping#user stories#ui design#responsive#mockups
One-click install
npx skills add https://github.com/is-ivanov/rpm-ddd --skill mockups
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockups
Source: https://github.com/is-ivanov/rpm-ddd/tree/main/.opencode/skills/mockups
Command: npx skills add https://github.com/is-ivanov/rpm-ddd --skill mockups

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly convert product stories into consistent, high-fidelity HTML interface mockups without missing required screen states or mobile versions.

Core Features & Use Cases

  • Story-driven mockup generation: Builds mockups directly from product story specifications and screen-state definitions.
  • Desktop and mobile parity enforcement: Ensures every desktop screen has a matching mobile counterpart before any files are created.
  • Design-system alignment: Uses existing UI conventions, templates, brand references, and Russian interface text requirements to keep outputs consistent.
  • Use case: When a product manager or designer needs clickable HTML screens for a new workflow, this Skill maps every required state, generates both desktop and mobile mockups, and prepares screenshots for review.

Quick Start

Ask the AI to generate mockups for a specific story by name or story number and it will gather context, build a complete screen plan, and produce desktop and mobile HTML screens.

Frequently Asked Questions about mockups

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

FAQPage Schema
How do I generate HTML mockups from user stories?▼

HTML mockups from user stories are generated by extracting screen-state definitions from story specifications and producing both desktop and mobile HTML files. The Skill maps required states, applies UI conventions, and outputs clickable HTML screens for review.

What is desktop and mobile screen parity in UI prototyping?▼

Desktop and mobile screen parity in UI prototyping ensures every desktop screen has a matching mobile counterpart before file creation. This Skill enforces mandatory screen parity to prevent missing mobile versions in responsive design workflows.

Can I use existing brand templates and Russian interface text for UI mockups?▼

Yes, existing brand templates and Russian interface text can be used for UI mockups. The Skill aligns HTML generation with documented UI conventions, layout templates, and Russian copy requirements to keep outputs consistent.

Does the mockup generation process include screenshot production?▼

Yes, the mockup generation process includes screenshot production. The Skill handles template-based UI generation, filename planning, and screenshot production to prepare visual assets for stakeholder review.

What is the best way to turn product stories into clickable HTML screens?▼

The best way to turn product stories into clickable HTML screens is using story-driven mockup generation. This Skill maps every required state from the story, generates desktop and mobile HTML, and prepares screenshots for review.

Related Skills

Explore More Design & Creative Skills→
hb9397hb9397

design-prototype-docs

Generate structured UI mockup design documents from RFP/SFR requirements.

Community
Advanced
rakovi4rakovi4
45

mockups

Generate HTML interface mockups for user stories with desktop and mobile parity.

Community
Intermediate
zeronx798zeronx798

sketch

Generate interactive HTML mockups with multiple design variants for browser-based comparison.

Community
Intermediate
brixtonphambrixtonpham

stitch

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

Community
Intermediate