skills.rest
Emz1998
Emz1998COMMUNITY
Explore all skills by this author →
GitHub

ux-prototyping

Generate interactive single-file HTML prototypes from UX specifications.

Updated Dec 13, 2025
Search Tags:#html#single-file#interactive#prototype#ux#wireframe
One-click install
npx skills add https://github.com/Emz1998/avaris-ai --skill ux-prototyping
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-prototyping
Source: https://github.com/Emz1998/avaris-ai/tree/main/.claude/skills/ux-prototyping
Command: npx skills add https://github.com/Emz1998/avaris-ai --skill ux-prototyping

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill helps teams validate user journeys and information architecture by generating a portable, single-file HTML prototype from a UX specification.

Core Features & Use Cases

  • Single-file prototype: All screens, styles, and interactions are contained in one HTML file.
  • Inline resources: CSS and JavaScript are embedded inline for portability.
  • Output path: Saves to /mnt/user-data/outputs/prototype.html for easy sharing and review.
  • Use Case: Given a UX spec at specs/architecture/ux.md, Claude builds a runnable prototype to validate flows quickly.

Quick Start

Create a prototype from the UX spec path (default: specs/architecture/ux.md) and output to the path shown above.

Frequently Asked Questions about ux-prototyping

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

FAQPage Schema
How do I create an interactive HTML prototype from a UX specification?▼

Interactive HTML prototypes validate user flows by combining all screens, styles, and interactions into a single portable file. This Skill generates a complete prototype from your UX spec, outputting a self-contained HTML file with inline CSS and JavaScript that runs in any browser without dependencies.

Can I prototype wireframes and user flows in a single HTML file?▼

Yes. Single-file prototypes embed wireframes, screens, and interactions inline so you share one HTML file instead of multiple assets. This Skill derives core flows and states from your specs and builds a navigable prototype with section-based screens managed by data attributes.

What should I prepare before generating a UX prototype?▼

Prepare a UX specification document—typically at specs/architecture/ux.md—that outlines user flows, screens, states, and interactions. The Skill extracts information architecture and core flows from this spec to generate your prototype.

How do I validate information architecture and user journeys quickly?▼

Generate a clickable prototype directly from your architecture documentation. This Skill builds an interactive prototype that lets stakeholders walk through user flows and test information hierarchy before development, catching structural issues early.

What format does the prototype output, and where is it saved?▼

The prototype outputs as a single self-contained HTML file saved to /mnt/user-data/outputs/prototype.html. All CSS and JavaScript are embedded inline, making it portable and ready to share via link or email without additional setup.

Do I need design tools or frontend frameworks to build an interactive prototype?▼

No. This Skill generates prototypes directly from text-based UX specs using HTML, CSS, and vanilla JavaScript. You don't need design software, build tools, or external dependencies—just your spec document and this Skill.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

shaping-writing-ux-breadboards

Generates UX breadboards documenting flows, states, navigation maps and affordances in Markdown text notation.

Official
Intermediate
duyle10xba1901duyle10xba1901

wireframe-prototyping

Guide low-to-high fidelity wireframe and prototype creation for early concept validation.

Community
Intermediate
xmx0632xmx0632
1

product-design

okay, I'll respond with:

Community
Advanced
SeaCloudAISeaCloudAI
1

viduq1_img2video

Generate a short video from a single input image via CLI.

Official
Intermediate