skills.rest
erichowens
erichowensCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-expert

Generate distinctive web designs and brand identities with WCAG accessibility.

181|30|Updated Nov 16, 2025
Search Tags:#accessibility#UI/UX#design system#CSS#brand identity#visual design#web design
One-click install
npx skills add https://github.com/erichowens/some_claude_skills --skill web-design-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-expert
Source: https://github.com/erichowens/some_claude_skills/tree/main/.claude/skills/web-design-expert
Command: npx skills add https://github.com/erichowens/some_claude_skills --skill web-design-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of creating generic or uninspired web designs by focusing on unique brand identity, modern UI/UX patterns, and strict accessibility standards. It ensures your web presence is distinctive, professional, and user-friendly, avoiding common design pitfalls.

Core Features & Use Cases

  • Brand Identity Development: Defines brand personality, creates distinctive color palettes, selects reinforcing typography, and designs visual language.
  • Modern UI/UX Patterns: Incorporates contemporary design trends like Brutalism, Neumorphism, and Glassmorphism while ensuring WCAG accessibility.
  • Technical Implementation Guidance: Provides production-ready CSS techniques and design system documentation for scalable web applications.
  • Use Case: You need a new website for your startup that stands out. This Skill can develop a complete brand identity, generate unique visual designs (e.g., a "Brutalist" hero section), and provide the CSS implementation, all while ensuring WCAG 2.1 AA compliance.

Quick Start

Design a modern, minimalist hero section for a SaaS product website, including a color palette and typography.

Frequently Asked Questions about web-design-expert

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

FAQPage Schema
How do I create an accessible web design that meets WCAG standards?▼

Accessible web design requires integrating WCAG 2.1 AA compliance from the start through color contrast validation, semantic HTML, keyboard navigation, and proper spacing scales. This Skill applies accessibility principles across layout, typography, and component design to ensure your site serves all users.

What's the best way to develop a brand identity and color palette for a website?▼

Brand identity development starts by defining brand personality, then selecting a distinctive color palette and typography that reinforce your visual language. This Skill generates cohesive brand systems with mood direction, visual hierarchy, and spacing scales ready for production CSS implementation.

How do I design responsive layouts that work across different screen sizes and devices?▼

Responsive design requires defining breakpoints, spacing scales, and flexible component layouts that adapt to dashboards, marketing sites, and product interfaces. This Skill handles layout composition and responsive breakpoints while providing design-to-code workflows through Figma and CSS techniques.

Can I use modern design trends like Brutalism or Glassmorphism while keeping accessibility?▼

Modern design trends such as Brutalism, Neumorphism, and Glassmorphism can coexist with accessibility when contrast, spacing, and semantic structure are prioritized. This Skill incorporates contemporary patterns while maintaining WCAG compliance across all visual elements.

What do I need to move from design mockups to production-ready CSS code?▼

Design-to-code workflows require design system documentation, component specifications, and production-ready CSS techniques. This Skill integrates Figma MCP tooling and 21st.dev MCP to bridge design decisions and technical implementation, outputting scalable systems for web applications.

How do I ensure visual hierarchy and spacing consistency across my entire website?▼

Visual hierarchy and spacing consistency depend on defined spacing scales, typography direction, and component-level design decisions indexed systematically. This Skill applies mood direction and hierarchy principles across all interfaces to create cohesive, professional web presences.

Related Skills

Explore More Design & Creative Skills→
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
SignmanalSignmanal
1

popular-web-designs

Generate HTML and CSS replicating design systems from 54 popular websites.

Community
Intermediate
xiaoquqixiaoquqi

popular-web-designs

Generate HTML/CSS boilerplate from design-system templates and CSS patterns.

Community
Advanced
retz8retz8

frontend-design

Generate frontend interfaces with HTML/CSS, React, Vue, and design systems.

Community
Basic