Research to Design: Building a Website from a Brief
Starting a website from scratch can feel overwhelming. What colors should you use? What sections does your industry expect? What are your competitors doing well? The Research to Design pipeline handles all of that. You answer a few questions about your business, and the AI does the rest — researching your market, generating a design system, creating a logo and mockup, and building out the full homepage. By the end, you have a complete, research-informed website ready to refine in Design Mode.
Think of it as going from "I have a business idea" to "I have a website" in one guided flow.
Prerequisites
Before starting the Research to Design flow, make sure you have:
- An active Flowmo project. The pipeline runs inside the designer, so you need a project open.
- A clear sense of your business. You do not need a polished brand deck, but knowing your audience, your goals, and what makes you different will dramatically improve the output.
- Your logo and any brand assets (optional but recommended). If you upload these before starting, the AI will extract your brand palette and factor it into every design decision.
- Any relevant PDFs (optional). Business plans, brand guidelines, or pitch decks can be attached during the flow. The AI will extract context from them automatically.
How to Start
- Open your project in the Flowmo designer.
- Open the AI Assistant panel from the right sidebar.
- Click the agent picker dropdown at the top of the panel and select Research & Discovery. Alternatively, use the Main Agent and type something like "Research and design a website for my coffee roastery" — the Smart Router will direct you to the Research to Design flow automatically.
- Describe what you want to build. The guided pipeline begins.
The Pipeline: Stage by Stage
The Research to Design flow is a multi-stage pipeline with up to nine phases. A progress tracker at the top of the AI Assistant panel shows your current position — Brief, Research, Design, Structure, and Done — with colored step indicators that fill in as you advance.
Each phase builds on the last, and you approve or adjust before moving forward.
Phase 1: Brief Alignment
What happens: The AI analyzes your initial message and determines whether it has enough information to proceed. If your description is under 100 words or missing critical details, the AI will present a Quick Brief questionnaire card — typically 3 to 7 targeted questions displayed as an interactive form inside the chat.
What the AI needs to know:
- Brand name — the actual name that would appear on a logo
- Industry — what space you operate in
- Audience — who your target users are
- Offer — what product or service you provide
- Differentiator — what makes you different from competitors
- Primary goal — what the website should accomplish (leads, sales, portfolio, etc.)
- Primary CTA — the main action you want visitors to take
- Tone words — up to 5 short descriptors like "Bold", "Minimal", "Premium"
How the questionnaire works: Questions appear as numbered cards inside the chat. Click a question to expand its text input, type your answer, then press Enter or click the chevron to advance to the next question. A progress bar at the top tracks how many you have answered. You can answer in any order by clicking on any question card. When you are ready, click Submit Brief to send your answers.
What you see next: Once the AI has enough detail, it presents a structured Research Intake Brief summarizing your brand name, positioning, audience, offer, differentiator, goals, tone direction, and any assumptions the AI made. You get two action buttons:
- Yes - run research — approves the brief and advances to the research phase
- Change direction — sends you back to revise your inputs
Tip: The more specific your initial description, the fewer rounds of questions you will need. A message that says "I run a specialty coffee roastery in Portland targeting remote workers aged 25-40 who care about sustainability and want a warm, modern aesthetic" will often produce a ready brief on the first pass. A message that says "coffee shop website" will trigger clarifying questions.
If you want to skip questions entirely, explicitly say something like "skip questions", "just go", or "figure it out yourself" — the AI will fill in smart defaults and list its assumptions.
Phase 2: Research & Strategy
What happens: The AI runs a two-part research process. First, it performs a market and competitor scan using grounded web search to find real companies in your space. Then it synthesizes a creative strategy layer on top of that data.
What the research covers:
- Competitors — 5 to 8 real companies with strengths, weaknesses, and notable design patterns
- Audience psychology — motivations, anxieties, objections, trust signals, and decision drivers (5+ items per dimension)
- Positioning — your market category, differentiation strategy, value propositions, and proof ideas
- Engagement strategy — hooks, content angles, social proof plan, micro-interaction ideas, and retention loops
- Conversion plan — CTAs by funnel stage (top, middle, bottom) and friction reducers
- SEO content — topic clusters, FAQ themes, and internal linking strategy
- Structure plan — 6 to 12 recommended homepage sections, each with a purpose, key elements, and primary CTA
- Site map — 2 to 6 additional pages beyond the homepage with suggested sections
- Design direction — a style label (e.g., "Tech Sleek", "Warm Organic"), mood keywords, and rationale
- Narrative insights — 3 to 5 strategic insight paragraphs
What you see: A Research Dossier Ready summary showing how many competitors were analyzed, the homepage section count, site map size, and the suggested design direction. Below the summary, an expandable indexed research document lets you browse every section. Two action buttons appear:
- Approve research — accepts the dossier and moves to brand direction
- Preview a mockup — generates a visual mockup before continuing (optional)
Phase 3: Brand Direction & References
What happens: The AI translates the research findings into a Brand Direction Workspace — an editable card pre-filled with suggestions for tone, color palette, typography, and visual references. Everything is seeded from the research: if the research identified a "Premium Minimalist" design direction, you will see muted palette suggestions and clean sans-serif typography candidates.
What you can do:
- Review and adjust the suggested tone keywords
- Upload your logo, reference images, or brand guideline PDFs
- Select or change typography candidates
- Modify the color palette direction
When you are satisfied, confirm your brand direction. If you want to skip this step and let the AI decide, you can do that too.
Note: Logo generation is deliberately deferred to a later phase. The AI explains this in the interface: "Logo generation happens after the design system so colors and style context inform the prompt."
Phase 4: Design System
What happens: The AI generates a complete design system in two sub-steps. First, it builds the technical foundation — spacing scale, border radii, shadows, transitions, and typography sizing using mathematical progressions based on a 4px grid. Then it layers on the creative identity — the 18 semantic colors and font pairings that give your brand its visual personality.
What the design system includes:
- 18 semantic colors — background, surface, surfaceAlt, text, textSecondary, textMuted, textInverse, primary, primaryHover, primarySubtle, secondary, secondaryHover, accent, accentSubtle, border, borderSubtle, success, warning, error
- Typography — heading font, body font, and mono font (all valid Google Fonts), plus a full responsive type scale from H1 (using
clamp()for fluid sizing) down to caption, with line heights, letter spacing, and font weight definitions - Spacing scale — xs through xxl plus section padding, following a consistent mathematical progression
- Border radius — from none to full (pill), with semantic tiers (sm, md, lg, xl)
- Shadows — four elevation levels (sm, md, lg, xl)
- Transitions — fast (150ms), normal (300ms), slow (500ms) with easing
- Component sizing — button heights, padding, input heights, icon sizes, container max widths, and card padding at small/medium/large scales
What you see: A Design System Proposal card showing the heading and body fonts, the number of semantic colors, and a visual preview of the entire token system. Three action buttons appear:
- Approve design system — applies the tokens and continues
- Edit colors / fonts — lets you request specific changes (e.g., "make the primary color darker" or "use Playfair Display for headings")
- Open logo studio — jumps to logo creation if you want to create a logo before applying
Take your time reviewing this stage. The design system affects every section, component, and interaction downstream. All values become CSS custom properties (:root variables) that cascade through the entire project.
Phase 5: Logo Creation
What happens: The AI opens a Logo Creation Wizard inside the chat. It uses the design system colors, research-driven style direction, and brand brief to generate a logo aligned with your visual identity. The wizard considers whether your background is dark or light (using perceptual luminance calculations) to ensure the logo works on your actual site.
You can iterate on the logo, provide feedback, or skip this phase if you already have one uploaded.
Phase 6: Design Mockup
What happens: The AI generates a high-fidelity visual mockup using image generation. This gives you a preview of what the final page will look like before any code is written. The mockup incorporates your logo, design system colors, font choices, and the style direction from research.
What you can do:
- Approve the mockup and move forward
- Provide feedback to regenerate with adjustments
- Skip the mockup entirely
If you provided feedback during the research phase ("Preview a mockup" button), this step may already be complete.
Phase 7: Apply Design System
What happens: The AI writes the approved design system tokens to the canvas as CSS custom properties. This is where your :root variables, utility classes, and global design tokens become live on the project. The system uses ClassManager.setRootVariable to inject every token into the engine.
This phase runs automatically once the design system is approved.
Phase 8: Homepage Design
What happens: The AI builds the full homepage — the actual sections, layouts, content blocks, and text — using the approved design system and research insights. It maps the strategic sections identified during research (Hero, Features, Social Proof, Pricing, etc.) into real page elements on the canvas using ds-* design system classes for visual consistency.
The structure uses calculateFullTree to create properly nested parent-child relationships in the canvas engine. For repeated elements like feature cards or testimonial items, the AI uses shared element-type classes so that editing one updates all matching elements.
Phase 9: Media & Motion (Parallel)
What happens: Three skills run in parallel to enrich the homepage:
- Image generation — creates AI-generated images for all placeholder slots on the homepage
- Interactions & animations — adds scroll animations, hover effects, and micro-interactions
- Video generation — creates motion assets if the page needs video content
These phases run simultaneously because they are independent of each other, which speeds up the overall pipeline.
Approval Gates: You Are Always in Control
At every major transition, the pipeline pauses and asks for your approval. The AI presents action buttons directly in the chat — you never have to guess what to do next. At each gate:
- You can approve to move forward
- You can request changes with specific feedback
- You can go back to revise earlier inputs
- You can skip optional phases (like mockup generation)
- You can regenerate any phase without losing work from earlier phases
The system recognizes natural-language approval (phrases like "yes", "looks good", "go ahead", "proceed") as well as revision cues ("change", "different", "fix", "actually").
Tips
- Be specific in your initial message. The brief is the single biggest lever you have on output quality. Vague inputs produce generic results. Detailed inputs produce targeted, distinctive outputs.
- Upload your logo before you start. The AI will extract your brand palette from it automatically, which cascades through the design system and every visual decision.
- Attach PDFs if you have them. Business plans, pitch decks, and brand guidelines give the AI significantly more context to work with during research and design system generation.
- Review the design system carefully. A small change here — adjusting your primary color, switching the heading font, tweaking the spacing scale — ripples through every section, component, and interaction downstream.
- Use the "Edit colors / fonts" button liberally. You can request changes conversationally (e.g., "make it darker and more premium" or "switch to a serif heading font") and the AI will regenerate the design system with your feedback.
- You can regenerate any phase without losing previous work. If the mockup does not feel right but the research was solid, just regenerate the mockup — the research and design system carry forward.
- Use this flow for brand-new projects. If you already have a clear design direction and just want to build, the Design Agent might be a faster fit. Research to Design is specifically for when you want the AI to help you figure out what to build, not just how to build it.
Common Issues
"The design doesn't match my brand."
Make sure you uploaded your logo and any brand reference images before starting, or add them during the Brand Direction phase. Also check that you specified your color preferences and visual tone in the brief. The AI can only work with what you give it.
"The research seems generic."
This usually means the brief was too broad. Go back to the brief phase and add more specific details about your niche, your direct competitors, and what makes your business unique. The more pointed your inputs, the more targeted the research.
"The brief keeps asking me questions."
On the first run with no previous brief, the AI will always ask clarifying questions unless you explicitly opt out with phrases like "skip questions", "just go", or "do your best". Short descriptions (under 100 words) will always trigger a question round. Provide more detail upfront or use the opt-out phrases if you want the AI to fill in smart defaults.
"I want to skip straight to design."
You can. If you already have a clear design direction and do not need the research phase, select the Design Agent from the agent picker dropdown instead of Research & Discovery. The Research to Design pipeline is specifically for when you want the AI to help you figure out what to build.
"The design system fonts don't look right."
All fonts must be valid Google Fonts. If you requested a font that is not available on Google Fonts, the AI may have substituted a similar one. Use the "Edit colors / fonts" button to request a specific alternative.
Related Articles
- Using the AI Smart Router
- Vibe Mode Overview
- AI Design System Generation
- Design System: CSS Variables & Global Classes