ui-designer

Design beautiful interfaces using 16+ design systems including Material You, Fluent Design, Apple HIG, Ant Design, Carbon Design, Shopify Polaris, Minimalism, Glassmorphism, Neo-Brutalism, Neumorphism, Skeuomorphism, Claymorphism, Swiss Design, and Atlassian Design. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG).

3,891 stars

byopenclaw

Complexity: easy

View on GitHub Installation ↓

About this skill

This AI agent skill, `ui-designer`, serves as a comprehensive design expert for creating high-quality user interfaces. It offers capabilities to generate harmonious color palettes tailored to project vibes, define robust component theming for consistent light/dark modes through design tokens, and conduct thorough accessibility audits focusing on WCAG AA/AAA compliance. Users can leverage this skill at various stages of the design process, from initial concept generation for visual styles to refining existing interfaces for consistency and inclusivity. It's particularly useful for projects requiring adherence to specific brand guidelines or for developers seeking to implement modern, accessible UI components efficiently. The skill is adept at applying principles from a wide array of 16+ design systems, ranging from enterprise standards like Material You and Fluent Design to aesthetic philosophies such as Glassmorphism, Neo-Brutalism, and Skeuomorphism. Someone would use this skill to streamline the UI design workflow, ensure design consistency across an application, and guarantee accessibility from the outset. It acts as an on-demand design consultant, providing practical outputs like HEX codes and Tailwind configurations, thereby bridging the gap between design intent and implementation for front-end developers and product teams.

Best use case

The primary use case for the `ui-designer` skill is to assist developers and product designers in rapidly conceptualizing, designing, and refining user interfaces with a focus on aesthetics, consistency, and accessibility. It's ideal for front-end developers needing to implement designs based on specific systems, UI/UX designers looking for structured guidance or palette generation, and product managers aiming to ensure their applications meet high standards for usability and visual appeal across various platforms.

Users should expect practical design guidance, specific color palettes (HEX, Tailwind, CSS vars), theming definitions, and actionable accessibility recommendations for their UI.

Practical example

Example input

Design a landing page section for a modern fintech app using Material You principles, focusing on a dark luxury theme. Ensure all elements are WCAG AA compliant.

Example output

Here's a dark luxury Material You inspired color palette and initial theming variables:
```json
{
  "palette": {
    "primary": "#6F42C1", // Deep violet
    "secondary": "#A8DADC", // Light teal
    "background": "#1A1A2E", // Dark navy
    "surface": "#2C2C4A", // Muted violet
    "onPrimary": "#FFFFFF",
    "onBackground": "#E0E0E0"
  },
  "tailwind_config_extension": {
    "colors": {
      "primary": "var(--color-primary)",
      "secondary": "var(--color-secondary)"
    }
  },
  "css_variables": [
    "--color-primary: #6F42C1;",
    "--color-secondary: #A8DADC;"
  ],
  "accessibility_notes": [
    "Ensure text on primary buttons has a contrast ratio of at least 4.5:1 against #6F42C1. Current text color: #FFFFFF meets this requirement."
  ]
}
```
The proposed theme defines --bg: #1A1A2E, --text: #E0E0E0, --accent: #6F42C1, and --border: #4A4A6A for a cohesive dark mode.

When to use this skill

When starting a new UI project and needing initial design direction or color palettes.
When implementing components and requiring consistent theming (light/dark modes).
When auditing existing interfaces for WCAG accessibility compliance.
When developing with Tailwind CSS and needing design system-specific configurations.

When not to use this skill

For tasks purely focused on back-end logic or database management.
When detailed, pixel-perfect visual design mockups (e.g., Figma files) are the required output.
For complex UX research, user testing, or interaction design flows beyond visual guidance.
When the design requirements are entirely outside the scope of its listed design systems or aesthetic principles.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ui-designer-skill/SKILL.md --create-dirs "https://raw.githubusercontent.com/openclaw/skills/main/skills/1999azzar/ui-designer-skill/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/ui-designer-skill/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How ui-designer Compares

Feature / Agent	ui-designer	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	easy	N/A

Frequently Asked Questions

What does this skill do?

How difficult is it to install?

The installation complexity is rated as easy. You can find the installation instructions above.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

AI Agents for Coding

Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.

Best AI Skills for Claude

Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.

Cursor vs Codex for AI Workflows

Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.

SKILL.md Source

# UI Designer Skill

Expert design guidance for creating aesthetically pleasing, user-centric interfaces across multiple design languages. This skill focuses on the visual and structural design intent before and during implementation.

## Core Capabilities

### 1. Color Palette Generation
Generate cohesive and harmonic color palettes tailored to the project's vibe.
- Deliverables: HEX codes, Tailwind config extensions, and CSS variables.
- Palettes: Default to high-end pastels, dark luxury, or tonal Material You sets.

### 2. Component Theming
Establish robust theme systems (Light/Dark) through consistent design tokens.
- Define --bg, --text, --accent, and --border variables.
- Ensure unified states (hover, focus, active) across all UI elements.

