OpenClaw

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).

1999azzar0 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install 1999azzar/ui-designer-skill

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

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
Enterprise	Ant Design	Natural, 8px grid, 12-column	Admin panels, B2B, data-heavy apps	ant-design.md
Enterprise	Carbon Design	16-column grid, IBM Plex, clarity	Enterprise software, data visualization	carbon-design.md
Enterprise	Atlassian Design	Bold, collaboration-focused, 8px grid	Project management, team tools	atlassian-design.md
Platform	Apple HIG	SF Pro, vibrancy, blur materials, 44pt targets	iOS, macOS, native apps	apple-hig.md
Platform	Shopify Pola...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/1999azzar/ui-designer-skill
Version: —
Commit: 7f7f1e02e1a745371ee74032564eb26970b6624b
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# 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 Pola...

搜索