Introducing SGDS agent skills

Before AI, teams had to learn the design system themselves. They read the guidelines, checked the components, learned the code, and applied the writing rules. Although that learning curve is worth it as it helps teams build services that feel consistent, accessible, and trusted, it also takes time and effort.

SGDS agent skills change where some of that effort goes.

We have encoded SGDS design, code, and writing guidance into skills that compatible AI tools can read. Now, the assistant can remember the SGDS basics with you: design guidelines, component APIs, layouts, accessibility rules, and writing standards.

Each skill teaches AI a part of SGDS. Together, they work like a practical playbook. The assistant can check the right skill before it drafts, reviews, or fixes an interface.

Some of the skills we have include:

• Workflow: Know where to start.
• Getting started: Set up a new SGDS app the right way.
• Components: Pick the right building blocks.
• Utilities: Keep spacing, colours, and layout consistent.
• Theming: Apply brand colours and day or night mode.
• Forms: Build forms that behave properly.
• Patterns: Structure headings, lists, and page text.
• Layouts: Arrange content clearly on the page.
• Blocks: Build reusable sections like cards, filters, and calls to action.
• Templates: Start from common page types like dashboards, forms, and settings.
• Data visualisation: Turn data into SGDS-aligned charts.
• Writing: Write clear, direct, government-friendly content.

With skills, AI starts with SGDS in mind.

It can scaffold interfaces that are closer to government standards, accessibility expectations, and SGDS patterns from the start.

We tested the skills by asking Claude Code to build a small SGDS site from a prompt.

Claude Code used the skills to set up the foundations, application shell, navigation, pages, forms, and production build. It completed the first round of implementation in 10 minutes and 9 seconds.

The result still needed human review. We used the review to refine the pages, check that the layouts were appropriate, and make sure the site worked across mobile screen sizes.

From start to finish, the basic generation took 38 minutes and 54 seconds. This included planning, execution, and refinement into a basic, compliant site.

There is still more work to do before a site like this is production-ready. The useful shift is that the basics are handled earlier: system colours, readable layouts, accessible foundations, and SGDS patterns.