UI Setup

UI Setup

Overview

Part of StyleSeed, this setup wizard turns a raw project into a design-system-guided workspace. It collects the minimum brand and product context needed to configure tokens, pick a visual direction, and generate an initial page without drifting into generic UI.

When to Use

• Use when you are starting a new app with the StyleSeed Toss seed
• Use when you copied the seed into an existing project and need to personalize it
• Use when you want the AI to ask one design decision at a time instead of guessing
• Use when you need a first page scaffold after selecting colors, font, and app type

How It Works

Step 1: Ask One Question at a Time

Do not front-load the full questionnaire. Ask a single question, wait for the answer, store it, then continue.

Step 2: Capture the App Type

Identify the product shape before touching tokens or layout recipes.

Suggested buckets:

• SaaS dashboard
• E-commerce
• Fintech
• Social or content
• Productivity or internal tool
• Other with a short freeform description

Use the answer to choose the page composition pattern and the type of first screen to scaffold.

Step 3: Choose the Brand Color

Offer a few safe defaults plus a custom hex option. Once selected:

• update the light theme brand token
• update the dark theme brand token with a lighter accessible variant
• keep all other colors semantic rather than hardcoding the brand everywhere

If the project uses the StyleSeed Toss seed, the main target is css/theme.css.