gteam-ui-designer

Generate design systems and audit web interfaces for WCAG compliance.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/gcampton/GTeam --skill gteam-ui-designer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gteam-ui-designer
Source: https://github.com/gcampton/GTeam/tree/main/specialists/ui-designer
Command: npx skills add https://github.com/gcampton/GTeam --skill gteam-ui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides senior product design expertise to identify and fix visual hierarchy issues, component inconsistency, and accessibility gaps so teams deliver coherent, usable interfaces faster and with fewer design-implementation cycles.

Core Features & Use Cases

  • Design system generation: Produce a complete design system (typography, colour tokens, spacing scale, radii, elevation, motion rules) and persist the result as DESIGN.md plus preview pages.
  • Visual QA & accessibility audits: Check contrast, focus states, tap targets, ARIA patterns, and WCAG 2.1 AA requirements and produce prioritized, implementable fixes.
  • Design review & scoring: Rate dimensions like hierarchy, typography, spacing, colour discipline, component consistency, responsiveness, and AI slop; output before/after scores and the top 5 actionable issues with concrete fixes.
  • Research-backed recommendations: Suggest competitor references, domain-specific style choices, and use the optional ui-ux-pro-max search tool to generate and persist a design system when available.
  • Use Case: Review a live product URL or screenshots and deliver a DESIGN.md, scoring rubric, annotated issues list, and small CSS/token patches for quick wins.

Quick Start

Review the URL https://example.com and return a scored design review with the top accessibility, hierarchy, and component consistency fixes plus a concise DESIGN.md.

Frequently Asked Questions about gteam-ui-designer

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

FAQPage Schema
How do I conduct a WCAG compliance check on a live website?

A WCAG compliance check evaluates live URLs or screenshots against WCAG 2.1 AA requirements, inspecting contrast, focus states, tap targets, and ARIA patterns to output a prioritized list of implementable accessibility fixes.

What is the best way to generate a design system from an existing web interface?

Generating a design system from an existing interface analyzes visual elements to produce typography, colour tokens, spacing scale, radii, elevation, and motion rules, persisting the complete system as a DESIGN.md file and preview pages.

Can I use screenshots for a visual QA and component consistency audit?

Screenshots are valid inputs for visual QA and component consistency audits, allowing the evaluation of visual hierarchy, spacing, and color discipline to deliver before/after scores and concrete CSS or token patches.

How does a design review score and prioritize UI fixes?

A design review scores UI dimensions like hierarchy, typography, responsiveness, and component consistency, outputting a scored review table that highlights the top five actionable issues with specific, prioritized fixes.

Do I need a URL to perform a usability and accessibility review?

A URL is not strictly required; the review accepts screenshots or design plans as input to assess visual hierarchy, component inconsistency, and accessibility gaps for web and product interfaces.

What limitations exist when auditing responsive design recommendations?

Auditing responsive design recommendations relies on provided URLs or screenshots to evaluate visual hierarchy and component consistency, meaning dynamic interactions or state changes not captured in static inputs may limit review depth.