designer_skill

This skill helps you craft accessible, brand-aligned UI and design systems, auditing UX and implementing intentional, high-quality visuals.

Python

60

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill kienhaminh/anti-chaotic --skill designer

SKILL.md5.3 KB

Overview

This skill provides expert frontend design guidance for building UI, branding, and accessible design systems. It focuses on intentional aesthetics, technical quality, and production-ready assets. Use it to create visual tokens, motion specs, and high-quality transparent assets for handoff to development.

How this skill works

The skill inspects design goals and generates concrete design decisions: color rationale, typography choices, interaction intent, and accessibility checks. It produces assets using a guided prompt formula and a generation tool, then applies an automated background-removal script to produce transparent-ready icons and illustrations. It also outputs design tokens, motion specs, and handoff notes for frontend implementation.

When to use it

Designing or auditing UI, brand systems, or component libraries
Creating icons, avatars, or illustrations with transparent backgrounds
Preparing design-to-development handoffs and motion specs
Performing accessibility and UX audits for compliance
Establishing a distinct visual direction beyond templated aesthetics

Best practices

Be intentional: record the reason for each color, font, and animation choice
Prioritize semantic HTML and CSS custom properties when specifying implementation
Use the prompt formula: core subject + visual style + lighting/color + technical specs for assets
Keep accessibility as the foundation: contrast, keyboard support, and screen-reader labels
Generate raw assets then run the background-removal helper to produce production-ready transparent images

Example use cases

Create a cohesive design system: tokens, component rules, and documentation for consistent UI
Design a unique brand direction that avoids generic templates and default AI styles
Produce high-quality icon sets with transparent backgrounds for use in apps and games
Write motion specs for micro-interactions and hand them to frontend engineers
Audit an existing interface for WCAG issues and provide prioritized fixes

FAQ

Generate the asset with the guided prompt formula, save the raw output, then run the included background-removal helper to produce a transparent PNG/SVG for production use.

What prompt structure produces the best assets?

Use: [Core Subject] + [Visual Style] + [Lighting/Color] + [Technical/Quality specs]. Include ‘clean background’ or ‘minimalist’ when you need easy extraction.