About prompts
A prompt is how you communicate with an AI in plain language. Each message you send and the AI's response is a turn. The size of each turn is measured in tokens, the small units of text an AI reads and generates.
When an AI is connected to Carbon MCP, writing clear and specific prompts reduces the number of turns and tokens needed, and improves the quality of the code the AI generates. This practice is called prompt engineering.
Use the carbon-builder skill
Install the carbon-builder skill and tell your AI to use it. The skill carries Carbon's conventions for tools, tokens, components, accessibility, and imports. Without it, your AI guesses at Carbon from training data, which is often out of date.
Clearly describe what you want
Give your AI enough detail to work from without ambiguity. A well-formed prompt includes:
- UI goal and purpose.
- Framework: Carbon React v11 or Carbon Web Components v11.
- Libraries needed: Core, IBM Products, icons, pictograms.
- Full component list: Grid, Header, Button, Tile, Form, and so on.
- Layout: columns, spacing, alignment, breakpoints.
- Sample data.
- Exact file list to output.
The more detail you provide, the better the output. For example, "Build a dashboard" is too vague for an AI to act on. Specify the components, layout, data, and files you want.
Build a UI
Mandatory: Use the carbon-builder skill and Carbon MCP to help complete the following task:
Build a small, runnable Carbon React v11 page with a UI Shell header, a three-tile grid, and a contact form.
Ask me any clarifying questions before you begin.
Be token-efficient: don't restate tool results, and output only package.json,
index.html, src/main.jsx, src/App.jsx, and src/styles.scss.
Apply usage and accessibility guidance
Mandatory: Use the carbon-builder skill and Carbon MCP to help complete the following task:
Check my [component or screen] against Carbon's usage and accessibility guidance.
Ask me any clarifying questions before you begin.
Be token-efficient: don't restate tool results. Give me a short, prioritized list of changes rather than a full rewrite.
Build a chart
Mandatory: Use the carbon-builder skill and Carbon MCP to help complete the following task:
Build a runnable Carbon Charts [bar] chart in [React] using my sample data.
Ask me any clarifying questions before you begin.
Be token-efficient: don't restate tool results, and output only the files needed to run it.
Use a Carbon Labs component
Mandatory: Use the carbon-builder skill and Carbon MCP to help complete the following task:
Add the Carbon Labs [Resizer] component to my Carbon React app.
Ask me any clarifying questions before you begin.
Be token-efficient: don't restate tool results, and output only the files you
change. Note that Carbon Labs components are experimental.
Audit existing code
Mandatory: Use the carbon-builder skill and Carbon MCP to help complete the following task:
Audit the project code against Carbon guidelines for tokens, components,
accessibility, and layout.
Ask me any clarifying questions before you begin.
Be token-efficient: don't restate tool results. Return issues grouped by severity with the fix for each, not a full rewrite.