Can I use external libraries with this skill?

Yes, the skill references an approved CDN library catalog and can select up to five libraries per design pass based on the specific interaction profile required.

How does the visual validation process work?

After code generation, the skill automatically triggers Playwright to capture mobile and desktop screenshots. It then performs a quality check for contrast, responsiveness, layout integrity, and content population.

Does it generate functional code or just mockups?

It generates complete, functional code including HTML, CSS, and JavaScript for ten different views per pass, resulting in standalone prototypes that can be reviewed in any browser.

What design styles does this skill support?

The skill supports five distinct style families, each with up to four unique passes, allowing for a wide range of aesthetic outcomes from brutalist and mid-century to modern corporate styles.

How does the orchestrator ensure designs aren't repetitive?

It utilizes a layout uniqueness catalog and an 'anti-repeat' constraint list, ensuring that each new generation pass uses different structural profiles and component patterns from previous ones.

Frontend Design Orchestrator

Name: Frontend Design Orchestrator
Author: pelchers

bypelchers

0•

Herramientas de Diseño

Orchestrates multi-style frontend concept generation and automated visual validation for rapid UI prototyping.

The Frontend Design Orchestrator is a sophisticated skill designed to automate the creation of diverse, production-grade frontend interfaces. By coordinating specialized subagents across five distinct design families, it generates multiple unique iterations (passes) of a project. The skill manages the entire lifecycle of design creation—from selecting typography and color palettes to implementing complex interaction profiles and validating the final output via automated Playwright screenshots. It ensures design variety through a uniqueness catalog and enforces high quality standards through a mandatory visual review process, making it an essential tool for rapid design exploration and high-fidelity prototyping.

Características Principales

01Integrated CDN library and asset management for incorporating approved media and external scripts.

02Multi-style concept generation across five distinct design families with up to four passes each.

03Strict pass isolation and uniqueness validation to ensure distinct structural layouts and design patterns.

04Intelligent subagent orchestration with specific interaction profiles, content personas, and product context.

050 GitHub stars

06Automated visual quality review using Playwright to capture and audit desktop and mobile screenshots.

Casos de Uso

01Automating the creation of unique, themed UI starters that align with specific product data models and branding.

02Prototyping complex, multi-view web applications with diverse interaction models and responsive layouts.

03Rapidly generating a variety of high-fidelity design concepts for stakeholder review or client presentations.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pelchers/mocktrialgame deprecated

For use in Claude.ai and ChatGPT