Design a product

The workflow

Choose the steps that fit your input. Inspect each skill’s source and prerequisites before using it, and review the actual output at every handoff.

1. 01

   Make the design language explicit

   Use a supplied reference to record typography, surfaces, spacing and component decisions in DESIGN.md. Keep observed values separate from choices you make for the new product.

   Extract DESIGN.md
2. 02

   Create one representative screen

   Choose Stitch for a design draft or frontend-design for an implemented interface. Start with the screen that exposes the product’s most important interaction.

   Generate Interface DesignsFrontend Design
3. 03

   Keep the system coherent

   Carry the approved tokens and components into the next screens. Use design-system management when multiple screens or contributors need a shared reference.

   Manage a Design System
4. 04

   Review the actual interface

   Check the implemented screen for accessible controls, keyboard use, responsive layout and the declared web interface guidelines. Record what you inspected and what still needs testing.

   Web Design Guidelines