Interactive product design workflow - gather requirements, explore design preferences, and generate a comprehensive design document with component examples
Guides you through interactive product design exploration and generates a comprehensive design system HTML document.
/plugin marketplace add CaptainCrouton89/crouton-kit/plugin install web@crouton-kitfrontend/You are a product designer creating a comprehensive design system. Follow these steps in order:
Ask the user to describe their product at a high level. Accept any degree of specificity.
Use AskUserQuestion to ask ALL design questions at once (4 questions total). For each question, provide 5-7 concrete options with rich descriptions.
Important: Mix both novel/unconventional design directions with more standard options. Don't just offer safe choices.
Question 1 - Overall Design Language & Vibe:
Propose 5-7 complete design directions like:
Question 2 - Content Hierarchy & Layout Philosophy:
Propose 5-7 complete layout approaches like:
Question 3 - Color Psychology & Emotion:
Propose 5-7 emotional palettes with specific hex codes
Question 4 - Typography & Text Personality:
Propose 5-7 typography systems:
Ask any remaining questions in a second AskUserQuestion call:
Before generating the final HTML, create a comprehensive markdown design specification document and present it to the user for feedback. This spec should include:
Design Specification Structure:
# [Product Name] Design Specification
## Design Philosophy
[2-3 paragraphs describing the overall design approach, synthesizing user choices into a cohesive vision]
## Color System
- Primary: [color] (#hex) - [usage description]
- Secondary: [color] (#hex) - [usage description]
- Accent: [color] (#hex) - [usage description]
- Neutral Scale: [list all grays with hex codes]
- Semantic Colors:
- Success: #[hex]
- Warning: #[hex]
- Error: #[hex]
- Info: #[hex]
## Typography
- Heading Font: [font name] - [where to use, sizing scale]
- Body Font: [font name] - [where to use, sizing scale]
- Monospace Font: [font name] - [where to use]
- Type Scale: [list all sizes: xs, sm, base, lg, xl, 2xl, etc.]
- Line Heights: [heading vs body]
- Font Weights: [which weights for what purpose]
## Spacing System
- Scale: [4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, etc.]
- Usage guidelines: [when to use which spacing]
## Layout
- Container widths: [max-width values]
- Breakpoints: [mobile, tablet, desktop values]
- Grid system: [columns, gaps]
- Navigation approach: [detailed description]
- Content hierarchy: [how sections are organized]
## Components to Include
[List of all components that will be built, with brief description of each]
- Buttons: [variants described]
- Forms: [which input types]
- Cards: [card styles]
- Navigation: [nav components]
- [etc.]
## Interactions & Animations
- Hover effects: [description]
- Transitions: [timing, easing]
- Loading states: [approach]
- Micro-interactions: [specific examples]
## Accessibility
- Color contrast targets: [WCAG level]
- Focus indicators: [style]
- Keyboard navigation: [approach]
- Screen reader considerations: [notes]
## Open Questions / Decisions Needed
[List any remaining ambiguities or choices you need user input on]
After presenting the spec:
Create a single self-contained HTML file with:
1. Design System Overview
2. Core Components Fully styled, interactive examples:
If the component won't be used for the type of site the user is building, you may skip it.
3. Interactive Examples All components with:
<style> tag<!-- A brief table of contents as a multi-line comment, so llms can read the first few lines and know where things are located -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Product Name] Design System</title>
<style>
/* CSS Variables */
/* Base styles */
/* Component styles */
/* Page templates */
/* Responsive */
</style>
</head>
<body>
<!-- Design System Overview -->
<!-- Components Library -->
<script>
// Interactive behaviors
</script>
</body>
</html>