Guide

Make a custom dash card from an image with AI

You already have a design: last year's flyer, a logo sheet, a sketch on paper, or a card someone built in Word or Canva. You do not need to learn HTML to turn it into a custom dash card. Show the picture to an AI assistant such as Claude, paste in the prompts below, and you get a file you can add to your Card templates.

8 min read·Pro plan feature

Pro plan feature

Custom dash card templates need the Pro plan (or Enterprise), or a club a super admin has switched on. A club can keep up to 5 templates on Pro and Enterprise, and 1 on any other plan. Want to see the built-in cards first? Try the demo.

What you need

  • A picture of the card you want: a photo, scan or screenshot (PNG or JPG).
  • An AI assistant that accepts image attachments, such as Claude.
  • A Car Show Expert club on the Pro plan, with a show to test on.
  • The same artwork as a clean image file, to upload as your show logo (see the rules below).
  • A printer and a sheet of plain paper for one test card.

The rules the card must follow

Car Show Expert shows your template in a locked-down frame and cleans the file when you add it. A card that breaks these rules is rejected, or prints with bits missing. The prompts below already tell the AI all of this, so you do not have to remember it. It helps to know what they mean.

  • One HTML file, saved with the .html ending.
  • All the styling lives in one <style> block inside the file. Linked stylesheets and downloaded fonts do not load.
  • Fixed sizes in millimetres that match the page: Landscape is 297 x 210 mm, Portrait A5 is 148 x 210 mm. You choose the Page setting when you add the template.
  • No scripts, forms, frames or embeds. Anything that tries to run code is removed, and the frame would block it anyway.
  • Pictures come only from https:// links or small data: images. Keep the file under 200 KB, so never embed big photos inside it.
  • Merge tags are typed exactly, with double curly braces, for example {{entrant_name}}. A typo means the tag prints as nothing or as plain text.
  • Your artwork comes from {{logo_url}}, which is the show logo. Upload your flyer or artwork as the show logo and the card picks it up.
  • Text must not overflow. Single lines use overflow hidden and ellipsis, and you test with a long name such as "Bartholomew Featherstonehaugh-Smythe" and a long class name.

The full list of merge tags (including sponsor tags) is in Custom dash card templates. Logo sizes and print settings are in Dash card layouts, logos and print settings.

What a good result looks like

One club's landscape card is a good model. The artwork from their flyer sits top left, and it comes from {{logo_url}}. A very large headline top right comes from {{status_label}}, so cars in a judged class print JUDGED and the rest print PEOPLE'S CHOICE. Below are four lines (Car No, Year, Class and Name) made from {{car_number}}, {{vehicle_year}}, {{class}} and {{entrant_name}}. A big QR code ({{qr_url}}) sits on the right with {{qr_label}} beneath it, and the club's website address is fixed text along the bottom. Every value is on one line with an ellipsis, so a very long name is cut off instead of running into the QR code. Describe the positions of your own design in the same way and the AI does the rest.

Step 1: Ask for the first version

  1. Open a new chat in your AI assistant and attach your image.
  2. Copy the prompt below and paste it into the chat.
  3. Replace the parts in [square brackets]. Choose landscape or portrait, say where the artwork, headline, lines and QR code should go, and type any fixed text such as your website address.
  4. Send it. Copy the HTML the assistant gives you into a plain text file and save it as dash-card.html.
Prompt 1: create the cardClick the text to select it all, then copy
I run a car show club and need a printable dash card (the card an entrant puts on their windshield). I have attached an image of the design I want: [a flyer / a logo sheet / a hand-drawn sketch / a Word or Canva card].

Please recreate the LAYOUT, COLOURS and TEXT STYLE of the attached image as a single HTML file. Match where things sit on the page, the colours (give me the hex codes you chose), the relative size of the headline, and use the closest web-safe fonts.

Page size: [LANDSCAPE 297mm x 210mm / PORTRAIT A5 148mm x 210mm].

What goes where:
- Artwork or logo area: [e.g. top left]
- Headline: [e.g. big text across the top right using {{status_label}}]
- Lines for Car No, Year, Class and Name using {{car_number}}, {{vehicle_year}}, {{class}}, {{entrant_name}}
- QR code: [e.g. large on the right, with {{qr_label}} underneath]
- Any fixed text to copy from the image, such as a website address: [type it here]

