ux-prototyping

Name: ux-prototyping
Availability: InStock
Author: Emz1998

Generate interactive single-file HTML prototypes from UX specifications.

Updated Dec 13, 2025

Search Tags:#html #single-file #interactive #prototype #ux #wireframe

Ready to run

npx skills add https://github.com/Emz1998/avaris-ai --skill ux-prototyping

💬 Prompt for ChatGPT / Claude Chat▼

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.