How does it handle mobile responsiveness?

The skill generates full CSS with responsive breakpoints and validates them using specific mobile-sized viewport screenshots (390x844) during the review phase.

How does it ensure design quality?

It uses Playwright to capture multi-viewport screenshots and runs a mandatory quality checklist covering text contrast, mobile responsiveness, and layout integrity.

Does it overwrite previous design attempts?

No, it scans existing folders and creates new, isolated 'passes' to ensure your design history is preserved and variations remain distinct.

What design styles does this skill support?

The orchestrator supports five distinct style families defined in your configuration, such as brutalist or mid-century, each with unique typographic and palette overrides.

Can I use my own libraries and assets?

Yes, the orchestrator references local catalogs for approved CDN libraries and media sources to ensure technical and visual consistency.

Frontend Design Orchestrator

Name: Frontend Design Orchestrator
Author: pelchers

bypelchers

0•

デザインツール

Orchestrates multi-style frontend concept generation with automated visual validation and strict quality controls.

The Frontend Design Orchestrator is a sophisticated Claude Code skill designed to automate high-fidelity UI/UX ideation across five distinct style families. It manages isolated task agents to create unique layouts, applying specific typography and color overrides while integrating real-world product context for meaningful content. Beyond simple code generation, it automates visual quality assurance using Playwright to capture screenshots across desktop and mobile viewports, performing mandatory checks for accessibility, responsiveness, and layout integrity to ensure production-grade results.

主な機能

01Automated visual validation using Playwright for desktop and mobile viewports

02Support for CDN libraries, media assets, and custom interaction profiles

03Strict pass isolation with uniqueness checks to prevent design repetition

040 GitHub stars

05Multi-style concept generation across 5 distinct design families

06Integrated quality review for contrast, responsiveness, and content population

ユースケース

01Generating diverse, production-ready frontend layouts for stakeholder reviews

02Automating design exploration while maintaining strict brand and quality standards

03Rapidly prototyping multiple UI/UX directions for a new product launch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pelchers/sessionsaver planning-frontend-design-orchestrator

For use in Claude.ai and ChatGPT

主な機能

01Automated visual validation using Playwright for desktop and mobile viewports

02Support for CDN libraries, media assets, and custom interaction profiles

03Strict pass isolation with uniqueness checks to prevent design repetition

040 GitHub stars

05Multi-style concept generation across 5 distinct design families

06Integrated quality review for contrast, responsiveness, and content population

ユースケース

01Generating diverse, production-ready frontend layouts for stakeholder reviews

02Automating design exploration while maintaining strict brand and quality standards

03Rapidly prototyping multiple UI/UX directions for a new product launch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pelchers/sessionsaver planning-frontend-design-orchestrator

For use in Claude.ai and ChatGPT