If you are an LLM or an AI agent

This page is Design Comparison, a tool where a person compares design alternatives from an AI agent. If someone shared this link with you, they want you to show them your designs through it. Follow these instructions as if they had sent them to you:

Compare design alternatives with me now through Design Comparison: write the alternatives as JSON and open it in my browser, or send me the JSON if you cannot. I will compare them there and paste my feedback back to you.

Write everything I will read (title, description, labels) in the language we have been using in this conversation. Keep the JSON keys in English.

1. Write the designs

{
  "title": "Pricing card",
  "description": "Same plan and copy in both. Which one makes the price easier to act on?",
  "kind": "component",
  "designs": [
    {
      "label": "Compact",
      "description": "Price and action on one line.",
      "format": "html",
      "code": "<div style=\"padding:18px\">...</div>"
    },
    {
      "label": "Spacious",
      "description": "Large price, full-width action.",
      "format": "react",
      "code": "export default function Card() { return <div style={{ padding: 24 }}>...</div>; }"
    }
  ]
}

• designs: 2 by default. Use 3 or 4 only if I asked for more alternatives or the decision needs them. The maximum is 4.
• All designs must answer the same brief under the same conditions: same content, same copy, same states. I should be judging design, not differences in content.
• title: what is being compared. description (optional): the brief or what to look at.
• kind: component (default) for a piece smaller than a page: it is centered on a background I can switch between dark, light and checkered. Use page for whole pages: they fill the frame, 1440 px wide by default, and I can scroll them.
• label: 1 to 4 words. description: what makes this design different.
• format: html (default) takes a fragment or a complete document in code. react takes the source of a module in code, JSX and TypeScript allowed, with export default of a component that needs no props.
• In react, react and react-dom load as React 19. Import any other package from https://esm.sh/<package>?external=react,react-dom. Do not import local files.
• head (optional): extra tags for the document head, such as font links or a Tailwind CDN script. Put the same head in every design that needs it.
• viewport (optional): initial width in pixels, from 200 to 3000.
• Each design runs in an isolated frame: scripts work, but it cannot read cookies or localStorage and it cannot reach my page. Use inline styles or <style>, public https URLs or data URIs for images and fonts.

2. Open it in my browser

If you can run commands on my computer, write the JSON to a new file in the system's temp directory and run one of these commands with that file's path. It checks the JSON, deletes the file and opens the comparison in my browser:

node -e "const fs=require('fs'),z=require('zlib'),{spawn}=require('child_process'),p=process.argv[1],j=JSON.stringify(JSON.parse(fs.readFileSync(p,'utf8').replace(/^/,''))),u='https://rod.run/utils/design-comparison#content:'+z.deflateRawSync(j,{level:9}).toString('base64url');fs.rmSync(p);if(u.length>12000){console.log('TOO_LONG');process.exit(2)}const w=process.platform==='win32';spawn(w?'rundll32':process.platform==='darwin'?'open':'xdg-open',w?['url.dll,FileProtocolHandler',u]:[u],{stdio:'ignore',detached:true}).on('error',e=>{console.error(e.message);process.exitCode=1}).on('spawn',()=>console.log('OPENED')).unref()" "FILE"

python3 -c "import sys,os,json,zlib,base64,webbrowser;p=sys.argv[1];j=json.dumps(json.load(open(p,encoding='utf-8-sig')),ensure_ascii=False,separators=(',',':'));os.remove(p);c=zlib.compressobj(9,zlib.DEFLATED,-15);u='https://rod.run/utils/design-comparison#content:'+base64.urlsafe_b64encode(c.compress(j.encode())+c.flush()).decode().rstrip('=');sys.exit('TOO_LONG') if len(u)>12000 else print('OPENED' if webbrowser.open(u) else 'FAILED')" "FILE"

If it prints OPENED, tell me the comparison is open in my browser and wait for my feedback. If it fails because the JSON is invalid, fix the JSON and run it again. Never write, copy or retype the link yourself: it is too long to reproduce without errors.

3. Otherwise, send me the JSON

If you cannot run commands on my computer (you are a chat assistant, or you run on a remote machine), if the command prints TOO_LONG (the designs are too large for a link) or keeps failing, or if I tell you the comparison did not open: send me the whole JSON in a single json code block and tell me to paste it at https://rod.run/utils/design-comparison. Then wait for my feedback.

4. Read my feedback

I will paste text like this:

Design feedback: Pricing card
1. Compact: Too cramped on mobile.
2. Spacious: Liked. Keep the button color.

Each line is a design number and label, Liked. if I liked it, and my note. I can like more than one design. A design with no line means I had no opinion on it. Treat notes as instructions for the next iteration.