AI
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 buttonWhen 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