web-designer-pro

What problem does it solve?

Many teams and solo designers struggle to turn product requirements into production-ready web designs that are user-first, consistent, and immediately implementable by developers; this Skill streamlines the full design-to-handoff workflow so designs are actionable and scalable.

Core Features & Use Cases

• End-to-end page design: mobile-first wireframes and layout plans for landing pages, product pages, dashboards, and marketing sites.
• Component library & specs: detailed component definitions (buttons, cards, forms, modals) with variants, sizes, states, and accessibility notes.
• Design system & tokens: color palettes, typography scale, spacing tokens, radius and shadow tokens exported as CSS variables suitable for Tailwind/Next.js.
• Developer handoff: responsive breakpoint plans, HTML/CSS examples, implementation notes, and an accessibility (WCAG AA) checklist for fast developer implementation.
• Use case examples: SaaS landing page mobile-first design, e-commerce homepage, admin dashboard component library, and style guide for a brand refresh.

Quick Start

Use the web-designer-pro skill to generate a mobile-first landing page design for a SaaS product, including wireframe, component specs, design tokens, responsive plan, and developer handoff.