Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
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.

What AI can do

See how AI can support designers, developers, and product managers when SGDS is the source of truth.

For designers

Use AI to:

  • Turn screens into structured handoff notes
  • Generate interaction states (hover, error, loading)
  • Identify missing accessibility considerations
  • Suggest appropriate SGDS components for layouts
  • Create content variations (labels, helper text, errors)

Example

“Review this screen and list missing states using SGDS patterns.”

For developers

Use AI to:

  • Generate SGDS-aligned code
  • Choose the correct component and variant
  • Build forms with validation and accessibility
  • Scaffold pages using SGDS layout patterns
  • Refactor existing code to match SGDS

Example

“Using SGDS form patterns, generate a registration form with validation and error states.”

For product managers

Use AI to:

  • Draft PRDs and user stories
  • Structure user flows and journeys
  • Map requirements to SGDS components
  • Generate acceptance criteria
  • Create clearer briefs for designers and developers

Example

“Create a user flow for onboarding using SGDS components and include edge cases.”

What changes when you use SGDS with AI

Without SGDS

  • AI guesses components and patterns
  • Outputs may look right but are inconsistent

With SGDS

  • AI follows defined components and behaviours
  • Outputs are more consistent and usable
  • Less time spent fixing and aligning

Example output

md
Screen review notes

- Missing hover state for secondary button
- Missing error state for required email field
- Consider using sgds-alert for inline form feedback
- Helper text should be added beneath password input
- Loading state needed for submit button

When to use AI

Use AI when you need to:

  • Generate a first draft quickly
  • Explore options
  • Translate ideas into something structured
  • Reduce repetitive work

Important

AI helps you move faster, but it does not replace judgment.

Always review outputs for:

  • Accessibility
  • Business logic
  • Product requirements

Singapore Government Design System

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