Use the Real Design System
Pull the real tokens; don't let the model invent values.
Left to guess, the agent eyeballs colors and spacing off a screenshot and hardcodes them. Instead, have it pull the design's actual variables — colors, spacing, typography — and map your code to those tokens. The output then stays in sync with the system instead of drifting a few pixels every time someone rebuilds a screen.
Where you'll practice this
One Promptles scenario teaches this principle directly.
Use the Real Tokens
A Figma frame for a pricing card is selected in Dev Mode. A teammate asked Claude Code to "build this" and got a component full of hardcoded hex colors and pixel values that drift from the design system.
Other principles in Context
Declare the Tools You Need
Name the tool or MCP server by name, and say what to do if it isn't reachable.
Describe Before You Prescribe
Describe the Data Shape
Claude can't clean data it can't picture.
Explain the Integration Point
Keep Memory Reusable
Save patterns and preferences that survive across sessions; never save snapshots of finished work.
Map to Real Components
Use Code Connect so it reuses your components, not new markup.