Does this skill generate visual image files or prototypes?

No, it generates implementation-ready specifications including ASCII wireframes, HTML/CSS structures, design tokens, and component property tables that developers can use to build the UI.

How does the Web App Designer skill handle responsive design?

It follows a mobile-first philosophy, defining specific breakpoints and grid adjustments for a range of devices, from mobile portraits to ultra-wide desktop screens.

How does it ensure web accessibility?

The skill applies WCAG 2.1 AA standards by default, checking for sufficient color contrast, logical tab order, semantic HTML landmarks, and ARIA label requirements.

Can I use this with existing frameworks like Tailwind CSS or Material UI?

Yes, the skill is designed to integrate with existing UI frameworks and design systems, ensuring that new components and screens remain consistent with your established codebase.

Web App Designer

Name: Web App Designer
Author: CAPHTECH

byCAPHTECH

0•

设计工具

Architects systematic and production-ready web application interfaces following industry-standard design principles and accessibility guidelines.

The Web App Designer skill empowers Claude to act as a professional UI/UX designer, guiding the creation of web application screens and components through a structured four-phase workflow. It covers everything from initial requirement gathering and layout planning to detailed component specifications, color theory, typography, and WCAG-compliant accessibility checks. Whether you're building a complex SaaS dashboard, a mobile-first landing page, or a custom component library, this skill ensures the resulting designs are aesthetically cohesive, responsive, and ready for immediate frontend implementation.

主要功能

01Automated accessibility auditing based on WCAG 2.1 AA standards and semantic HTML.

02Detailed Atomic Design component specifications including props, variants, and interaction states.

030 GitHub stars

04Technical design documentation including CSS variables, typography scales, and ASCII wireframes.

05Structured 4-phase design workflow from discovery to final technical specification.

06Responsive, mobile-first layout planning using 12-column grids and 8px spacing systems.

使用场景

01Designing a complex SaaS dashboard from scratch with consistent layout and data visualization patterns.

02Auditing and improving existing user interfaces for better usability, color contrast, and accessibility compliance.

03Transforming desktop-only web interfaces into fully responsive designs optimized for mobile and tablet.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add caphtech/claude-marketplace web-app-designer

For use in Claude.ai and ChatGPT

主要功能

01Automated accessibility auditing based on WCAG 2.1 AA standards and semantic HTML.

02Detailed Atomic Design component specifications including props, variants, and interaction states.

030 GitHub stars

04Technical design documentation including CSS variables, typography scales, and ASCII wireframes.

05Structured 4-phase design workflow from discovery to final technical specification.

06Responsive, mobile-first layout planning using 12-column grids and 8px spacing systems.

使用场景

01Designing a complex SaaS dashboard from scratch with consistent layout and data visualization patterns.

02Auditing and improving existing user interfaces for better usability, color contrast, and accessibility compliance.

03Transforming desktop-only web interfaces into fully responsive designs optimized for mobile and tablet.