skills.rest
sonyho2715
sonyho2715COMMUNITY
Explore all skills by this author →
GitHub

graphic-designer

Create brand identities and Tailwind-compatible design tokens for web interfaces.

Updated Aug 27, 2026
Search Tags:#typography#branding#tailwind#design-system#visual-design#logo#color-theory
One-click install
npx skills add https://github.com/sonyho2715/lee-meadows-saas --skill graphic-designer-sonyho2715
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphic-designer
Source: https://github.com/sonyho2715/lee-meadows-saas/tree/main/.claude/skills/graphic-designer
Command: npx skills add https://github.com/sonyho2715/lee-meadows-saas --skill graphic-designer-sonyho2715

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and product teams often deliver inconsistent visual assets and incomplete developer handoffs, causing rework and slow implementation; this Skill provides clear brand identities, accessible color systems, and developer-ready specifications to streamline design-to-engineering delivery.

Core Features & Use Cases

  • Brand Identity: Logo types, color palettes, and usage guidelines to ensure consistent visual language.
  • Design Systems: Tailwind-compatible design tokens, spacing scales, typography systems, and component specs for UI libraries.
  • Accessibility & Responsiveness: Color contrast recommendations, touch target sizing, and breakpoint guidance for mobile-first layouts.
  • Use Case: Prepare a complete handoff for a SaaS dashboard with logo variants, hex/RGB color tokens, typography scale, button and card component specs, and exportable SVG assets for engineers.

Quick Start

Design a complete brand identity and Tailwind-friendly component specification for a new fintech dashboard including logo variations, a primary/secondary color palette with hex codes, typography choices, and button/card component rules.

Frequently Asked Questions about graphic-designer

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

FAQPage Schema
How do I create a complete brand identity and design system for a web application?▼

Create a complete brand identity by defining logo variations, color palettes with hex values, typography scales, and Tailwind-compatible design tokens. This process ensures consistent visual language and provides developer-ready specifications for product teams.

How do I generate Tailwind-compatible design tokens for my UI component library?▼

Generate Tailwind-compatible design tokens by defining spacing scales, typography systems, and color hex values. This provides clear, accessible design system specifications that streamline design-to-engineering handoff and reduce implementation rework.

What is the best way to ensure my color palette meets accessibility contrast targets?▼

The best way to ensure palette accessibility is to generate color contrast recommendations alongside primary and secondary color hex values. This guarantees your visual design meets accessibility targets for mobile-first layouts and product interfaces.

Can I use this approach to prepare developer-ready component specs for a SaaS dashboard?▼

Yes, you can prepare a complete handoff for a SaaS dashboard with logo variants, color tokens, typography scales, and button/card component specs. This delivers exportable SVG assets and responsive layout guidance directly for engineers.

Does generating responsive layout guidance include mobile-first breakpoint definitions?▼

Responsive layout guidance includes mobile-first breakpoint definitions, touch target sizing, and component specifications. This ensures your UI design system adapts correctly across different screen sizes and product interfaces.

Related Skills

Explore More Design & Creative Skills→
SheshiyerSheshiyer

visual-identity-core

Generate a brand visual identity guide with color palettes, typography, logo rules, and imagery guidelines.

Community
Basic
svengrazianisvengraziani
2

color-palettes

Generate 12 balanced color palettes with hex and HSL values for UI design systems.

Community
Basic
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
cookeyholdercookeyholder

ckm-design-system

Organize design tokens into a three-layer model with CSS variables.

Community
Advanced