Agree the look
before the first screen.

Plenty of teams do, and it works until the file gets political. A reference page inside the product file becomes something nobody wants to reorganize, sitting next to real components and half-built screens, and it quietly stops being updated. A separate canvas can be messy, argued over, and discarded, which is what a direction artifact should be. There are practical differences too: sharing a Storyflow board does not require a Figma seat, so founders, engineers, and clients can comment without one, and the AI will lay the board out from a description rather than leaving you to build the structure by hand. Keep components in Figma; keep the argument somewhere it can be lost.

Seven things. Interface references from products that achieve the feeling you want, annotated with what you are actually pointing at. Color directions, each grouped with its dark mode counterpart. Type set at real interface sizes with real labels and numerals. Iconography and illustration style. Motion and interaction references, captured from real apps. Density and spacing character, shown as a dense example beside a generous one. And the competitive set at full size, because that is the comparison your users will make whether or not you make it. The last two are the ones teams skip, and they are the ones that decide whether the product has a personality.

Not during early access. Storyflow is paid-only right now, with plans starting at $9.99 a month, and a Free plan for solo use launches before the end of 2026. Anyone a paid member invites to a board joins free today, so a founder, an engineer, or a client can review and comment without paying. If you need free this minute, Figma's free tier gives you a genuinely good canvas and you probably already have it, and Pinterest is free and still excellent for broad visual references. Neither will generate a structured board from a product description, but both are honest free options and there is no reason to pretend otherwise.

A design system is the answer; a moodboard is the argument that produced it. Systems document components, tokens, spacing, and rules, and they are excellent at consistency and terrible at character, because nothing in a system says what the product should feel like. That is why teams with mature systems still ship interfaces that feel like nothing in particular. The moodboard comes first and decides register, density, warmth, and motion character, and then the system encodes those decisions as tokens and components. Keeping the board around after the system exists is useful too: when someone asks why the spacing is so generous, the answer is on the canvas rather than in someone's memory.

You should, and doing it later is one of the most reliable ways to end up with two products. Group each color direction with its dark counterpart so the decision is made once, for both themes, at the moment character is being set. Dark mode is not a filter over a light theme: contrast relationships invert, elevation stops being about shadow, and colors that read as calm on white can read as murky on charcoal. Pin dark-mode references from real products beside your candidate palettes and the problems show up immediately, which is a much better time to find them than during implementation.

You describe the product in a prompt: the category, the audience, the platforms, the emotional register, and anything already fixed such as an existing brand palette. The AI lays out a structured board from that, with sections for interface references, color and dark mode, type, iconography, motion, density, and competitors, plus cards to fill. You start from a board with a shape rather than an empty canvas. From there it uses the whole board as context, so you can ask it to add an empty-states section or a second colder direction, and re-prompting builds around your existing screenshots without moving anything you have already arranged.

Yes, and that is often the real reason to keep this off the design file. Send a view-only link and anyone opens the full board in a browser with no account and no seat, and they can sign in to comment directly on the reference they are responding to. Getting an engineer's reaction to density, or a founder's reaction to the competitive row, before the screens exist is worth far more than getting it in the first design review. If someone should genuinely contribute rather than react, invite them to the canvas and they join free as a collaborator.

Yes, and web work benefits from a couple of extra sections. Add layout and grid references, because web has far more compositional freedom than a mobile app and that freedom is where sites go wrong. Add imagery and photography direction, which usually carries more of a marketing site's character than the interface elements do. And add a section for how the site should feel at the top of the page versus deep in it, since scroll pacing is a real design decision that almost never gets discussed. Keep the board on the same canvas as the sitemap or page plan so structure and look develop together.

Export it, keep the link, and use it as the reference the work gets checked against. The common failure is that the moodboard is treated as a kickoff ritual and never opened again, at which point the direction quietly drifts screen by screen until the product looks like whoever designed the most screens. Teams that keep the board live pin their current screens beside the original references during design reviews, which makes drift visible in seconds rather than in a retrospective. The board is also the fastest way to onboard a new designer, because it explains the character of the product in a way no component library ever will.