skills.rest
perasyudha
perasyudhaCOMMUNITY
Explore all skills by this author →
Website𝕏@Nyxora_AIGitHub

sketch

Generates 2-3 interactive HTML mockup variants for comparing UI design directions.

5|2|Updated May 26, 2026
Search Tags:#comparison#prototype#ui design#tailwind#wireframe#design variants#html mockup
One-click install
npx skills add https://github.com/perasyudha/Nyxora --skill sketch-perasyudha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/perasyudha/Nyxora/tree/main/packages/core/playbooks/creative/sketch
Command: npx skills add https://github.com/perasyudha/Nyxora --skill sketch-perasyudha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI design direction without seeing options leads to costly rework. This Skill produces disposable, interactive HTML mockups so you can compare 2-3 distinct design stances side-by-side before committing to one. ## Core Features & Use Cases - Variant Generation: Builds 2-3 self-contained HTML files, each taking a different design stance (density, emphasis, aesthetic, layout) with realistic content and real interactivity. - Visual Verification: Uses browser navigation and vision tools to render each variant and catch layout bugs before presenting them. - Head-to-Head Comparison: Presents variants in an opinionated comparison table with trade-offs, plus per-variant READMEs documenting design choices. - Use Case: Before building a new dashboard home screen, ask for three takes — calm editorial, utilitarian dense, and playful split — then pick a winner or combine two into a hybrid. ## Quick Start Sketch three design variants for my app's settings screen so I can compare different layout directions.

Frequently Asked Questions about sketch

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

FAQPage Schema
How do I create HTML mockups to compare UI design options?▼

Describe the screen you want to explore, and the skill generates 2-3 standalone HTML variants, each taking a different design stance such as density, emphasis, or layout. Each variant is interactive and viewable directly in a browser for side-by-side comparison.

What makes a good design variant for comparison?▼

Variants should differ along one clear axis like density, emphasis, aesthetic, or layout rather than superficial changes like accent color. Each variant needs realistic content, working interactions, and a README documenting its trade-offs.

Can I use Tailwind CSS in quick HTML mockups?▼

Yes, Tailwind via the CDN script tag works well for throwaway mockups since it requires no build step. Alternatively, use inline styles with a system font stack and a minimal CSS reset for fully self-contained files.

When should I not use throwaway HTML sketches?▼

Skip sketching when you need a production-ready component, a polished one-off artifact like a landing page, or a diagram. It is also unnecessary when the design direction is already locked and you can build directly.

How interactive should a design mockup be?▼

A mockup is interactive enough when clicking a primary action triggers a visible change, one meaningful state transition works such as filtering or toggling, and hover affordances respond. More than that is over-engineering a disposable sketch.

Related Skills

Explore More Design & Creative Skills→
519lab519lab
2

sketch

Generate HTML design mockups from user parameters for side-by-side comparison.

Official
Intermediate
EngineerWithAIEngineerWithAI
4

tailwind-design-system

Build scalable Tailwind CSS design systems with CVA variants and Radix UI primitives.

Official
Intermediate
GenEducationGenEducation

design-shotgun

Generate multiple UI design variants and compare them side by side.

Official
Advanced
inbharataiinbharatai
22

wireframe-builder

Generate low-fidelity wireframes and user-flow diagrams with interaction annotations.

Community
Basic