Web Project Brainstorming

Overview

This skill provides a structured, masterclass-level framework for brainstorming web projects, web applications, or individual page designs at their inception. It guides developers and designers through scoping the core product concept, mapping user flows, defining visual styling aesthetics, selecting the technical stack, and planning for search engine optimization (SEO) and performance.

When to Use This Skill

• Use at the start of any new web development project or page redesign.
• Use when scoping feature sets, user roles, and interaction patterns for web applications.
• Use when establishing design systems, color tokens, and layout guidelines.
• Use when evaluating tech stacks (e.g., Next.js vs. Vanilla JS, CSS Grid vs. Tailwind).

How It Works

Execute web project brainstorming sequentially across six structured phases. Ask the user questions one phase at a time to maintain focus and ensure thorough alignment.

Phase 1: Core Concept & Scoping

Define the product's primary value proposition and scope:

• Target Audience: Who is using the website or application?
• Core Value: What problem does it solve for users?
• Key Features: What are the top 3–5 mandatory features?

Phase 2: User Experience (UX) & Information Architecture

Map how users navigate and interact:

• Page Hierarchy: What is the sitemap and page structure?
• User Journeys: What step-by-step flows do users take to complete key goals?
• Responsive Layout: Is the interface mobile-first, desktop-first, or balanced?

Phase 3: Visual Styling & Design System

Establish the visual guidelines and aesthetic parameters:

• Design Aesthetic: Modern, minimalist, brutalist, glassmorphism, or luxury?
• Color Palette: What are the primary, secondary, and accent colors? (Prefer tailorable HSL/RGB models over static color keywords).
• Typography: Which Google Fonts or system fonts fit the theme? (e.g., Inter, Outfit, Syne).
• Interactive States: How do hovers, clicks, transitions, and loading states behave?

Phase 4: Technical Stack & Architecture

Select the technologies and integration systems:

• Frontend Framework: React, Next.js, Vite, Astro, Svelte, or Vanilla HTML/JS?
• Styling Method: Vanilla CSS, Tailwind CSS, or CSS Modules?
• Data & Backend: REST API, GraphQL, tRPC, Firebase, Supabase, or SQLite?
• State Management: Zustand, Context API, Redux, or local React state?

Phase 5: SEO, Accessibility (A11y), and Performance

Plan for discoverability and fast loading times:

• SEO Elements: Title tag structure, meta descriptions, and semantic HTML tag hierarchy.
• Accessibility: ARIA labels, semantic tags, keyboard navigation, and color contrast.
• Performance: Preloading assets, lazy loading images, server-side rendering (SSR), and CDN delivery.

Phase 6: MVP Scope & Project Phases

Break the work down into manageable increments:

• Phase 1 (MVP): The absolute minimum viable product needed to deploy.
• Phase 2 (Enhancements): Nice-to-have features, micro-animations, and advanced integrations.

Examples

Interactive Questionnaire Prompt Template

Use this prompt layout when initiating a brainstorming session with a client or team member:

👋 Let's brainstorm your new web project! We will walk through 6 quick phases.

---
### Phase 1: Core Concept & Scoping
1. What is the main title or working name of this project?
2. Who are the primary target users (e.g., tech-savvy professionals, shoppers, children)?
3. What are the 3 core tasks a user must be able to perform?
---

Brainstorming Output Document Template

Once all phases are complete, generate a markdown blueprint for the project using this template:

# Project Blueprint: [Project Name]

## 1. Product Concept
- **Value Proposition**: [Summary]
- **Key Features**:
  1. [Feature 1]
  2. [Feature 2]

## 2. Information Architecture & UX
- **Pages**: `/index.html`, `/dashboard.html`
- **Primary User Flow**: User signs up -> completes onboarding -> views dashboard.

## 3. Styling & Aesthetics
- **Aesthetic**: Sleek Glassmorphism Dark Mode
- **Color Tokens**:
  - Background: `hsl(222, 47%, 11%)`
  - Accent/Primary: `hsl(217, 91%, 60%)`
- **Typography**: Inter (Body), Outfit (Headings)

## 4. Technical Architecture
- **Framework**: Next.js (App Router)
- **Styling**: Tailwind CSS
- **Database**: PostgreSQL with Prisma ORM

## 5. SEO & Performance

…