ui-designer

Apply visual design systems to produce UI guidelines and design tokens.

Updated Mar 8, 2026

Search Tags:#ui-design #ux-design #polish #dark-mode #design-tokens #component-library #visual-system

Ready to run

npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill ui-designer-ziadnagar

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/ZiadNagar/zeVillage-AI-Toolkit/tree/main/skills/ui-designer
Command: npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill ui-designer-ziadnagar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UI teams struggle to maintain visual consistency and polish across platforms; this Skill provides a structured visual design system, patterns, and best practices to produce pixel-perfect interfaces quickly.

Core Features & Use Cases

Establishes a cohesive design token set, typography scale, color palette, and spacing grid for reliable UI implementation.
Provides methodology for design-system audits, component libraries, and cross-platform styling consistency.
Use Case: When auditing a design system, apply the Skill to generate tokens and validation rules for rapid polish across pages.

Quick Start

Provide a design brief and a sample UI; the Skill will apply the visual system to produce polished components and guidelines.

Frequently Asked Questions about ui-designer

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

FAQPage Schema

How do I maintain visual consistency across a component library?▼

Maintain visual consistency by applying a structured design system with design tokens, typography scales, color palettes, and spacing grids to generate polished UI guidelines and validate component styling across platforms.

How do I audit an existing design system for UI polish?▼

Audit a design system by validating its design tokens and visual rules against a structured methodology, generating corrected tokens and validation guidelines to achieve consistent, pixel-perfect interfaces rapidly.

What do I need to provide to generate pixel-perfect UI guidelines?▼

You need to provide a design brief and a sample UI. The system requires a defined design token set, typography scale, color palette, and spacing grid to output ready-to-use prompt packs and styling guidance.

Can I use this for both web and mobile interface design reviews?▼

Yes, you can use this for interface design reviews across web and mobile projects. It applies a cohesive visual system to ensure cross-platform styling consistency and polished component libraries.

What's the best way to establish dark mode using design tokens?▼

Establish dark mode by defining and validating a cohesive design token set within the visual system. This ensures cross-platform styling consistency and reliable UI implementation for dark theme components.

Does this method work without a predefined spacing grid and color palette?▼

No, this method requires a predefined spacing grid and color palette as baseline inputs. Without these foundational design tokens, the system cannot generate consistent visual guidelines or validate the interface.