Product Designer

The Product Designer sets the look of your app before anyone builds a page. It chooses the colours, the type, the spacing, the shadows, the motion and the dark mode. Once those are set, every page that follows feels like part of one product, not a patchwork.

Think of the Product Designer as the interior designer who picks the paint, fabric and lighting before any furniture arrives. The room is planned first, so the sofa, the lamp and the rug all match. Changing the look later is also easy. Swap the paint once, and the whole room updates, instead of repainting each wall by hand.

The problem this member removes is the drift that happens when every page is styled by a different person, or by a different guess. One button is blue, another is teal, and the text on dark backgrounds is hard to read. The Product Designer writes the rules down as design tokens (named values such as "primary colour" and "card background"), and every page uses those names. That keeps the look consistent and the text readable.

Think of a newspaper's house style guide. Writers in different cities never meet, yet every story uses the same headline sizes, the same fonts and the same colour for quotes. The Product Designer writes that guide for your app, so the Frontend Engineer, the Tech Lead and every future page all read from one source.

• Choose a colour palette from your brand colour or from the feel you describe, with matching light and dark versions. It gives each colour a clear role, such as main, supporting or background, so it is obvious where each one is used.
• Set the type sizes, spacing, corner rounding, shadows and animation speeds that the whole app uses.
• Change colours, themes and dark mode across the whole app at once, at the token level, rather than page by page.
• Check that text stays readable against its background, in both light and dark mode, and adjust any colour that fails. Contrast is the difference in lightness between the text and its background, and a low score means the words are hard to read.
• Build 3D and immersive scenes, such as a 3D hero section on your landing page, when your project wants one. It uses free 3D assets and respects each licence. Each scene is built to stay smooth on a phone, with a still picture for people who prefer less motion.
• Extend the theme your project already has, instead of replacing it without asking. The existing colour names stay in place, so the pages already built keep working.
• Work in the Files, Review and Browser panels, and look at the result in light and dark mode before it calls the design done.
• Use Figma, Canva and Miro once you connect your own accounts.

The Product Designer has three skills. Each one is a playbook for a kind of design job.

modify-ui makes quick look changes at the token level, such as colours, dark mode, spacing and layout. The change applies across the app, not to one page. Only the parts that need to change are touched. For example: "Make the app feel calmer, with softer colours and more space."

clone-design rebuilds the look of an app from its screenshots, as design tokens and component notes. It uses its own assets, not the original's logos, icons or licensed fonts, and it checks contrast as it goes. For example: "Match the design of the screens we mapped."

clone-brand gives a clone its own name, palette, logo brief and voice. Then it searches the code for anything of the original that was left behind. For example: "Pick a name and colours for my version."

1. You type: "Our brand colour is #0F766E. Build the theme around it."
2. The Product Designer turns that colour into a full palette. It picks a main colour, a text colour that reads well on top of it, and softer shades for backgrounds and borders.
3. It makes a matching dark version and sets the type sizes, spacing, corner rounding and shadows the app will use.
4. It checks that the text stays readable in both light and dark mode. If a pairing fails, it adjusts the colour and tells you what it changed.
5. If your project already has a theme, it extends that theme. Before it replaces the whole theme, it asks you for a yes. It also asks before adding new packages, deleting files or publishing, since those are hard to undo.
6. It saves the design tokens in the project record, so the Frontend Engineer uses the same values and never guesses a colour.
7. It looks at the result in the browser panel, in light and dark mode, before it calls the design finished.
8. You get a short style summary: the palette, the font, the corner style, and where the colours live in the project. Every page built after this one will match it.

What you get at the end is a look you can judge for yourself. Open the app in light and dark mode, check that the text reads clearly on each colour, and look at the 3D hero if you asked for one. The style summary shows what to change if you want a different feel later, and the Product Designer can make that change in one pass.