Prototype

This skill explores one idea as several working variants. The user compares them in the running app, picks one and the others are deleted.

Real code, then gone

Each variant is real code with real data in the real app, not a mockup. Build the number asked for. With no number, build five that differ in approach, not only in colour. The page is temporary and goes once a variant is picked.

Every state of an existing component on one page belongs to lab. Copying an outside reference belongs to match.

1. Restate the idea

Write the idea in one line and the axis the variants explore, such as layout, motion or density. Ask one question when the idea has two readings.

2. Build real variants

Use the project's components and real or realistic data. A static image or lorem ipsum is prototype-real-code or prototype-real-data.

3. Put them on one page