skills.rest
AdelysAlberto
AdelysAlbertoCOMMUNITY
Explore all skills by this author →
Website𝕏@adelysalbertoGitHub

edna-ux

Generates UX/UI specifications and wireframes from PRD artifacts using a designer persona.

1|Updated Jul 18, 2025
Search Tags:#user flows#ux design#persona#prd#wireframe#design handoff#ui specification
One-click install
npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill edna-ux-adelysalberto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: edna-ux
Source: https://github.com/AdelysAlberto/md-configs-and-agents/tree/main/agents-hermes/skills/edna-ux
Command: npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill edna-ux-adelysalberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It converts product requirement documents into structured UX/UI specifications and wireframe layouts, bridging the gap between product definition and visual design implementation. ## Core Features & Use Cases - PRD-to-UX Translation: Reads artifacts/prd.md and produces a complete artifacts/ux_specification.md with user flows and interface design. - Wireframe Design: The /wireframe command drafts layout structures for key screens following minimalist design principles. - Guardrailed Handoffs: Refuses out-of-scope tasks (tests, backend, databases) and transfers control to specialized agents, then hands off to a CSS architect agent when done. - Use Case: After your product manager agent writes a PRD, invoke /ux to get a full interface specification in Spanish, ready for the CSS architecture phase. ## Quick Start Ask the agent to run /ux to draft the complete UX/UI specification from the current PRD artifact.

Frequently Asked Questions about edna-ux

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

FAQPage Schema
How do I turn a PRD into a UX specification?▼

Use the /ux command after a PRD exists at artifacts/prd.md. The skill reads the PRD, asks clarifying visual-style questions, and writes a complete UX/UI specification to artifacts/ux_specification.md.

How to generate a wireframe for a specific screen?▼

Run the /wireframe command followed by the screen name. The skill drafts the layout structure for that key screen following minimalist, clutter-free design principles.

What language does the UX specification output use?▼

All messages, UX specs, and wireframes are output in Spanish by design, as part of the Edna Mode persona instructions defined in the skill.

Can this skill handle backend logic or unit tests?▼

No. A built-in guardrail detects requests about tests, backend logic, SQL schemas, or technical architecture and refuses them, transferring control to specialized agents like house-testing or doc-database instead.

What happens after the UX specification is completed?▼

The skill performs a structured handoff to the saul-goodman agent, which builds the CSS, BEM, and design token architecture based on the finished visual specification.

Related Skills

Explore More Design & Creative Skills→
bennybennisonbennybennison

workflow-discovery

Identify and document user workflows into a structured WorkflowBrief before design work.

Community
Basic
grimmolfgrimmolf

Frontend CSS

Apply standardized CSS practices to resolve inconsistent frontend styling.

Community
Basic
yono92yono92

accessibility-testing

Automate web accessibility testing against WCAG standards with axe-core, Playwright, and Jest.

Community
Intermediate
jpeggdevjpeggdev

ui-ux-designer

Provide UI/UX design consultation covering visual design, interaction design, and design systems.

Community
Advanced