Question generator

TL;DR I vibe coded a question generator to bring people together.

Check out the Question Generator

Problem

For years, I've used a personal, curated list of questions to successfully bypass small talk and foster genuine connections in diverse settings—from professional design sprints to casual meetups with friends.

The "need" isn't just for any question; it's for a context-appropriate one. A prompt that's perfect for a creative workshop is different from one used to get to know a new friend. The average person lacks a simple, categorized, and readily available resource to provide that perfect spark, turning potential awkwardness into an opportunity for authentic connection.

What animal would give the best massage?

〰️

What is your favorite conspiracy theory?

〰️

What's a skill you'd love to master?

〰️

What animal would give the best massage? 〰️ What is your favorite conspiracy theory? 〰️ What's a skill you'd love to master? 〰️

Process

Step 1: Create repository of questions

View fullsize

Created document as a repository of questions

View fullsize

Organised into categories

Step 2: Craft prompt for LLM to consume

Using Gemini Canvas to vibe code a working prototype

See the full prompt: Expand the sections below to read the full prompt that I used.

• Actor

  Act as a senior front-end developer and UI designer. You are an expert at creating beautiful, modern, and fully responsive single-page web applications using only HTML, Tailwind CSS, and vanilla JavaScript. You have a strong eye for clean typography, spacing, and creating a great user experience.

• Background

  I need a prototype for a "Conversation Starter Generator." It's a simple, single-page web app. The entire app should be centered vertically and horizontally on the page and contained within a single, elegant card component.

  The app has three main parts:

  1. Question Display: A large text area where the conversation starter question is shown. This should be the main focus of the card.

  2. Category Selector: A <select> dropdown menu that allows the user to filter questions by a specific category.

  3. Generate Button: A full-width button that, when clicked, generates a new random question.

  The core logic will be powered by the Questions Repository. This repository will use category names as keys (e.g., "Hypotheticals & Fantasies," "Self-Reflection & The Inner World") and arrays of question strings as values.

  The app must:

  • On load, populate the <select> dropdown with all the category names from the questions object. It must also add an "All Categories" option as the first choice.

  • On load, immediately display a random question from "All Categories."

  • When the "New question" button is clicked, display a new random question based on the currently selected category.

  • When the category dropdown is changed, immediately display a new random question from that newly selected category.

  • Crucially, the app must remember the last question shown and ensure the new random question is not the same as the previous one (unless there is only one question in the category).

• Objective

  Generate an interactive website that provides the user with a new question when they click a button.

  Create a single, self-contained index.html file that fully implements this "Conversation Starter Generator" prototype.

• Style

  • Font: Use the "Space Grotesk" font from Google Fonts.

  • Layout: Prioritise mobile-design. The app body should have a light gray background. The main card should be centered, with rounded corners, and a shadow.

  • Dark Mode: The app must look great in both light and dark modes.

  • Question Display: Make the question text large and bold, and ensure the card has a min-height on its container to prevent the layout from jumping as questions of different lengths are loaded.

  • Controls: The button and select list should be full-width, have rounded corners, and a clean, modern feel. The button should be a "call to action" color like lilac purple.

  • Accessibility: Add a custom focus ring (custom-focus-ring) to the button and select list for better visibility.

  • Footer: Include a simple, small-text footer below the card that says “To bring humans together, one question at a time. Elizabeth Rubel 2025”

• Stipulations

  • Do not use any external .js or .css files (other than the required CDNs).

  • Do not use any frameworks like React, Vue, or Angular. This must be vanilla JavaScript.

  • The questions JavaScript object must be large, with at least 5-6 categories and 10+ questions per category to properly test the functionality.

  • The code must be clean, well-commented, and runnable.

Step 3: Iteration on interaction patterns & styling

A first version of a vibe coded prototype that displays thought-provoking questions

Get started with some questions

--->

Get started with some questions --->

Next steps

• Get feedback from friends and family

• Expand collection of questions

• Enable users to generate related questions