skills.rest
Pyl-Tech
Pyl-TechOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generate data-driven UI/UX design systems with palettes, typography, and UX rules.

Updated Aug 27, 2026
Search Tags:#typography#accessibility#frontend#design system#color palette#ui-ux#stitch mcp
One-click install
npx skills add https://github.com/Pyl-Tech/stream-coding --skill ui-ux-pro-max-pyl-tech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Pyl-Tech/stream-coding/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Pyl-Tech/stream-coding --skill ui-ux-pro-max-pyl-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill prevents vibe-based UI decisions by generating a coherent, data-driven design system (colors, typography, layout patterns, UX rules) before any frontend code is written.

Core Features & Use Cases

  • Design system generation for UI/UX builds: Produces a complete set of visual constraints (palette, type choices, effects, anti-patterns, and a pre-delivery checklist) from a curated database.
  • Domain + stack-specific guidance: Adds targeted recommendations using domain searches (e.g., landing, charts, UX/accessibility) and stack searches (React/Next.js/Vue/Svelte/etc.).
  • Pipeline alignment (STRATEGY → SPEC → BUILD): Converts the generated system into spec-like constraints the agent enforces while generating UI scaffolding and components.
  • Optional Stitch scaffolding: Generates high-fidelity UI scaffolding from the design system (when the Stitch MCP server is configured).

Quick Start

Ask your AI agent to run UI/UX Pro Max to generate a design system for building a UI for a SaaS dashboard by executing the command: python3 .agents/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard fintech professional" --design-system -p "FinTrack Pro".

Frequently Asked Questions about ui-ux-pro-max

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

FAQPage Schema
How do I generate a UI/UX design system before writing frontend code?▼

A data-driven design system generator extracts palette, typography, and UX rules from a curated database to prevent vibe-based UI decisions. It produces coherent visual constraints before any frontend code is written.

Can I create a design system for a specific frontend stack like React or Vue?▼

Yes, design system generation provides stack-specific guidance for React, Next.js, Vue, and Svelte. It adds targeted recommendations during the build phase for strongly branded component creation.

What is a data-driven design system and how does it handle accessibility?▼

A data-driven design system uses a curated database to define visual constraints. It enforces pre-delivery quality gating for accessibility, contrast, reduced motion, and responsiveness to ensure compliant interfaces.

Does UI/UX design system generation work with Stitch MCP for visual scaffolding?▼

Yes, when the Stitch MCP server is configured, the generator produces high-fidelity UI scaffolding. It converts the design system into spec-like constraints enforced during visual component creation.

How do I build a fintech SaaS dashboard without inconsistent UI decisions?▼

To build a SaaS dashboard without inconsistent UI, generate a coherent design system first. This provides domain-specific guidance, visual constraints, and a pre-delivery checklist to remove guesswork.

What are the limitations of using a generated design system for frontend development?▼

The generated design system targets STRATEGY, SPEC, and BUILD phases for landing pages, dashboards, and visual interfaces. Optional domain refinement and Stitch scaffolding require specific configuration.

Related Skills

Explore More Design & Creative Skills→
pjy4617pjy4617

vivado-setup

Install six agents and CLAUDE.md into a target Vivado project.

Community
Advanced
tizeetizee
2

design-taste-frontend

Enforce design and architecture rules for React and Next.js frontend interfaces.

Community
Advanced
maurodf0maurodf0

webf-native-ui

Integrate Cupertino native UI components into React, Vue, or vanilla JS apps with TypeScript support.

Community
Advanced
kamal81684kamal81684

frontend-design

Convert UI design requirements into React or Vue frontend code with design tokens.

Community
Advanced