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.

Prompt tips

This guide helps you write clearer prompts for AI coding agents using the SGDS agent skills. Use these tips when starting a new project, working from Figma, or migrating an existing app to SGDS v3.

Prompting with SGDS agent skills

SGDS agent skills help an AI agent understand the design system. They tell the agent which components, utilities, layouts, and setup steps to use.

Agent skills do not replace your product context. The agent still needs to know the user task, business rules, hidden states, and what good output looks like. Treat prompting as a short conversation, not a one-prompt handoff.

What the agent can extract vs what you provide

SGDS agent skills give the agent reliable system knowledge, and tools like Figma MCP or codebase access can add live context. You still need to describe the intent and rules that only your team knows.

The agent can extractYou need to describeWhich SGDS skill applies to the task.What you want to build or change.SGDS component props, slots, and events.How the component should behave.SGDS utility classes and design tokens.Any custom spacing or layout intent.Figma layers, hierarchy, and visible spacing.States not shown in the frame.Visible text, fields, and table columns.Validation and business rules.Existing routes, imports, and components.Which files are in scope.Nearby tests and code patterns.What must not change.SGDS page and block templates.Who the page is for.Whether the UI is a form, list, dashboard, or shell.The main user workflow.

A useful prompt has five parts

You do not need to write a long prompt. You need to give enough context for the agent to make the right SGDS decisions.

  • Goal: What you want to build, change, or review.
  • Context: Who the page is for and where it fits in the service.
  • Inputs: The files, Figma frame, screenshot, or route the agent should use.
  • Rules: What the agent must follow, avoid, or preserve.
  • Output: Whether you want a plan, code changes, review notes, or a prompt.

Tips for text prompts

These tips work when you are starting from an idea, an existing codebase, or a written requirement.

  • Start with the user task: Say what the user needs to do before naming components.
  • Ask for a plan first: For large changes, ask the agent to explain the approach before editing files.
  • Name the framework and files: Tell the agent whether you use Vue, React, Angular, plain HTML, or a specific folder.
  • Set SGDS boundaries: Tell the agent to use SGDS components, skills, and utilities only.
  • Describe hidden states: Include errors, empty states, loading states, permissions, and edge cases.
  • Review in small steps: Ask the agent to finish one component, section, or page before moving on.
Example prompt Copy
I need to build a case management dashboard for agency officers. Use SGDS skills and inspect the existing docs app patterns before editing. First, propose a page structure and list the SGDS components you will use.
Example prompt Copy
Build a form page for users to submit a grant application. Use SGDS components and sgds: utility classes only. Include required fields, validation messages, an empty attachment state, and a final review step.
Example prompt Copy
Migrate this page to SGDS v3 one section at a time. Keep the current behaviour and routes unchanged. Replace custom UI with SGDS components where possible, and tell me when there is no direct SGDS match.

Tips for designers using Figma

Figma gives the agent visual structure. You still need to explain the behaviour and intent behind the design.

  • Use the SGDS Figma library: Keep SGDS component instances attached so the agent can map them more reliably.
  • Select the exact frame: Ask the agent to work from one selected screen or section at a time.
  • Name layers clearly: Use names that describe the purpose, such as filters, results table, or empty state.
  • Show important states: Include hover, disabled, error, empty, loading, and success states when they matter.
  • Describe behaviour outside Figma: Explain focus order, validation, data rules, and what happens after each action.
  • Ask the agent to flag gaps: Tell it to identify anything that does not map cleanly to SGDS before coding.
  • Name the Figma skill: When the task depends on Figma MCP, tell the agent which Figma skill to use, such as figma-use for writing to the canvas or figma-implement-design for generating code from a frame. Figma skills for MCP
Example prompt Copy
Use the selected Figma frame as the source. Implement it with SGDS components and sgds: utility classes. Preserve the visible layout, then flag any behaviour, state, or responsive rule that is not shown in Figma.
Example prompt Copy
Review this Figma screen before generating code. Identify the likely SGDS components, missing states, unclear behaviours, and areas that may not map directly to SGDS.

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