Use XML tags
Structure longer prompts with XML tags, so the Prototyper agent keeps your requirements, style rules and examples apart and follows each one.
XML tags help Prototyper parse your prompts more accurately, leading to higher-quality outputs.
When your prompts involve multiple components like context, instructions, and examples, XML tags can be a game-changer. They provide clear structure that prevents Prototyper from mixing up instructions with examples or context.
Why use XML tags?
- Clarity: Clearly separate different parts of your prompt and ensure your prompt is well structured.
- Accuracy: Reduce errors caused by Prototyper misinterpreting parts of your prompt.
- Flexibility: Easily find, add, remove, or modify parts of your prompt without rewriting everything.
Tagging best practices
- Be consistent: Use the same tag names throughout your prompts, and refer to those tag names when talking about the content (e.g.,
Using the design in <reference> tags...). - Nest tags: You should nest tags
<outer><inner></inner></outer>for hierarchical content.
Example: building a dashboard
Without XML tags, Prototyper may misunderstand where your requirements end and examples begin.
Without XML tags:
Build a dashboard for tracking sales metrics. Include revenue, orders, and
customer count. Here's what the competitor dashboard looks like: [description].
Use a clean, modern design with cards for each metric and a chart below.With XML tags:
Build a dashboard for tracking sales metrics.
<requirements>
- Display three key metrics: Total Revenue, Order Count, Active Customers
- Each metric should be in its own card with an icon
- Include a line chart showing revenue trends over the last 30 days
- Add a table below showing recent orders
</requirements>
<style>
Clean, modern design with subtle shadows. Use a blue accent color for
interactive elements. Cards should have rounded corners and generous padding.
</style>
<reference>
Similar to Stripe's dashboard: metric cards at top, charts in the middle,
recent activity table at the bottom.
</reference>The structured version clearly separates what you want to build, how it should look, and what to reference.
Common tag patterns
Here are useful XML tag patterns for different scenarios:
For UI components
<component>
<layout>Sidebar on left, main content on right</layout>
<elements>Logo, navigation links, user avatar</elements>
<behavior>Collapsible on mobile</behavior>
</component>For styling
<style>
<colors>Primary: #3B82F6, Secondary: #6B7280</colors>
<typography>Inter font, 16px base size</typography>
<spacing>8px grid system, 24px section padding</spacing>
</style>For complex forms
<form>
<fields>
- Email (required, validation)
- Password (required, min 8 chars)
- Remember me (checkbox, optional)
</fields>
<actions>Submit button, "Forgot password" link</actions>
<validation>Inline error messages below each field</validation>
</form>When to use XML tags
| Scenario | Use XML tags? |
|---|---|
| Simple single-component request | Optional |
| Multi-section layout | Recommended |
| Complex requirements with styling | Highly recommended |
| Including reference examples | Essential |
| Iterating on existing design | Helpful for specifying what to keep vs. change |