sdd-ux

Create UX design documents with wireframes, component inventories, and HTML/CSS prototypes.

1|Updated Mar 5, 2026
One-click install
npx skills add https://github.com/AlessioScarfone/aine-copilot-plugins --skill sdd-ux-alessioscarfone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sdd-ux
Source: https://github.com/AlessioScarfone/aine-copilot-plugins/tree/main/src/sdd-team/skills/sdd-ux
Command: npx skills add https://github.com/AlessioScarfone/aine-copilot-plugins --skill sdd-ux-alessioscarfone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? Teams often jump into implementation without a shared UX foundation, leading to inconsistent interfaces and costly rework. This Skill guides you through a structured, section-by-section workflow to produce a shared UX design document and a working HTML prototype grounded in your PRD. ## Core Features & Use Cases - Guided UX Workflow: Walks through project vision, design decisions, component inventory, text wireframes, prototype specification, and HTML/CSS prototype generation with explicit user confirmation at each step. - Standalone HTML Prototype: Generates a single-file, responsive, accessible prototype using semantic HTML5, CSS custom properties, and vanilla JavaScript based on a provided template. - Revision Support: Detects an existing ux.md and offers a structured revise workflow with impact analysis and cross-section consistency checks. - Use Case: After writing a PRD for a new dashboard product, invoke this Skill to define navigation patterns, sketch key screens as ASCII wireframes, and deliver a clickable HTML prototype before any engineering begins. ## Quick Start Ask the agent to create the UX design document and HTML prototype for the project based on the existing PRD.

Frequently Asked Questions about sdd-ux

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

FAQPage Schema
How do I create a UX design document from a PRD?▼

Invoke the sdd-ux skill after your prd.md exists in the shared artifacts folder. It reads the PRD as primary input, then guides you through vision, design decisions, components, wireframes, and a prototype spec, confirming each section before advancing.

How to generate an HTML prototype without external frameworks?▼

The skill generates a single standalone HTML file with embedded CSS and vanilla JavaScript only. It starts from the provided prototype-template.html, uses CSS custom properties, semantic HTML5, and mobile-first responsive breakpoints.

Can I revise an existing UX document instead of starting fresh?▼

Yes. When ux.md already exists, the skill summarizes it and asks whether to revise or start fresh. The revise workflow performs impact analysis, presents a change plan for approval, and keeps all sections consistent.

What are the prerequisites for using this UX design skill?▼

A PRD file at the shared artifacts folder should exist first, created with the /prd skill. If architecture.md exists it is also read for technical UI constraints. The skill is designed to run with the sdd-ux agent.

When should I not use this UX workflow skill?▼

Do not use it for architecture decisions, product requirements definition, or feature implementation. Those belong to the PRD, architecture, and change-proposal skills in the sdd-team plugin.