Ask an AI to design your card

Describe the card, send the prompt to ChatGPT or Claude, paste the answer back here. The prompt already carries our exact rules, so the first reply usually works.
What is the card for?
Boxes it must collect (optional, one per line)
Size
Orientation
Design a back side too
Open in ChatGPT Open in Claude
This prompt is 12,991 characters once it is put in a link, and some browsers cut links off around 6,000. If the chat window opens with the prompt half-missing, use Copy and paste it in instead.
See the prompt
You are writing ONE JSON format bundle for Amatya ID, a free ID-card maker. Reply with the JSON only — no explanation, no markdown fences.

THE CARD I WANT
(describe the card here)

Size: "cr80" — Standard card (CR80, 85.6 x 54 mm)
Orientation: "landscape"
Sides: ["front"]

SHAPE
The top level is {"manifest": {…}, "front_html": "…", "back_html": "…", "css": "…"}.
manifest holds: key, name, version, orientation, size, sides, category, tagline, photo, qr, fields.
manifest.key: lowercase slug, 2-64 characters, e.g. "gym-membership".
manifest.size: "cr80" (85.6 x 54 mm) | "badge_a6" (105 x 148 mm) | "ticket" (139.7 x 50.8 mm).
manifest.orientation: "portrait" | "landscape".
manifest.sides: ["front"] or ["front","back"]. Only include back_html when you list "back".
manifest.category: student | staff | event | contact | visitor | membership | ticket | blank | custom.
manifest.photo (only if the card carries a photo): {"supported":true,"side":"front","shape":"rounded"} — shape is rounded | circle | square.
manifest.qr (only if it carries a QR): {"supported":true,"side":"front","kind":"plain"}.

FIELDS — one entry per box the person fills in:
{"key":"full_name","label":"Full name","type":"text","required":true,"max_len":28,"sample":"Ankit Raj Sinha","group":"School details","help":"…","options":["A","B"]}
key: matches ^[a-z][a-z0-9_]{0,31}$ and is unique.
type: text | textarea | select | radio | multiselect | image | toggle | phone | email | date | url | number.
select, radio and multiselect need at least two "options" (at most 50).
max_len: a whole number between 1 and 2000.
sample: give every field one. Samples are what the preview draws.
group: optional section heading. Required fields are shown first; optional ones fold into their group.
required: keep it to 2-4 fields. Back-side fields stay optional.
An "image" type field is a picture the user uploads (a logo). Place it with {{img.<key>}}.

