ui-design

Design responsive, accessible UI layouts for web and mobile platforms.

39|2|Updated Jan 31, 2026

Search Tags:#design #consistency #accessibility #UI #UX #responsive #design-system

Ready to run

npx skills add https://github.com/hffmnnj/opencode-goopspec --skill ui-design-hffmnnj

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/hffmnnj/opencode-goopspec/tree/main/skills/ui-design
Command: npx skills add https://github.com/hffmnnj/opencode-goopspec --skill ui-design-hffmnnj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams design visually appealing and usable user interfaces, reducing friction in product experiences.

Core Features & Use Cases

Visual Design Guidance: establish color, typography, spacing, and layout systems that enhance clarity and consistency.
UX Decisions & Accessibility: promote inclusive designs and responsive behavior across devices.
Use Case: imagine building a dashboard; this skill guides layout decisions, component hierarchy, and interaction patterns to improve usability.

Quick Start

Use the ui-design skill to review a new mockup and generate a responsive, accessible UI layout plan.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I design a responsive UI that works across web and mobile platforms?▼

Responsive UI design establishes layout systems and component hierarchies that adapt to different screen sizes. Apply consistent spacing, typography, and color systems across devices, and test layouts on mobile, tablet, and desktop to ensure usability and accessibility throughout your product.

What's the best way to enforce design consistency across a product?▼

Design consistency relies on establishing shared systems for color, typography, spacing, and layout rules. Document these standards in a design system, apply them consistently across all interfaces, and integrate them into your handoff process to keep teams aligned.

How do I make sure my UI is accessible to all users?▼

Accessible UI design incorporates inclusive patterns, sufficient color contrast, readable typography, and keyboard navigation. Test with accessibility standards, review for responsive behavior across devices, and validate that interactive components work for users with varying abilities.

Can I use UI design principles in a design system workflow?▼

Yes, UI design integrates directly into design system workflows by establishing reusable components, consistency rules, and layout patterns. Use it to guide component hierarchy decisions, create responsive layouts, and maintain accessibility standards across your entire product.

What should I focus on when reviewing a new mockup for usability?▼

When reviewing mockups, assess layout clarity, component hierarchy, interaction patterns, and visual hierarchy. Check that spacing and typography support readability, ensure responsive behavior across devices, and validate accessibility features to reduce friction in the user experience.