web-project-brainstorming

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 p