skills.rest
hffmnnj
hffmnnjCOMMUNITY
Explore all skills by this author →
𝕏@hffmnnjGitHub

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
One-click install
npx skills add https://github.com/hffmnnj/opencode-goopspec --skill ui-design-hffmnnj
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Sadiq-KolakarSadiq-Kolakar

uiux-wireframes

Generate structured wireframe layouts and navigation flows for web and mobile.

Community
Intermediate
vneseyoungstervneseyoungster
27

figma-analyzer

Extract design assets, metadata, and tokens from Figma files.

Community
Advanced
xianmingyaoxianmingyao
1

ui-design

Codify UI design patterns, tokens, and accessibility guidelines for web interfaces.

Community
Advanced
TheGreatLTheGreatL

ui-ux-designer

Design user interfaces, wireframes, and design systems with accessibility standards.

Community
Advanced