ui-ux-research

Generate structured UI/UX design briefs with reference screenshots and ASCII wireframes.

8|1|Updated Jul 7, 2025
One-click install
npx skills add https://github.com/dasheck0/qraft-templates --skill ui-ux-research-dasheck0
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-research
Source: https://github.com/dasheck0/qraft-templates/tree/main/opencode-global-skills/ui-ux-research
Command: npx skills add https://github.com/dasheck0/qraft-templates --skill ui-ux-research-dasheck0

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps product teams and designers quickly produce structured, actionable design briefs for new features by aggregating research, references, and practical recommendations into a single document stored under docs/design.

Core Features & Use Cases

  • Automated UI/UX research synthesis: gathers best practices, patterns, and heuristic guidance for a feature.
  • Reference-rich briefs: includes downloaded reference screenshots and real-world app analyses.
  • Design documentation deliverable: outputs a complete brief with layout and interaction guidance ready for handoff.

Quick Start

Provide a feature name, PRD, or brief description to generate a complete UI/UX design brief with reference screenshots.

Frequently Asked Questions about ui-ux-research

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

FAQPage Schema
How do I generate a UI/UX design brief for a new feature?

To generate a UI/UX design brief, provide a feature name, PRD, or brief description. The skill aggregates UI/UX research and reference screenshots into a structured document with actionable recommendations, layout guidance, and ASCII wireframes.

What is the best way to turn design goals into actionable UI patterns and wireframes?

Turning design goals into actionable UI patterns involves synthesizing heuristic guidance and real-world app references. This skill outputs a design documentation deliverable containing layout interaction guidance, pattern recommendations, and ASCII wireframes stored in docs/design.

Can I use this UI/UX research synthesis for both web and mobile interfaces?

Yes, UI/UX research synthesis applies to both web and mobile interfaces. The skill adapts to different platforms and design systems, generating actionable design criteria and reference screenshots for dashboards, forms, and components.

Does the generated design brief include real-world app references for UI patterns?

Yes, the generated design brief includes real-world app references. It embeds downloaded reference screenshots and real-world app analyses directly into the structured design documentation ready for handoff.

What do I need to provide to start the UI/UX research synthesis process?

To start the UI/UX research synthesis process, you only need to provide a feature name, PRD, or a brief description of your design goals. No specific dependencies or components are required to generate the complete design brief.

Where are the ASCII wireframes and design documentation stored after generation?

ASCII wireframes and design documentation are stored under docs/design/wireframes. The skill outputs a complete brief with layout guidance and interaction recommendations directly into this directory for team handoff.