frontend-ui/ux-design

Generate UI/UX design plans with wireframes, design systems, and developer handoff artifacts.

14|11|Updated Dec 1, 2025
One-click install
npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill frontend-ui-ux-design-dauquangthanh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ui/ux-design
Source: https://github.com/DauQuangThanh/hanoi-rainbow/tree/main/skills/frontend-ui-ux-design
Command: npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill frontend-ui-ux-design-dauquangthanh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Bridges the gap between design research and production-ready frontend UI/UX outputs by providing a structured, end-to-end design process.

Core Features & Use Cases

  • Understand requirements and user needs, conduct research, and translate insights into wireframes, design systems, and component libraries.
  • Create responsive, accessible UI/UX designs with implementation guidelines and design tokens to support handoff to developers.
  • Use Case: When starting a new product, generate a complete UI/UX design plan from discovery through prototyping and ready-to-implement specs.

Quick Start

Describe your project goals and constraints, then request a complete end-to-end UI/UX design plan including research, wireframes, design system guidance, and handoff artifacts.

Frequently Asked Questions about frontend-ui/ux-design

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

FAQPage Schema
How do I create a UI/UX design plan from research to developer handoff?

Bridging research and production-ready UI/UX involves translating user insights into wireframes, building a design system with component libraries and design tokens, and generating developer handoff guidelines.

What is the best way to structure a design system for responsive frontend layouts?

The best way to structure a design system for responsive frontend layouts is to define reusable component libraries and standardized design tokens that ensure adaptability across different screen sizes and devices.

How do I ensure accessibility conformance in frontend UI/UX designs?

Ensure accessibility conformance in frontend UI/UX designs by integrating accessibility checks throughout the structured design process, from initial wireframes to final component libraries and developer handoff specifications.

Can I generate design tokens and component libraries for a new product prototype?

Yes, you can generate design tokens and component libraries for a new product prototype by defining project goals and constraints to produce a structured end-to-end UI/UX design plan from discovery onward.

What do I need to start an end-to-end design sprint for frontend UI?

To start an end-to-end design sprint for frontend UI, you need to describe your project goals and constraints to generate a complete plan covering discovery, wireframes, design system guidance, and prototyping specs.

Why use design tokens for frontend developer handoff?

Use design tokens for frontend developer handoff to provide a structured, standardized vocabulary for visual properties, ensuring accurate translation of UI/UX design system decisions into production-ready code.