Explainer / Visualization
Beginner remix

Design System Roadmap

remix it

Make it yours. Leave any field blank to keep the original.

Your topicYour audienceAnything to change

Your prompt

Create a single-file HTML interactive roadmap that helps learners understand a topic step by step.

Topic: creating a design system
Audience: designers and front-end developers
Learning goal: Learners will be able to outline the main stages and key concepts of creating a design system and know what to learn next.

Key mechanics:
- A vertical central line with 5–7 main stage boxes in order (for example Basics, Terminology, and so on), highlighted in a bright color.
- Smaller topic boxes branch off each side of every stage, joined by dotted connector lines.
- Clicking a topic box opens a short panel with a plain-language explanation and 1–2 suggested resources.
- Let learners mark topics as done, and show a progress bar.
- A "Related roadmaps" box in a corner linking to adjacent topics.
- Clean, simple styling with a yellow stage color, soft orange topic boxes and blue connectors.

Problem of practice

“New designers and developers often don't know where to start or what order to learn things in when building a design system.”

Learning goal

Learners will be able to outline the main steps and concepts involved in creating a design system, from the basics and terminology through tokens, components, guidelines, development and analytics.

What it does

A visual roadmap that lays out the path to building a design system as a connected flow diagram. Topics such as "What is a Design System?", components, and component libraries branch off a central line, so learners can see what to study and in what order. It covers the basics, terminology, design tokens, creating components, defining guidelines, development and analytics.

Step-by-step flow diagram with a central path and branching topics
Sections for basics, terminology, design tokens, components, guidelines, development and analytics
Topic boxes such as "What is a Design System?" and "Design System vs Component Library"
Related roadmaps listed for further learning (UX Design, Frontend, JavaScript, React)

Mechanical Keyboard Switch

by Annie Brown

Take apart a 3D keyboard switch, watch a key press, then quiz yourself on what each part does.

Quiz / Assessment
Claude
Advanced remix
source shared

Storyboarding Basics

by Alekhya Mallavarapu

A clickable Storyline module that teaches the basics of storyboarding so you can plan content before you build it.

Explainer / Visualization
Articulate Storyline 360
Beginner remix

Bygga

by Hassan El Mghari

Type an IKEA product name and get each assembly step in 3D, read aloud, with the parts, screws and tools needed.

Explainer / Visualization
Advanced remix

← Back to catalog

Open original ↗View source code ↗

← Back to catalog

Explainer / Visualization
Beginner remix

Design System Roadmap

by roadmap.sh

remix it

Make it yours. Leave any field blank to keep the original.

Your topicYour audienceAnything to change

Your prompt

Create a single-file HTML interactive roadmap that helps learners understand a topic step by step.

Topic: creating a design system
Audience: designers and front-end developers
Learning goal: Learners will be able to outline the main stages and key concepts of creating a design system and know what to learn next.

Key mechanics:
- A vertical central line with 5–7 main stage boxes in order (for example Basics, Terminology, and so on), highlighted in a bright color.
- Smaller topic boxes branch off each side of every stage, joined by dotted connector lines.
- Clicking a topic box opens a short panel with a plain-language explanation and 1–2 suggested resources.
- Let learners mark topics as done, and show a progress bar.
- A "Related roadmaps" box in a corner linking to adjacent topics.
- Clean, simple styling with a yellow stage color, soft orange topic boxes and blue connectors.

Problem of practice

“New designers and developers often don't know where to start or what order to learn things in when building a design system.”

Learning goal

Learners will be able to outline the main steps and concepts involved in creating a design system, from the basics and terminology through tokens, components, guidelines, development and analytics.

What it does

Step-by-step flow diagram with a central path and branching topics
Sections for basics, terminology, design tokens, components, guidelines, development and analytics
Topic boxes such as "What is a Design System?" and "Design System vs Component Library"
Related roadmaps listed for further learning (UX Design, Frontend, JavaScript, React)

Mechanical Keyboard Switch

by Annie Brown

Take apart a 3D keyboard switch, watch a key press, then quiz yourself on what each part does.

Quiz / Assessment
Claude
Advanced remix
source shared

Storyboarding Basics

by Alekhya Mallavarapu

A clickable Storyline module that teaches the basics of storyboarding so you can plan content before you build it.

Explainer / Visualization
Articulate Storyline 360
Beginner remix

Bygga

by Hassan El Mghari

Type an IKEA product name and get each assembly step in 3D, read aloud, with the parts, screws and tools needed.

Explainer / Visualization
Advanced remix

Problem of practice

Learning goal

What it does

more like this

Mechanical Keyboard Switch

Storyboarding Basics

Bygga

Problem of practice

Learning goal

What it does

more like this

Mechanical Keyboard Switch

Storyboarding Basics

Bygga