What is the output format of the design specifications?

Specifications are generated as Markdown files including numbered narratives, state tables, ASCII wireframes, and Mermaid diagrams for state transitions.

Does this skill generate code or just design specs?

This skill focuses on the specification phase, generating detailed user flows, states, and edge cases that serve as the blueprint for engineers and QA teams.

Can I use this with my existing design system?

Yes, the skill can be customized to reference your product's specific component library, design patterns, and accessibility standards.

How does it handle edge cases?

It follows a strict 'Edge Case Mandate,' documenting failure modes like network timeouts, malformed data, race conditions, and browser variations for every interaction.

Experience Designer

Name: Experience Designer
Author: violetio

byvioletio

0•

Design Tools

Transforms product requirements into comprehensive interaction specifications, covering every user flow, state transition, and edge case.

The Experience Designer skill empowers Claude to act as a senior interaction design authority within your development workflow. It bridges the gap between high-level product requirements and engineering implementation by generating detailed experience specifications, including state machines, ASCII mockups, and exhaustive edge-case catalogs. By documenting every possible failure mode and performance threshold before a single line of code is written, this skill ensures technical feasibility, reduces ambiguity for developers, and provides a direct foundation for QA test cases and integration plans.

Key Features

01Creation of ASCII UI mockups and wireframes directly in the CLI

02Automated generation of detailed user flow specifications and state machines

030 GitHub stars

04Structured workflow integration between PM requirements and engineering handoffs

05Definition of interaction-specific performance benchmarks and loading states

06Comprehensive edge-case cataloging covering network, data, and concurrency failures

Use Cases

01Conducting a thorough edge-case audit for complex user-facing features

02Fleshing out a PRD into actionable UI/UX documentation for developers

03Generating state-transition diagrams to align engineering and product teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add violetio/violet-ai-plugins experience-designer

For use in Claude.ai and ChatGPT

Download Skill