bsw-prototype

To turn a plain-English feature description into a UI prototype, you provide the text and the Skill generates a self-contained 3-file walkthrough. This includes an HTML shell, a screens.js data model for multi-step flows, and a CSS foundation using design tokens.

Yes, you can generate prototypes for both mobile and desktop contexts from a feature description. The generated walkthrough mirrors real user flows across different screen sizes using a tokenized visual system and step-by-step navigation.

A design token-based prototype walkthrough is a navigable UI simulation built with standardized styling variables. It uses a bsw.css foundation to apply consistent design tokens, creating a visual representation of multi-step user flows without manual coding.

You do not need an external design system because the Skill applies its own BSW design tokens and Baylee UI patterns. It outputs a self-contained prototype with a built-in CSS foundation, ensuring visual consistency for early validation and stakeholder buy-in.

Building a self-contained prototype requires three files: an index.html shell, a screens.js file defining the multi-step flow, and a bsw.css foundation. These files work together to render a navigable, tokenized visual walkthrough from your plain-English input.

The best way to validate a product workflow early is converting plain-English ideas into a guided, step-by-step prototype walkthrough. This approach reduces back-and-forth between teams by providing a tangible, tokenized visual demo across desktop and mobile contexts.