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.

Use tags like <requirements>, <example>, and <style> to clearly separate different parts of your prompt.

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.

Combine XML tags with other techniques like providing examples (<examples>) or step-by-step reasoning (<steps>). This creates structured, high-performance prompts.

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

Use XML Tags

On this page