skills.rest
dzineer
dzineerCOMMUNITY
Explore all skills by this author →
Website𝕏@dzineerGitHub

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
One-click install
npx skills add https://github.com/dzineer/dzineer-computer-claude-skills --skill ui-design-dzineer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Thanh-aperoThanh-apero
1

ck:ui-ux-pro-max

Generate design systems with styles, colors, typography, and layout patterns.

Community
Advanced
ncsound919ncsound919

ui-ux-pro-max

Generate design-system tokens, component specs, and accessibility guidance for web stacks.

Community
Advanced
autohandaiautohandai
10

tailwind-ui-patterns

Provide Tailwind CSS v4 patterns for buttons, cards, inputs, and responsive layouts.

Official
Intermediate
gztcodegztcode

songwriting-and-ai-music

Generate song structures and AI music prompts for the Suno platform.

Community
Advanced