skills.rest
coelhotv
coelhotvCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-brain

Generate user interfaces with design patterns and micro-interactions across React, Vue, and HTML/CSS.

2|Updated Dec 28, 2025
Search Tags:#design#ui#frontend#react#components#ux
One-click install
npx skills add https://github.com/coelhotv/meus-remedios --skill ui-design-brain
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-brain
Source: https://github.com/coelhotv/meus-remedios/tree/main/.claude/skills/ui-design-brain
Command: npx skills add https://github.com/coelhotv/meus-remedios --skill ui-design-brain

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill transforms AI agents into intentional interface designers, ensuring generated UIs are not just functional but also possess visual personality, motion, and real usability grounded in established design patterns.

Core Features & Use Cases

  • Design System Adherence: Produces interfaces that match chosen visual personalities (SaaS, Minimal, Enterprise, etc.).
  • Micro-Interaction Guidance: Ensures elements have appropriate hover, focus, and active states with meaningful motion.
  • Use Case: When asked to "build a user dashboard," this skill guides the AI to first consider user context, emotional tone, and existing codebase before generating components with appropriate spacing, typography, and color.

Quick Start

Use the ui-design-brain skill to design a clean and efficient settings page layout.

Frequently Asked Questions about ui-design-brain

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

FAQPage Schema
How do I generate React components with consistent UI design patterns?▼

Generate React components with consistent UI design by applying a framework that adheres to 60+ established design-system patterns and anti-patterns. This ensures visual personality, proper spacing, and typography in your frontend code.

What is the best way to add micro-interactions and hover states to frontend UI?▼

Add micro-interactions to frontend UI by utilizing a design framework that specifies appropriate hover, focus, and active states. This ensures elements have meaningful motion and real usability grounded in established patterns.

How do I design a user dashboard that matches a specific visual personality like SaaS or Minimal?▼

Design a user dashboard matching a visual personality by first considering user context, emotional tone, and existing codebase. This approach ensures the generated interface matches styles like SaaS, Minimal, or Enterprise accurately.

Can I use this UI design framework for Vue and HTML/CSS projects?▼

Yes, you can use this UI design framework for Vue and HTML/CSS projects. It provides component selection, visual styling, micro-interaction guidance, and state management across various frameworks including React, Vue, and HTML/CSS.

Why does my AI-generated user interface lack visual personality and intentional design?▼

AI-generated user interfaces lack visual personality when not guided by an intentional design framework. Applying structured design-system patterns ensures generated UIs possess visual personality, motion, and real usability rather than just basic functionality.

Related Skills

Explore More Design & Creative Skills→
telum-aitelum-ai
2

project-import

Create a Speck project structure with a skeleton project.md file.

Official
Basic
boshi-xixixiboshi-xixixi
6

artifacts-builder

Create multi-component HTML artifacts with React, Tailwind CSS, and shadcn/ui.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

frontend-design

Design frontend interfaces with typography, color, motion, and layout guidelines.

Community
Intermediate
Davie521Davie521
7

delight

Identify opportunities for joy, personality, and polish in interfaces.

Community
Intermediate