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

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.

Prompt tips

This guide helps you craft effective prompts for AI coding agents using the SGDS agent skills. Use these tips to get the best results, whether you are starting a new project or migrating an existing app to SGDS V3.

Write better prompts, get better code

The way you phrase your instructions to an AI assistant makes a big difference. These tips help you get accurate, SGDS-aligned output whether you are starting a new project or migrating an existing app.

Choose your workflow

Use the workflow that matches your starting point.

Starting a new application

Migrating an existing app to SGDS v3

When kicking off a new project, give the agent a clear setup instruction upfront:

Example prompt

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.

A few things to keep in mind:

Specify your framework — React, Vue, Angular, or plain HTML. The agent will scaffold accordingly.
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.

If you're upgrading an existing app, the key is to go incrementally — one component or section at a time — rather than trying to change everything at once.

Start with this prompt:

Example prompt

I want to migrate my app to SGDS V3 incrementally.

Then build on it with these strategies:

Always plan before you change

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

Example prompt

Analyse my codebase and generate a migration plan to SGDS V3 before making any changes.

Swap components one at a time

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

Example prompt

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

Replace foundational styles

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

Example prompt

Replace the old foundation styles (typography, spacing, colours) with SGDS V3 equivalents.

Suggest utility replacements

Request the agent to recommend the appropriate SGDS semantic CSS utility tokens to replace existing styles (inline styles, CSS classes, or old utility classes):

Example prompt

Look at the components and recommend the appropriate SGDS semantic CSS utility tokens to replace existing styles (inline styles, CSS classes, or old utility classes).

Putting it all together

Here's an example prompt that combines everything for a full migration:

Example prompt

Plan an incremental migration to SGDS V3. For each page, suggest 1-to-1 swaps for components, replace old foundation styles with SGDS V3, and recommend SGDS utility tokens for any custom or legacy styles.

Singapore Government Design System

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