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