Publish Skill Final

v1.3.1

Design beautiful interfaces using 16+ design systems including Material You, Fluent Design, Apple HIG, Ant Design, Carbon Design, Shopify Polaris, Minimalism...

⭐ 4· 1.2k·8 current·8 all-time

byazzar budiyanto@1999azzar

OpenClaw Prompt Flow

Install with OpenClaw

Best for remote or guided setup. Copy the exact prompt, then paste it into OpenClaw for 1999azzar/ui-designer-skill.

Previewing Install & Setup.

Prompt PreviewInstall & Setup

Install the skill "Publish Skill Final" (1999azzar/ui-designer-skill) from ClawHub.
Skill page: https://clawhub.ai/1999azzar/ui-designer-skill
Keep the work scoped to this skill only.
After install, inspect the skill metadata and help me finish setup.
Use only the metadata you can verify from ClawHub; do not invent missing requirements.
Ask before making any broader environment changes.

Command Line

CLI Commands

Use the direct CLI path if you want to install manually and keep every step visible.

OpenClaw CLI

Canonical install target

openclaw skills install 1999azzar/ui-designer-skill

ClawHub CLI

Package manager switcher

npx clawhub@latest install ui-designer-skill

Security Scan

VirusTotal

Benign

View report →

OpenClaw

Benign

high confidence

✓

Purpose & Capability

Name/description claim UI design assistance across many systems and the repository contains reference docs, palettes, patterns, and a small helper script — all relevant to the stated purpose.

✓

Instruction Scope

SKILL.md stays on-topic: design guidance, workflows, and an explicit automation step to update .cursorrules. No instructions request unrelated system state, credentials, or external endpoints.

✓

Install Mechanism

No install spec is present (instruction-only + a local Python script). No downloads, installers, or third-party package pulls — low-risk.

✓

Credentials

Skill requires no environment variables, credentials, or config paths. The only runtime reference is a suggested python3 command using $WORKSPACE (conventional), but the script itself only writes to .cursorrules in the current directory.

ℹ

Persistence & Privilege

always:false and agent invocation is normal. The included script will create or append to a .cursorrules file in the working directory — this mutates project files (expected for this feature) and is the only persistent effect; review before running or back up the file.

Assessment

This skill appears coherent and low-risk: it provides design references and a small Python helper that writes design rules to a local .cursorrules file. Before running the apply_ui_rules.py script, review its contents (it's short and readable), and consider backing up any existing .cursorrules in the target project. Run the script in a test or repository where you're comfortable allowing a file write. No network access, credentials, or unexpected binaries are requested.

Like a lobster shell, security has layers — review code before you run it.

latestvk9707k8thadwkmht8ens5zjmt1829rkk

1.2kdownloads

4stars

7versions

Updated 1mo ago

v1.3.1

MIT-0

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 Polaris	Merchant-focused, fresh, teal brand	E-commerce, merchant tools	shopify-polaris.md
Modern	Material You	Dynamic color, large corners, tonal palettes	Android, modern web apps	material-you.md
Modern	Glassmorphism	Backdrop blur, vibrant gradients	Dashboards, hero sections	glassmorphism.md
Modern	Neumorphism	Soft 3D, dual shadows, monochromatic	Creative projects, minimal UI	neumorphism.md
Modern	Neo-Brutalism	Thick borders, hard shadows, bold colors	Creative agencies, artistic brands	neo-brutalism.md
Modern	Claymorphism	Soft 3D, double inner shadows, playful	Playful apps, consumer products	claymorphism.md
Classic	Minimalism	Typography-driven, generous padding	Content sites, portfolios	minimalism.md
Classic	Swiss Design	12-column grid, no shadows, asymmetric	Professional services, typography	swiss-design.md
Classic	Skeuomorphism	Realistic textures, physical mimicry	Luxury products, vintage themes	skeuomorphism.md
Hybrid	M3 Pastel Glass	Material + Glass, 28px corners	Modern SaaS, creative tools	m3-pastel-glass.md
Hybrid	Neo-M3 Hybrid	Brutalism + M3, 3px borders, hard shadows	Tech media, editorial sites	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.

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

Comments

Loading comments...