skills.rest
Yash-1511
Yash-1511COMMUNITY
Explore all skills by this author →
Website𝕏@Yash15113GitHub

dux-prototype

Generate interactive HTML prototypes from a DESIGN.md source of truth.

1|Updated May 20, 2026
Search Tags:#html generation#accessibility#design system#prototype#tailwind#tokenization#marketing site
One-click install
npx skills add https://github.com/Yash-1511/bmad-dux-visual-architect --skill dux-prototype
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dux-prototype
Source: https://github.com/Yash-1511/bmad-dux-visual-architect/tree/main/skills/dux-prototype
Command: npx skills add https://github.com/Yash-1511/bmad-dux-visual-architect --skill dux-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Converts a single DESIGN.md into interactive, brand-consistent HTML prototypes or marketing pages without hand-coding multiple screen variations.

Core Features & Use Cases

  • Flow mode (multi-screen): Builds a linked set of HTML pages with shared partials, a single tokenized Tailwind theme source, and semantic structure for navigation.
  • Marketing mode (single page): Composes one rich marketing HTML page with inline tokenized Tailwind config and consistent voice and anti-pattern tracing.
  • Design-system fidelity: Uses DESIGN.md YAML tokens for palette, typography, layout, components, motion, voice, brand constraints, and AA contrast checks.

Quick Start

Run dux-prototype by asking Mayasura to build a prototype, then choose Flow or Marketing based on whether you want linked screens or a single page.

Frequently Asked Questions about dux-prototype

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

FAQPage Schema
How do I generate an interactive HTML prototype from a design document?▼

To generate an interactive HTML prototype from a design document, you need a structured DESIGN.md file acting as the source of truth. The system reads YAML tokens for palette, typography, and layout to produce semantic HTML output with a tokenized Tailwind theme.

Can I build a multi-screen user flow with shared partials from a single markdown file?▼

Yes, you can build a multi-screen user flow with shared partials from a single markdown file using Flow mode. It generates linked HTML pages with shared navigation, a single tokenized Tailwind theme source, and semantic structure.

Does the generated marketing site prototype include accessibility and AA contrast checks?▼

Yes, generated marketing site prototypes include accessibility and AA contrast checks. The process enforces AA contrast validation, semantic HTML structure, and emits a11y notes JSON to keep outputs traceable and self-contained.

What is the best way to create a single-page marketing prototype with Tailwind?▼

The best way to create a single-page marketing prototype with Tailwind is using Marketing mode. It composes one rich HTML page with inline tokenized Tailwind config, ensuring consistent brand voice and anti-pattern tracing directly from your design tokens.

Do I need YAML tokens in my DESIGN.md to generate a tokenized Tailwind theme?▼

Yes, you need YAML tokens in your DESIGN.md to generate a tokenized Tailwind theme. The system relies on these tokens for palette, typography, motion, and brand constraints to ensure design-system fidelity across all generated HTML.

Related Skills

Explore More Design & Creative Skills→
Aurora-AIAurora-AI

design-md

Generate a DESIGN.md design system from Stitch project assets.

Community
Intermediate
Yash-1511Yash-1511
1

dux-screen

Generate standalone HTML screens from DESIGN.md with tokenized design constraints.

Community
Advanced
ksciuskscius
2

web-accessibility

Enforce WCAG 2.1 AA accessibility requirements for web UI components.

Community
Intermediate
tcytantcytan
1

team-interactive-craft

Generate accessible interactive UI components through a research-to-build-to-a11y pipeline.

Community
Advanced