How does it handle mobile responsiveness?

The skill follows a strict mobile-first design principle, ensuring that all layouts and components scale gracefully from mobile devices to large desktop screens.

What is the Web Design Claude Code skill?

It is a specialized plugin that enables Claude to act as a senior UI/UX designer, creating visual systems, layouts, and implementation-ready front-end code.

Does it produce developer-ready code?

Absolutely. The skill provides technical specifications and implementation outputs like HTML/CSS or Tailwind CSS sketches to ensure design fidelity during development.

Can I use it to apply specific art styles to my website?

Yes, the skill can translate specific aesthetics like Bauhaus, Pop Art, Mid-Century Modern, and Futuristic styles into functional web interfaces.

Web Design & UI Architect

Name: Web Design & UI Architect
Author: aviflombaum

byaviflombaum

•

デザインツール

Architects high-fidelity web interfaces, visual systems, and aesthetic layouts with a focus on accessibility and implementation-ready code.

The Web Design skill transforms Claude into a senior UI/UX lead capable of creating sophisticated visual identities and functional web layouts. It excels at applying specific artistic movements—like Bauhaus, Pop Art, or Retro—to modern interfaces while ensuring strict adherence to core design principles like visual hierarchy, typographic discipline, and WCAG accessibility standards. Whether you are building a landing page from scratch or defining a comprehensive design system, this skill provides the essential bridge between creative vision and technical implementation through ready-to-use CSS and Tailwind specifications.

主な機能

01WCAG-compliant accessibility auditing for contrast and touch targets

0230 GitHub stars

03Responsive mobile-first layout architecture for all device types

04Multi-style aesthetic translation including Bauhaus, Pop Art, and Futuristic themes

05Direct generation of implementation-ready HTML and Tailwind CSS snippets

06Comprehensive design system generation covering typography, palettes, and spacing

ユースケース

01Developing scalable design systems for complex web dashboards

02Modernizing legacy user interfaces with contemporary design patterns

03Designing high-converting landing pages with distinct visual identities

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aviflombaum/claude-code-in-avinyc web-design

For use in Claude.ai and ChatGPT

Download Skill