ui-design

Generate design systems and UI guidance for web and mobile apps.

Updated Mar 12, 2026

Search Tags:#accessibility #react #design system #ui/ux #tailwind css #web design #mobile app design

Ready to run

npx skills add https://github.com/dzineer/dzineer-computer-claude-skills --skill ui-design-dzineer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/dzineer/dzineer-computer-claude-skills/tree/main/ui-design
Command: npx skills add https://github.com/dzineer/dzineer-computer-claude-skills --skill ui-design-dzineer

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive design intelligence to create professional, accessible, and performant user interfaces for web and mobile applications, streamlining the design and development process.

Core Features & Use Cases

Design System Generation: Creates detailed design systems based on project type, industry, and desired styles.
Component Design: Offers guidance on UI elements like buttons, modals, and forms.
UX Best Practices: Enforces accessibility, performance, and interaction guidelines.
Stack-Specific Implementation: Provides tailored advice for various tech stacks (React, Vue, Tailwind, etc.).
Use Case: Design a professional, accessible landing page for a new SaaS product using a minimalist style and a dark mode theme, ensuring optimal performance and user experience.

Quick Start

Generate a design system for a SaaS product with a minimalist style.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I generate a UI design system for a SaaS product?▼

To generate a UI design system, specify your project type, industry, and desired style to receive comprehensive styles, color palettes, typography, and UX guidelines. This streamlines the design and development process for web and mobile applications.

What is the best way to implement accessible web design with Tailwind CSS?▼

The best way to implement accessible web design with Tailwind CSS is to enforce accessibility, performance, and interaction guidelines during component design. This provides tailored advice for stack-specific implementation of UI elements.

Can I get UI component design guidance for React and mobile apps?▼

Yes, you can get UI component design guidance for React and mobile apps by requesting recommendations for specific UI elements like buttons, modals, and forms. It supports multiple technology stacks and offers detailed design systems.

Does this design intelligence tool support dark mode and minimalist styles?▼

Yes, this design intelligence tool supports dark mode and minimalist styles by generating detailed design systems based on your project type and desired aesthetics. It ensures optimal performance and user experience for professional interfaces.

Why do I need a comprehensive UX guideline for my web application?▼

You need comprehensive UX guidelines for your web application to enforce accessibility, performance, and interaction best practices. This ensures professional and performant user interfaces, streamlining the design and development process.