How does this skill ensure design variety?

It utilizes a uniqueness catalog featuring 20 structural profiles and an anti-repeat system to ensure no two generation passes share the same layout or interaction patterns.

Does it generate working code or just mockups?

The skill generates complete, functional HTML, CSS, and JavaScript files, including responsive breakpoints and library integrations for up to 10 distinct views.

What happens if a design doesn't meet quality standards?

The orchestrator will identify the specific defect, attempt up to two automated fix cycles on the source files, and re-run visual validation to confirm the resolution.

Can I customize the design styles used?

Yes, the orchestrator relies on a style-config.json file where users can define custom palettes, typography, and interaction profiles for the AI to follow.

How does the visual quality review work?

After generation, the skill uses Playwright to capture screenshots of multiple views. It then inspects these images for issues like text contrast, blank pages, or broken layouts, attempting to fix code automatically if errors are found.

Frontend Design Orchestrator

Name: Frontend Design Orchestrator
Author: pelchers

bypelchers

0•

デザインツール

Orchestrates multi-style frontend concept generation with automated visual validation and strict variety constraints.

The Frontend Design Orchestrator is a high-level automation skill designed to generate diverse, production-ready frontend concepts across multiple design families. It dispatches isolated agents to create unique layouts, apply specific typographic and color overrides, and integrate modern interaction profiles. Beyond mere code generation, the skill includes a robust validation engine that uses Playwright to capture cross-device screenshots and performs an automated visual quality audit to ensure responsiveness, readability, and layout integrity before final review.

主な機能

010 GitHub stars

02Dynamic library and asset integration from curated CDN and media catalogs.

03Automated Playwright integration for desktop and mobile visual validation.

04Multi-style concept generation across five distinct design families.

05Strict uniqueness checking using structural layout profiles and anti-repeat constraints.

06Integrated quality review loop with automated code-fix cycles for layout defects.

ユースケース

01Rapidly exploring multiple high-fidelity UI directions for a new product feature.

02Generating diverse, responsive design mockups populated with real product data models.

03Automating the quality assurance process for frontend components across various viewports.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pelchers/ideas_management deprecated

For use in Claude.ai and ChatGPT

主な機能

010 GitHub stars

02Dynamic library and asset integration from curated CDN and media catalogs.

03Automated Playwright integration for desktop and mobile visual validation.

04Multi-style concept generation across five distinct design families.

05Strict uniqueness checking using structural layout profiles and anti-repeat constraints.

06Integrated quality review loop with automated code-fix cycles for layout defects.

ユースケース

01Rapidly exploring multiple high-fidelity UI directions for a new product feature.

02Generating diverse, responsive design mockups populated with real product data models.

03Automating the quality assurance process for frontend components across various viewports.