THE RULES THE FILE MUST FOLLOW
1. Output ONE complete file of HTML in a single code block. Start with one <style> block, then one card <div>. Do not use <html>, <head> or <body> tags.
2. Put ALL CSS in that one <style> block. No <link> stylesheets, no @import.
3. The card is a fixed size in millimetres. Landscape is 297mm x 210mm. Portrait A5 is 148mm x 210mm. Give the outer card <div> exactly that width and height, with overflow: hidden and box-sizing: border-box. Use mm and pt units, not px or vh/vw.
4. No JavaScript, no <script>, no <form>, no <iframe>, <object>, <embed>, <meta> or <base>, no onclick-style attributes and no links that run code.
5. Images may only come from https:// addresses or from the merge tags below. Do not embed large photos as data: images. The whole file must be under 200 KB.
6. Fonts: use web-safe fonts only (Arial, Helvetica, Georgia, Times New Roman, Verdana, Impact, "Arial Black"). No font downloads.
7. Text must never spill outside its box. For single-line values use white-space: nowrap; overflow: hidden; text-overflow: ellipsis. Test the design mentally with the name "Bartholomew Featherstonehaugh-Smythe" and a long class name.
8. Where the real details go, use these merge tags EXACTLY, with double curly braces and no spaces. The system replaces them when the card prints:
   {{status_label}}  big headline: JUDGED, PEOPLE'S CHOICE or blank
   {{car_number}}    the car number
   {{entrant_name}}  the owner's name
   {{vehicle_year}}  {{vehicle_make}}  {{vehicle_model}}  {{vehicle_variant}}  {{vehicle_color}}
   {{class}}         the class name
   {{qr_url}}        use as <img src="{{qr_url}}" alt="QR code">
   {{qr_label}}      the caption under the QR code
   {{logo_url}}      use as <img src="{{logo_url}}" alt="">  (the show's logo or artwork)
   {{show_name}}  {{show_date}}  {{show_venue}}
   Do not invent other tags. Do not put a real person's name or car number in the file.
9. Use {{logo_url}} for the main artwork. Do NOT try to recreate or embed the picture from my image; leave a clearly sized box for it, with max-width: 100%, max-height: 100% and object-fit: contain.

When you reply, give me the HTML in one code block, then a short list of the colours and fonts you used. Do not add anything else.

Save the file with a plain text editor (Notepad on Windows, TextEdit in plain text mode on a Mac), not Word. Make sure the name ends in .html and not .html.txt.

About the artwork

The AI can recreate layout, colours and text, but it cannot embed your flyer picture without making the file far too big. That is why the prompt tells it to use {{logo_url}}. Upload the flyer or artwork as the logo when you create or edit the show, and every card shows it. Your artwork is also reused on the built-in cards, so keep the picture clean: no white page edges.

Step 2: Refine it

The first version is rarely perfect. Stay in the same chat and paste one of these at a time. Each one repeats the rules so the assistant does not slip. If you start a new chat, paste the rules from Prompt 1 again first.

Bigger QR code, moved to the rightClick the text to select it all, then copy
Same file, same rules. Make the QR code image 56mm x 56mm and put it on the right-hand side of the card, vertically centred, with {{qr_label}} directly under it in bold 12pt. Make sure nothing else overlaps it. Give me the full updated HTML in one code block.
Make every line fit on one lineClick the text to select it all, then copy
Same file, same rules. Every text line (Car No, Year, Class, Name) must stay on ONE line. Use white-space: nowrap; overflow: hidden; text-overflow: ellipsis on each value, and give each value a width that cannot grow past its box. A name like "Bartholomew Featherstonehaugh-Smythe" and a class like "Pre-War Modified Open Wheel Roadsters" must be cut off with ... rather than running out of the card. Give me the full updated HTML in one code block.
Larger headlineClick the text to select it all, then copy
Same file, same rules. Make the {{status_label}} headline bigger, about 20% larger, bold, uppercase, centred in its box, with overflow: hidden so JUDGED and PEOPLE'S CHOICE both fit on one or two lines. Give me the full updated HTML in one code block.
Match the colours of my imageClick the text to select it all, then copy
Same file, same rules. Look at my attached image again and match the colours more closely: background, headline, lines and borders. List the hex codes you picked. Keep the text dark enough to read when printed. Give me the full updated HTML in one code block.
Switch between landscape and portraitClick the text to select it all, then copy
Same file, same rules. Convert this card from [landscape 297mm x 210mm] to [portrait A5 148mm x 210mm]. Re-arrange the layout so it suits the new shape, set the outer card to the new exact size, and keep every merge tag. Give me the full updated HTML in one code block.
Shrink the file under 200 KBClick the text to select it all, then copy
Same file, same rules. The file must be under 200 KB. Remove any data: images and large embedded content, simplify the CSS, and use {{logo_url}} for artwork instead. Tell me roughly how many KB the new file is. Give me the full updated HTML in one code block.
Fix overflow with long namesClick the text to select it all, then copy
Same file, same rules. Check the design against this worst case: Name "Bartholomew Featherstonehaugh-Smythe", Class "Pre-War Modified Open Wheel Roadsters", Car No "1234". Fix anything that would spill outside the card, overlap the QR code or push another line out of place, using overflow: hidden and text-overflow: ellipsis. Give me the full updated HTML in one code block.

You can also ask in your own words, such as "move the name line lower" or "make the border thicker". Finish with "keep all the rules and merge tags".

Step 3: Have the AI check its own work

Before you add the file, paste this into the same chat. It makes the assistant go through the rules one by one and fix anything that fails.

Prompt 3: check the fileClick the text to select it all, then copy
Please act as a careful checker and review the HTML file you just gave me. Do not rewrite it yet. Go through this checklist and answer Pass or Fail for each, with a one-line reason:

1. It is one block: one <style> block followed by one card <div>, no <html>/<head>/<body>.
2. All CSS is inside that <style> block (no <link>, no @import, no external fonts).
3. There is no <script>, <form>, <iframe>, <object>, <embed>, <meta>, <base>, no on... attributes (such as onclick) and no javascript: links.
4. The outer card div is exactly [297mm x 210mm / 148mm x 210mm] with overflow: hidden and box-sizing: border-box.
5. Every image comes from {{logo_url}}, {{qr_url}} or an https:// address, and there are no big data: images.
6. These merge tags are present and spelled exactly with double curly braces: {{status_label}}, {{car_number}}, {{entrant_name}}, {{vehicle_year}}, {{class}}, {{qr_url}}, {{qr_label}}, {{logo_url}}. List any I asked for that are missing, and any tags that are not in this list.
7. Estimated file size is under 200 KB.
8. No line of text can overflow its box: each single-line value uses nowrap, overflow hidden and ellipsis. Test it with the name "Bartholomew Featherstonehaugh-Smythe" and a very long class name.

If anything fails, fix it and give me the full corrected HTML in one code block. If everything passes, say so and do not change the file.

This catches most problems, but it is not a guarantee. Your own preview in the next section is the real test.

Add it, preview it, print one

  1. Open Card templates in the organiser menu.
  2. Type a Template name.
  3. Set Page to Landscape or Portrait A5, to match what you asked for.
  4. Choose your .html file and add it.
  5. Look at the two small previews in the library: one as a People's Choice car, one as a judged car. They use sample details, so you can check the layout without any real entrants. A rejected file shows an error instead.
  6. Open your show, click Edit, choose your template in the Custom dash card template drop-down and save.
  7. Print a single card from the registrations list on plain paper. Check the paper size and margins in the print dialog.
  8. Hold it at arm's length: is the car number readable, and does the QR code scan with a phone?

Editing a template changes every show that uses it, so for big changes add the new version as a separate template and try it on one show first.

Privacy tip

Do not paste real entrants' names, emails, phone numbers or car numbers into the AI. You never need to: the card only holds merge tags such as {{entrant_name}}, and the real details are added when you print. If your sketch has a real person's name on it, blank it out before attaching the image.

If something looks wrong

The card looks cut off, or is too small on the page

The Page setting does not match the design. A landscape design added as Portrait A5 (or the reverse) is clipped. Change the template's Page setting, or ask the AI to convert it (see the refine prompts).

The QR code is missing

The tag is mistyped. It must be exactly {{qr_url}} inside an image tag, and the caption is {{qr_label}}. Ask the AI: "List every merge tag in the file and check each against the allowed list."

My image or artwork is missing

The picture is not from an https:// address, or it comes from a site that blocks other websites from showing it. The card only loads images from https links or small data: images. Upload the artwork as the show logo and use {{logo_url}}.

The file is rejected when I add it

It is over 200 KB or it does not end in .html. A big embedded photo is the usual cause. Use the "Shrink the file under 200 KB" prompt.

A long name or class runs off the edge

Use the "Fix overflow with long names" prompt, then preview again. Check with a worst-case name before show day.

In summary

  • Attach your image to a new AI chat and paste Prompt 1, filled in with your page size and layout
  • Upload your flyer or artwork as the show logo, and let {{logo_url}} place it on the card
  • Refine one change at a time, then paste the check prompt so the AI reviews its own file
  • Save as a .html file under 200 KB, then add it under Card templates with the right Page setting
  • Choose it on Edit Show, check both previews and print one real card on plain paper
  • Keep real entrants' details out of the AI chat: use merge tags only

Ready to print your own dash cards?

Create your club account, add your template to the library, and see your design on a real card.