skills.rest
truchot
truchotCOMMUNITY
Explore all skills by this author →
𝕏@floriantruchotGitHub

ux-ui-design

Design UX/UI experiences from user research through interactive prototypes.

2|Updated Dec 13, 2025
Search Tags:#branding#ui#research#prototyping#usability#ux#wireframe
One-click install
npx skills add https://github.com/truchot/claude-skills-test --skill ux-ui-design-truchot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui-design
Source: https://github.com/truchot/claude-skills-test/tree/main/.web-agency/skills/ux-ui-design
Command: npx skills add https://github.com/truchot/claude-skills-test --skill ux-ui-design-truchot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables teams to craft UX/UI experiences that align with user research and prototyping, reducing friction and misalignment between product, design, and development.

Core Features & Use Cases

  • Research-driven design: align UX with user insights, personas, and journeys.
  • Wireframes to prototypes: translate structure into interactive prototypes and high-fidelity visuals.
  • Branding alignment: ensure UI reflects brand identity across platforms.
  • Use Case: iterate on a product concept from wireframe through usability testing to a final UI.

Quick Start

Review the project brief and draft two to three UX directions with wireframe outlines.

Frequently Asked Questions about ux-ui-design

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

FAQPage Schema
What is the best way to align UX wireframes with user research insights?▼

Aligning UX wireframes with user research requires translating personas and journey maps into structural layouts. This process ensures interface structures directly reflect observed user behaviors and reduce friction between product strategy and visual design.

How do I translate a wireframe into an interactive prototype and high-fidelity UI?▼

Translating wireframes into interactive prototypes involves iterating structural outlines into high-fidelity visuals. You map user flows into interactive elements, apply accessible UI guidelines, and ensure brand alignment across the visual layer.

Can I use this approach to ensure design system consistency across cross-functional teams?▼

Design system consistency is maintained by applying standardized accessible UI guidelines and asset handoff protocols. This supports cross-functional collaboration by ensuring developers and designers reference unified branding and interactive components.

When do I need usability testing in the product design lifecycle?▼

Usability testing is needed after drafting interactive prototypes to validate user flows and visual design choices. It identifies friction points in the UI, allowing teams to iterate on the product concept before final asset handoff.

Does UX/UI design work for branding alignment across multiple platforms?▼

UX/UI design supports branding alignment by ensuring the UI reflects brand identity consistently across platforms. It integrates visual design elements with structural wireframes to maintain cohesive product aesthetics and accessible interfaces.

Related Skills

Explore More Design & Creative Skills→
Imad-OuteImad-Oute
2

mh-cto-sdlc-ux-brief

Generate UX design briefs from PRD goals, journey maps, and personas.

Community
Advanced
MrAlexisCordMrAlexisCord

UX Designer

Design user flows, wireframes, and prototypes with WCAG 2.1 AA compliance.

Community
Advanced
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced