Prototyping ONS Prototype Kit
To build high-fidelity prototypes using the latest styles and components from our design system, you can use the ONS Prototype Kit on GitHub (opens in a new tab) .
Installing the prototype kit
Before you start, you will need to download and install:
You will also need a terminal application and code editor, such as Visual Studio Code (opens in a new tab)
For full installation instructions, follow the prototype kit setup guide on GitHub (opens in a new tab)
Creating a new prototype
When you use the template to create a GitHub repository for your prototypes, it will contain a
readme.md file in the root directory, with guidance on how to start creating a new prototype and run it locally on your device.
Publishing your prototype online
You will need to publish your prototype online if you want to:
- share it with colleagues or stakeholders
- test it with users on their own devices
The prototype kit outputs a folder of static files and assets that need to be deployed to the host server.
To publish your prototype online, you will need a web hosting service that can deploy a static website, such as:
You can also use Heroku (opens in a new tab) , but this is a paid service.
When setting up your hosting service you will need to create a static site project, which you can choose to connect directly to your prototype repository on GitHub.
Give your project a name, and check the following settings:
- build command:
- publish root directory:
If you need any help installing the prototype kit, or creating or publishing your prototype, email the design system team at email@example.com (opens in a new tab)
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)