skills.rest
Otakukingdom
OtakukingdomOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems for web and mobile applications with stack-specific guidance.

7|3|Updated Jan 6, 2017
Search Tags:#react#design system#ui/ux#tailwind css#web design#frontend development#mobile app design
One-click install
npx skills add https://github.com/Otakukingdom/Nodoka --skill ui-ux-pro-max-otakukingdom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Otakukingdom/Nodoka/tree/main/.cursor/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Otakukingdom/Nodoka --skill ui-ux-pro-max-otakukingdom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the UI/UX design process by providing comprehensive, data-driven recommendations for web and mobile applications, ensuring professional and effective designs.

Core Features & Use Cases

  • Design System Generation: Creates complete design systems including patterns, styles, colors, and typography.
  • Stack-Specific Guidelines: Offers tailored advice for various tech stacks like React, Vue, and Flutter.
  • Use Case: When starting a new project, use this Skill to generate a full design system for a "healthcare SaaS dashboard" to ensure a professional, accessible, and user-friendly interface from the outset.

Quick Start

Generate a design system for a 'fintech mobile app' with a 'minimalist' style.

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 complete UI/UX design system for a web application?▼

To generate a UI/UX design system for a web application, input your product type and desired style. The system provides data-driven recommendations for color palettes, typography, landing page patterns, and UX best practices.

Can I get Tailwind CSS and React specific UI design guidelines?▼

Yes, you can get Tailwind CSS and React specific UI design guidelines. The system offers stack-specific implementation details and tailored advice to ensure frontend development aligns with your chosen tech stack.

What is the best way to structure a minimalist fintech mobile app design?▼

The best way to structure a minimalist fintech mobile app design is to specify the product type and style. The system outputs curated chart types, color palettes, and mobile app design patterns.

Does this tool provide UX best practices for healthcare SaaS dashboards?▼

Yes, this tool provides UX best practices for healthcare SaaS dashboards. It generates professional, accessible interface recommendations by utilizing a search engine over curated data.

How do chart type and typography recommendations work for mobile app design?▼

Chart type and typography recommendations work by querying a curated CSV dataset using a BM25 search engine. This matches your mobile app design parameters to deliver precise, data-driven visual guidance.

Are there limitations to using AI-generated design systems for frontend development?▼

Limitations of using AI-generated design systems include relying on pre-curated CSV data for results. While comprehensive, you must still manually implement the stack-specific guidelines within your frontend development environment.

Related Skills

Explore More Design & Creative Skills→
cshyangcshyang

gsd:workflow:discovery-phase

Plan and execute a project discovery phase to define requirements and scope.

Community
Intermediate
EuraxluoEuraxluo

frontend-design

Generate frontend designs with intentional aesthetic direction and detailed visual guidelines.

Community
Intermediate
ag47-ptag47-pt
1

tailwind-patterns

Guide Tailwind CSS v4 architecture and responsive styling patterns.

Community
Intermediate
avelikiyavelikiy
75

ui-ux-pro-max

Generate UI/UX design systems with color palettes, typography, and UX guidelines.

Community
Advanced