Get startedFoundationsComponentsTemplatesBlocksAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse AI

AI

NEW
IntroductionAgent skillsUse AI with SGDSFigma workflowsDevelopment workflowsPrompt tips
This AI section is still being developed. Please treat the content as contextual guidance only, as information may be largely incomplete and inaccurate at the time of reading.

Development workflows

Use AI coding agents to start new SGDS projects or improve existing codebases with SGDS components, utilities, and skills.

Build with SGDS in code

Use this page when you are building or improving SGDS code with an AI coding tool. Start with a new SGDS project, or use an existing codebase that needs to adopt SGDS components, utilities, and layout guidance.

New projectYou are starting a new product or service and want SGDS to be the design system from the start.Existing projectYou have an existing codebase or implemented interface and want to adopt SGDS components, utilities, and layout guidance.

Before you start

Set up your AI coding tool, SGDS package, and SGDS skills before using these workflows.

1

Set up a coding tool

Choose a compatible AI coding tool, such as Claude Code, Codex, Cursor, or another tool that can read your project and run local commands. Follow the tool documentation for installation and project setup.

2

Install the SGDS package

Run the following command if you have not installed SGDS components:

Bash Copy
npm i @govtechsg/sgds-web-component
3

Add SGDS agent skills

Run the SGDS skills installer in your project root:

Bash Copy
npx skills add govtechsg/sgds-web-component

Select all SGDS skills when prompted. This creates a local .agents/ folder with SGDS guidance for setup, components, utilities, templates, forms, and writing. Compatible AI tools can use this guidance when you ask them to build or review SGDS code.

Example prompt Copy
Read sgds-workflow first, then use the SGDS skills in this repository to create a sidebar dashboard with SGDS web components and SGDS utility classes.

New project

Use this path when you are starting a new product or service and want SGDS to be the design system from the start.

Use Figma workflows instead if you are building from an existing Figma screen or using Figma MCP to move designs into code.

When kicking off a new project, give the agent a clear setup instruction upfront and a few things to keep in mind:

  • Specify your framework. Use React, Vue, Angular, or plain HTML.
  • Say "sole design system". This prevents the agent from mixing in other UI libraries.

The agent will handle installation, setup, and make sure all UI uses SGDS components and utilities from the start.

Example prompt Copy
Set up a new frontend app using [your framework]. Run npm install @govtechsg/sgds-web-component and install the skills with npx skills add govtechsg/sgds-web-component. Use SGDS as the sole design system for the application.
1

Describe what you want to build

Write the prompt in terms of the user flow, page purpose, content, and key interactions. You do not need to know SGDS component names, but you should describe the interface clearly enough for the AI coding tool to choose the right SGDS patterns.

  1. State the product or service context.
  2. Describe the page, flow, or component you need.
  3. Include required content, states, interactions, and responsive behaviour.
  4. Ask for SGDS components, SGDS utilities, and accessible markup.
Example prompt Copy
Create an SGDS login page for a government service. Include email and password fields, a submit button, validation states, and accessible form labels.
Example prompt Copy
Create an SGDS dashboard with sidebar navigation, summary cards, filters, a data table, loading state, and empty state.
Example prompt Copy
Create a multi-step SGDS application form with a stepper, applicant details, supporting documents, review, and submission states.
2

Start from the SGDS workflow skill

Ask the AI coding tool to read sgds-workflow first. It points the tool to the right SGDS skill for each part of the task.

  1. For a new app, begin with sgds-getting-started before writing page code.
  2. For UI elements, check sgds-components before creating custom markup.
  3. For spacing, layout, typography, and colours, use sgds-utilities and sgds: classes.
  4. For full pages or reusable sections, use sgds-templates and sgds-blocks.
Example prompt Copy
Read sgds-workflow first. Then build a sidebar dashboard layout using SGDS components, utilities, and the recommended app layout.
3

Generate the SGDS implementation

Ask the AI coding tool to create the implementation using SGDS setup, components, utilities, and app layout rules.

  1. Add Inter in the HTML <head> before SGDS CSS.
  2. Import themes/day.css, css/sgds.css, and css/utility.css in that order from a CSS file processed by Tailwind.
  3. Import @govtechsg/sgds-web-component once in the app entry point.
  4. Use the SGDS app shell with .sgds-container or .sgds-container-sidebar.
  5. Use <sgds-*> components and sgds: utility classes instead of custom CSS where possible.
Example prompt Copy
Create a new SGDS application for a service request dashboard. Complete the SGDS setup first, then use SGDS web components, SGDS utility classes, and the SGDS application shell. Include a sidebar, summary cards, a filterable table, and an empty state.
4

Review and refine the output

Check that the generated code uses SGDS v3 components correctly, follows project conventions, and works across the intended desktop and mobile views.

  1. Run your test suite to check for regressions.
  2. Do a visual pass in a browser on desktop and mobile.
  3. Compare against any product brief, wireframe, or Figma design for remaining gaps.
Example prompt Copy
Review the generated page against SGDS guidance. Flag any incorrect components, missing states, spacing issues, or accessibility gaps before making changes.

Existing project

Use this path when you already have a codebase, product, or interface that needs to adopt SGDS or improve its SGDS alignment.

Use Figma workflows instead if you are building from an existing Figma screen or using Figma MCP to move designs into code.
Until they are ready, use sgds-components, sgds-utilities, sgds-forms, sgds-blocks, and sgds-templates as references during migration.

Improve or migrate existing UI

Use this workflow when you need to refactor existing pages, replace custom UI with SGDS components, or migrate an interface towards SGDS standards.

  1. Share the relevant page, component, or codebase context with the AI coding tool.
  2. Ask it to check the SGDS setup, including CSS import order, utility CSS processing, and component registration.
  3. Replace custom UI with SGDS components where appropriate, and use sgds: utility classes for styling.
  4. Use sgds-forms for form validation and sgds-data-visualisation if the page includes charts.
  5. Preserve existing routes, data handling, and behaviour unless the migration requires a change.
  6. Build and test the updated page before review.

If you are upgrading an existing app, work incrementally. Change one component or section at a time.

Start with this prompt:

Example prompt Copy
I want to migrate my app to SGDS v3 incrementally.

Then build on it with these strategies:

1

Always plan before you change

Ask the agent to analyse your codebase first and produce a migration plan before touching any code:

Example prompt Copy
Analyse my codebase and generate a migration plan to SGDS v3 before making any changes.
2

Swap components one at a time

Tell the agent to replace existing UI components with their SGDS equivalents, one by one:

Example prompt Copy
Replace the existing button component with <sgds-button>. Do not change anything else.
3

Replace foundational styles

Ask the agent to swap your old design system's typography, spacing, and colour foundations with SGDS v3:

Example prompt Copy
Replace the old foundation styles (typography, spacing, colours) with SGDS v3 equivalents.
4

Suggest utility replacements

Request the agent to recommend the appropriate SGDS semantic CSS utility tokens to replace existing styles:

Example prompt Copy
Look at the components and recommend the appropriate SGDS semantic CSS utility tokens to replace existing styles, including inline styles, CSS classes, or old utility classes.

Putting it all together

Use this prompt when you want the agent to review a page and migrate it safely:

Example prompt Copy
Review this existing form page and migrate it to SGDS. Check the SGDS setup, replace custom inputs, buttons, alerts, and layout styles with SGDS web components and utilities where appropriate, and keep the current validation behaviour unless it conflicts with SGDS guidance.

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2