Design a prototype

All the content in this site lives in markdown files in the design-kit-repo. You can point your coding agent manually to these files or use the skill below to prototype in code using the design kit components and principles.

Design Kit Prototype skill

The skill design kit prototype has been designed to read this design kit site and output a prototype as a single HTML file.

There are 3 ways to use the design kit prototype. Choose the one that fits how you work.

Use Claude.ai in your browser

This is the quickest way to get started. You do not need a coding environment.

Add the skill

1. Download the skill file
2. Go to Claude.ai and open the left menu
3. Select Customize, then from the top-right menu select Add and Upload skill
4. Upload the file you downloaded and select Save

Use the skill

Type /design-kit-prototype into Claude and press enter.

Edit the skill

You can edit the skill in the Customize section of Claude.ai.

If you make changes that others would benefit from, raise a pull request on GitHub so we can review and merge your contribution.

Use the skill in an IDE with Claude Code or OpenCode

Use this approach if you are already working in VS Code, Cursor, or another IDE with Claude Code or OpenCode set up.

Get the skill

The i.AI prototype skill is available from the i.Ai skills repository

Use the skill

Follow the instructions in the repository you chose to add the skill to your IDE. Then type /design-kit-prototype to trigger the skill.

Use the GOV.UK Prototype Kit

Use this approach if you are working in the GOV.UK Prototype Kit and want to use AI assistance to generate pages.

The GOV.UK Prototype Kit lets you build interactive prototypes that look and feel like GOV.UK pages. You can use it for design work and user research.

Before you start

You need to have the GOV.UK Prototype Kit installed and running. If you have not set it up yet, follow the getting started guide on the Prototype Kit site.

You also need Claude Code or OpenCode set up in your IDE.

Add the skill

1. Download the skill file and unzip it. You'll get a folder called design-kit-prototype containing a SKILL.md file.

2. Open your prototype's root folder in your IDE. This is the folder you created with the Prototype Kit, the one containing package.json, app and node_modules.

3. Open your IDE's terminal. The prompt should show your prototype's name. If it doesn't, use cd to move into your prototype's root folder.

4. Create the skills folder and open it in Finder.

   For Claude Code, run:

   mkdir -p .claude/skills && open .claude/skills

   For OpenCode, run:

   mkdir -p .opencode/skills && open .opencode/skills

   The command will not print anything in the terminal, but a Finder window will open. The folder is hidden because its name starts with a dot, so you won't see it in your IDE's file list or in Finder.

5. Copy the unzipped design-kit-prototype folder into the Finder window(s).

6. Start a new Claude Code or OpenCode conversation in your IDE.

Use the skill

Type /design-kit-prototype to trigger the skill. The skill will generate pages inside your prototype kit project, which you can preview in your browser using the kit's local server.

To run the local server, open a terminal in your project folder and run:

npm run dev

Then go to http://localhost:3000 in your browser to preview your prototype.