skills.rest
CODE-SAURABH
CODE-SAURABHCOMMUNITY
Explore all skills by this author →
GitHub

design-explorer

Generate and compare visual design variants, then convert approved directions into design systems and HTML.

2|1|Updated Jul 25, 2026
Search Tags:#visual design#design systems#design critique#design exploration#html css#mockup conversion#ui variants
One-click install
npx skills add https://github.com/CODE-SAURABH/OpenSkills --skill design-explorer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-explorer
Source: https://github.com/CODE-SAURABH/OpenSkills/tree/main/design-explorer
Command: npx skills add https://github.com/CODE-SAURABH/OpenSkills --skill design-explorer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents generic, under-specified UI work by guiding structured visual exploration, challenging aesthetic assumptions, and turning approved directions into production-ready design systems and HTML.

Core Features & Use Cases

  • Design Variant Exploration: Generate four to six distinct visual directions across typography, colour, spacing, material, motion, and contrarian approaches, with risks and ratings for comparison.
  • Design Systems and Production HTML: Create semantic design tokens, component specifications, accessibility requirements, responsive layouts, and implementation-ready HTML/CSS from an approved direction or mockup.
  • Use Case: When redesigning a dashboard or launching a new product page, use this Skill to compare multiple visual concepts, record stakeholder taste preferences, identify AI design slop, select a direction, and convert it into an accessible responsive implementation.

Quick Start

Ask the design-explorer skill to explore six visual directions for a responsive product landing page, compare them, and recommend the strongest option.

Frequently Asked Questions about design-explorer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I explore multiple visual design directions for a UI mockup?▼

To explore visual design directions, generate four to six distinct variants across typography, color, spacing, and material, then compare their risks and ratings to select the strongest aesthetic. This prevents generic UI work.

How do I convert an approved mockup into production-ready HTML and design tokens?▼

Convert an approved mockup by generating semantic design tokens, component specifications, and accessibility requirements, then outputting implementation-ready HTML and CSS for responsive layouts.

Can I use this workflow for responsive web implementation and design system creation?▼

Yes, this workflow supports responsive web implementation and design system creation by generating semantic design tokens, component specifications, and accessible HTML/CSS from approved visual directions.

What is the best way to compare UI variants and prevent generic AI design slop?▼

The best way to compare UI variants and prevent generic AI design slop is to generate multiple differentiated directions with design-dimension ratings and taste-memory tracking, applying AI design-slop detection to filter outputs.

Does the design critique process include accessibility validation?▼

Yes, the design critique process includes accessibility validation by generating accessibility requirements alongside component specifications and semantic design tokens during the HTML conversion.

Related Skills

Explore More Design & Creative Skills→
DenissvgnDenissvgn

product-owner

Clarify Product Owner responsibilities and validate product vision against business goals.

Community
Basic
gztcodegztcode

popular-web-designs

Generate HTML/CSS code from real-world design system templates.

Community
Intermediate
rakibulismrakibulism
2

design-to-code

Translate Figma mockups, screenshots, and layout descriptions into React, Vue, or HTML/CSS component code.

Community
Advanced
olaafrossiolaafrossi
10

design-shotgun

Generate multiple design variants and a side-by-side comparison board.

Community
Advanced