### 3. Accessibility Audits
Evaluate and refine interfaces for maximum inclusivity and compliance.
- Focus: WCAG AA/AAA contrast ratios, semantic HTML, and intuitive navigation.
- Guidance: ARIA attributes, focus ring management, and screen-reader friendliness.

## Design Systems Library (16 Total)

| Category | System | Key Traits | Best For | Reference |
|----------|--------|------------|----------|-----------|
| **Enterprise** | Fluent Design | Acrylic materials, reveal effects, 5 principles | Windows apps, Microsoft 365, enterprise | [fluent-design.md](references/fluent-design.md) |
| **Enterprise** | Ant Design | Natural, 8px grid, 12-column | Admin panels, B2B, data-heavy apps | [ant-design.md](references/ant-design.md) |
| **Enterprise** | Carbon Design | 16-column grid, IBM Plex, clarity | Enterprise software, data visualization | [carbon-design.md](references/carbon-design.md) |
| **Enterprise** | Atlassian Design | Bold, collaboration-focused, 8px grid | Project management, team tools | [atlassian-design.md](references/atlassian-design.md) |
| **Platform** | Apple HIG | SF Pro, vibrancy, blur materials, 44pt targets | iOS, macOS, native apps | [apple-hig.md](references/apple-hig.md) |
| **Platform** | Shopify Polaris | Merchant-focused, fresh, teal brand | E-commerce, merchant tools | [shopify-polaris.md](references/shopify-polaris.md) |
| **Modern** | Material You | Dynamic color, large corners, tonal palettes | Android, modern web apps | [material-you.md](references/material-you.md) |
| **Modern** | Glassmorphism | Backdrop blur, vibrant gradients | Dashboards, hero sections | [glassmorphism.md](references/glassmorphism.md) |
| **Modern** | Neumorphism | Soft 3D, dual shadows, monochromatic | Creative projects, minimal UI | [neumorphism.md](references/neumorphism.md) |
| **Modern** | Neo-Brutalism | Thick borders, hard shadows, bold colors | Creative agencies, artistic brands | [neo-brutalism.md](references/neo-brutalism.md) |
| **Modern** | Claymorphism | Soft 3D, double inner shadows, playful | Playful apps, consumer products | [claymorphism.md](references/claymorphism.md) |
| **Classic** | Minimalism | Typography-driven, generous padding | Content sites, portfolios | [minimalism.md](references/minimalism.md) |
| **Classic** | Swiss Design | 12-column grid, no shadows, asymmetric | Professional services, typography | [swiss-design.md](references/swiss-design.md) |
| **Classic** | Skeuomorphism | Realistic textures, physical mimicry | Luxury products, vintage themes | [skeuomorphism.md](references/skeuomorphism.md) |
| **Hybrid** | M3 Pastel Glass | Material + Glass, 28px corners | Modern SaaS, creative tools | [m3-pastel-glass.md](references/m3-pastel-glass.md) |
| **Hybrid** | Neo-M3 Hybrid | Brutalism + M3, 3px borders, hard shadows | Tech media, editorial sites | [neo-m3-hybrid.md](references/neo-m3-hybrid.md) |

## Automation: Cursor Integration

This skill can automatically update your project's `.cursorrules` to keep the AI aligned with your design goals.

### `apply_ui_rules.py`
Run this script to append design rules to your current directory's .cursorrules.

```bash
python3 $WORKSPACE/skills/ui-designer-skill/scripts/apply_ui_rules.py --style [fluent|ant|carbon|atlassian|apple-hig|polaris|material|minimal|glass|neumorphism|neo-brutalism|claymorphism|skeuomorphism|swiss|m3-pastel|neo-m3] --palette [pastel|dark|vibrant|mono]
```

## Workflows

### 1. Design Conception
When starting a new feature, ask for:
- Primary design language? (Choose from 16+ systems: Fluent, Ant, Carbon, Atlassian, Apple HIG, Polaris, Material You, Glassmorphism, Neumorphism, Neo-Brutalism, Claymorphism, Minimalism, Swiss Design, Skeuomorphism, or hybrid styles)
- Color vibe? (Pastel, Dark, High-Contrast, Monochromatic, Brand-specific)
- Target platform? (Web, iOS, Android, Desktop, Cross-platform)

### 2. Component Architecture
Plan the HTML/React structure with Tailwind classes. Focus on Grid/Flex layouts and responsiveness.

## Best Practices
- **Consistency:** Stick to one design language per project.
- **Accessibility:** Ensure enough contrast for text.
- **Azzar's Rule:** "Just enough engineering to get it done well." (Wong edan mah ajaib).

Related Skills

axure-prototype-generator

3891

from openclaw/skills

Axure 原型代码生成器 - 输出 JavaScript 格式 HTML 代码，支持内联框架直接加载可交互原型。

UI Design & Prototyping

designer-intelligence-station

3891

3891

from openclaw/skills

Design, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.