skills.rest
GuruDevvv
GuruDevvvCOMMUNITY
Explore all skills by this author →
GitHub

design-first

Generate six diverse HTML prototypes for landing pages, dashboards, and forms.

2|Updated Mar 8, 2026
Search Tags:#design#ui#prototype#gallery#brief#design-first
One-click install
npx skills add https://github.com/GuruDevvv/my-claude-skills --skill design-first-gurudevvv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-first
Source: https://github.com/GuruDevvv/my-claude-skills/tree/main/design-first
Command: npx skills add https://github.com/GuruDevvv/my-claude-skills --skill design-first-gurudevvv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AI often generates a single design; this skill produces multiple divergent HTML prototypes to enable quick comparison and better decision-making before coding.

Core Features & Use Cases

  • Generate 4–6 diverse HTML prototypes (Hero pages, dashboards, or forms) for side-by-side evaluation.
  • Interview, reference analysis, design brief, parallel prototypes, gallery comparison, and selection to build from.
  • Use cases include rapid visual direction exploration for marketing pages, product dashboards, and form-heavy interfaces.

Quick Start

Describe your project goals and run the skill to generate 6 prototypes ready for gallery-based comparison.

Frequently Asked Questions about design-first

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

FAQPage Schema
How do I generate multiple HTML prototypes for side-by-side comparison before coding?▼

You can generate multiple HTML prototypes by providing your project goals to produce six diverse standalone HTML outputs, including landing pages, dashboards, and forms, ready for gallery-based evaluation and selection.

What is the best way to avoid design lock-in when starting a new UI project?▼

To avoid design lock-in, generate six divergent HTML prototypes for parallel evaluation. This approach covers landing pages, dashboards, and forms, enabling side-by-side comparison and informed selection before committing to code.

Do I need any dependencies to generate mobile-first HTML prototypes?▼

No dependencies are required to generate mobile-first HTML prototypes. The process operates independently to deliver standalone HTML outputs with mobile-first breakpoints at 768px and 1440px, alongside a persisted BRIEF.md file.

Can I use this parallel prototyping approach for form-heavy interfaces and product dashboards?▼

Yes, you can use parallel prototyping for form-heavy interfaces and product dashboards. It generates diverse visual directions specifically tailored for marketing pages, dashboards, and forms to enable rapid visual comparison and selection.

Does the generated gallery page support integration with other UI design tools?▼

Yes, the generated gallery page supports optional integration with ui-ux-pro-max. This allows you to transition from comparing diverse standalone HTML prototypes to further refining the selected design direction within your workflow.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
2.0k

design-brief

Define and document a design brief with problem space, audience, constraints, and success criteria.

Community
Intermediate
gvkhoslagvkhosla
8

design-direction-setter

Generate a design-brief.md with typography, color palette, and visual tone.

Community
Intermediate
joshua3403joshua3403

phase-3-mockup

Generate structured HTML/CSS/JS prototypes from user prompts.

Community
Basic
jonkikyjonkiky

design-shotgun

Generate multiple AI design variants and present them side-by-side for comparison.

Community
Advanced