TOKENS you place inside front_html / back_html:
{{f.<key>}}      that field's value, escaped for you
{{photo}}        the photo slot (an image, or the person's initials when empty)
{{img.<key>}}    an image-type field, e.g. a logo
{{qr}}           the QR slot
{{serial}}       the running card number
{{issued_date}}  today's date
{{watermark}}    the attribution strip — MANDATORY on the front
{{#f.<key>}} … {{/f.<key>}}   render the block only when that field is filled
{{^f.<key>}} … {{/f.<key>}}   render the block only when it is empty

THE WATERMARK IS NOT OPTIONAL. Put {{watermark}} inside the front's root element. It draws a strip 34px high pinned to the bottom edge (class .id-watermark), so leave at least 76px of bottom padding on the front and let nothing sit under it. Never style .id-watermark with display:none, visibility:hidden, opacity below 0.3, or font-size under 14px — the design is rejected.

DESIGN SPACE — this is what people get wrong. Cards are authored in EXACT PRINT PIXELS at 300 DPI, not screen pixels. Your card is 1011 x 638 px. So a name is font-size 50px, a section label 20px, ordinary text 24-26px; 1 print point is about 4.17px.
The card cannot scroll. Give every block that can wrap an integer line-height, a max-height that is a multiple of it, and overflow:hidden — then a long Hindi name clips instead of shoving the layout off the card.
Keep all text at least 36px inside every edge (about 3mm of print safety).
On portrait cards keep the top 90px clear for a lanyard punch.

HTML AND CSS RULES — the save is REJECTED if you break these, so read them:
- Allowed tags: div, span, p, h1-h6, img, ul, ol, li, table, thead, tbody, tr, td, th, b, i, strong, em, u, br, hr, and a plain SVG subset (svg, path, rect, circle, ellipse, line, polyline, polygon, g, defs, linearGradient, radialGradient, stop, text, tspan).
- Banned tags: script, iframe, object, embed, form, input, button, link, meta, base, and <style>. All styling goes in the "css" string or in style attributes.
- No event handler attributes (onclick, onerror, …), no javascript: URLs, no data:text/html.
- No network calls: no @import, no @font-face, no external url(). url(#gradient-id) for an SVG gradient is fine.
- CSS also bans expression(), -moz-binding, behavior:, image-set(), and position:fixed — use position:absolute inside the card.
- Images: use {{photo}} and {{img.<key>}}. A literal <img> is allowed only with an inline data:image/png, data:image/jpeg, data:image/webp or data:image/gif base64 source — an SVG data URI in <img src> is rejected, so draw vector artwork with inline <svg> elements instead.
- Fonts: do not declare any. The card already renders in DM Sans with Noto Sans Devanagari for Hindi.
- Values may be Devanagari: never put letter-spacing on a field value, only on your own English micro-labels.
- Colours: plain hex. Solid fills and gradients are both fine.
- Every {{f.<key>}} you write must match a field you declared, or the save is rejected.
- Sizes: front_html and back_html up to 200 KB each, css up to 100 KB, at most 40 fields.

WORKED EXAMPLE — a valid bundle. Copy its shape and its discipline, not its design:
{
  "manifest": {
    "key": "library-member",
    "name": "Library membership card",
    "version": 1,
    "orientation": "landscape",
    "size": "cr80",
    "sides": [
      "front"
    ],
    "category": "membership",
    "tagline": "Member name, number and validity.",
    "photo": {
      "supported": true,
      "side": "front",
      "shape": "rounded"
    },
    "fields": [
      {
        "key": "library_name",
        "label": "Library name",
        "type": "text",
        "required": true,
        "max_len": 30,
        "sample": "Patna City Library"
      },
      {
        "key": "member_name",
        "label": "Member name",
        "type": "text",
        "required": true,
        "max_len": 28,
        "sample": "Ankit Raj Sinha"
      },
      {
        "key": "member_no",
        "label": "Membership number",
        "type": "text",
        "max_len": 16,
        "sample": "PCL-20460"
      },
      {
        "key": "valid_till",
        "label": "Valid till",
        "type": "date",
        "sample": "2027-03-31",
        "group": "Validity"
      },
      {
        "key": "plan",
        "label": "Plan",
        "type": "select",
        "options": [
          "Standard",
          "Student",
          "Senior"
        ],
        "sample": "Student",
        "group": "Validity"
      }
    ]
  },
  "front_html": "<div class=\"lc\"><div class=\"lc-photo\">{{photo}}</div><div class=\"lc-main\"><div class=\"lc-org\">{{f.library_name}}</div><div class=\"lc-name\">{{f.member_name}}</div>{{#f.member_no}}<div class=\"lc-row\"><span class=\"lc-lab\">Member no</span><span class=\"lc-val\">{{f.member_no}}</span></div>{{/f.member_no}}{{#f.valid_till}}<div class=\"lc-row\"><span class=\"lc-lab\">Valid till</span><span class=\"lc-val\">{{f.valid_till}}</span></div>{{/f.valid_till}}{{#f.plan}}<div class=\"lc-plan\">{{f.plan}}</div>{{/f.plan}}</div>{{watermark}}</div>",
  "css": ".lc{position:relative;height:100%;display:flex;gap:44px;padding:52px 58px 76px 58px;background:#ffffff;}\n.lc-photo{flex:none;width:264px;height:324px;border-radius:18px;overflow:hidden;background:#ececeb;}\n.lc-main{flex:1;min-width:0;}\n.lc-org{font-size:24px;line-height:30px;max-height:30px;overflow:hidden;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#8d8d87;}\n.lc-name{margin-top:14px;font-size:50px;line-height:58px;max-height:116px;overflow:hidden;font-weight:700;overflow-wrap:break-word;}\n.lc-row{margin-top:16px;display:flex;align-items:baseline;gap:10px;}\n.lc-lab{font-size:20px;line-height:26px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#8d8d87;}\n.lc-val{font-size:26px;line-height:32px;font-weight:500;}\n.lc-plan{margin-top:18px;display:inline-block;padding:8px 18px;border-radius:999px;background:#e8eefc;font-size:22px;line-height:28px;font-weight:600;color:#1b2432;}"
}

Now write the JSON for the card I described. Reply with the JSON only.
Paste the answer here
Rather do it by hand? Start from one of our designs and change the fields.