skills.rest
ashishgurprit
ashishgurpritCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-consultant

Generate design systems with color palettes, typography, and WCAG validation.

Updated Jun 7, 2024
Search Tags:#branding#accessibility#UI/UX#design system#design tokens#colour palette
One-click install
npx skills add https://github.com/ashishgurprit/ANLP_A3 --skill visual-design-consultant
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-consultant
Source: https://github.com/ashishgurprit/ANLP_A3/tree/main/.claude.backup/skills/visual-design-consultant
Command: npx skills add https://github.com/ashishgurprit/ANLP_A3 --skill visual-design-consultant

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @types/node, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill transforms user colour preferences into comprehensive, professional design systems, ensuring visually appealing and accessible digital products.

Core Features & Use Cases

  • Automated Palette Generation: Creates harmonious colour palettes based on a primary colour and desired mood or industry.
  • Design System Foundation: Generates design tokens, typography scales, spacing systems, and component styles.
  • Accessibility Validation: Automatically checks colour contrast against WCAG standards.
  • Use Case: A startup needs a brand identity. Provide their primary colour (e.g., a specific blue) and keywords like "modern, trustworthy," and the Skill will generate a full design system, including a logo concept, colour palette, typography, and basic UI component styles.

Quick Start

Use the visual-design-consultant skill to generate a design system for a new app using the colour #4A90E2 and the mood 'calm professional'.

Frequently Asked Questions about visual-design-consultant

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a design system from a specific colour palette?▼

To generate a design system from a colour palette, provide a primary colour and project mood. The system outputs typography scales, component styles, and design tokens formatted as JSON or CSS variables based on your preferences.

Can I create a Tailwind CSS configuration from colour preferences?▼

Yes, you can create a Tailwind CSS configuration from colour preferences. The generated design system automatically exports your colour palette, typography, and spacing variables directly into a usable Tailwind config format.

Does automated colour palette generation validate accessibility for UI design?▼

Yes, automated colour palette generation validates accessibility for UI design. It checks colour contrast ratios against WCAG standards to ensure your typography and component styles remain accessible and visually compliant.

What is the best way to build design tokens for React component styles?▼

The best way to build design tokens for React component styles is using modular scales and colour theory. This approach converts project mood inputs into structured JSON or CSS variables for consistent UI implementation.

Can I use hex codes to generate a full UI design system with typography and spacing?▼

Yes, you can use hex codes to generate a full UI design system. Input a specific hex code and industry keywords to automatically produce matching typography, spacing systems, and component styles.

Related Skills

Explore More Design & Creative Skills→
resultanyildiziresultanyildizi
4

dominant-color

Extract dominant color and palette from images using ColorThief, outputting hex, rgb, or JSON.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
felipesantiago-coderfelipesantiago-coder

visual-design-foundations

Standardize typography, color, spacing, and iconography for accessible UI design.

Community
Intermediate