---
title: "Use XML Tags"
description: "Structure your prompts with XML tags for clarity, accuracy, and flexibility."
canonical: "https://www.prototyper.co/docs/02-prompt-engineering/use-xml-tags"
---

# Use XML Tags

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

<Callout type="info">
Use tags like `<requirements>`, `<example>`, and `<style>` to clearly separate different parts of your prompt.
</Callout>

---

## 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

1. **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...`).
2. **Nest tags**: You should nest tags `<outer><inner></inner></outer>` for hierarchical content.

<Callout type="info">
Combine XML tags with other techniques like providing examples (`<examples>`) or step-by-step reasoning (`<steps>`). This creates structured, high-performance prompts.
</Callout>

---

## Example: Building a dashboard

Without XML tags, Prototyper may misunderstand where your requirements end and examples begin.

**Without XML tags:**

```text
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:**

```text
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

```text
<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

```text
<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

```text
<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 |