Result Card Layout Checklist for AI Designers
Your prompt might be brilliant, but if the PNG looks sloppy nobody will share it. Use this checklist every time you tweak a lab template inside AI Viral Test Lab.
Canvas
- 1080x1350 pixels (4:5 ratio) for TikTok and Instagram.
- Safe zone = 60px padding on all sides so stickers do not cover text.
- Export PNG @1x plus optional 2x for Retina downloads.
Typography
- Headline uses Impact/Anton at 52-64px, uppercase, letter spacing -0.5px.
- Score numerals use a monospace fallback so digits do not jitter.
- Supporting sentences use Inter 24px with 1.4 line height.
Color
- Each lab has its gradient defined in `styles.css` under `data-theme` blocks.
- Ensure contrast ratio of 4.5:1 for body text by testing in Chrome DevTools.
- Add subtle grain or glow to keep the neon look consistent across labs.
Metadata
- Include a "@lab-handle" field generated from usage.js so users remember their prompt.
- Display heat value or run count pulled from heat.js.
- Keep the QR code 120x120 px, aligned bottom-right with 24px padding.
Workflow
- Design in Figma with Auto Layout to mirror DOM structure.
- Export components and update CSS custom properties.
- Test in `/public/
/index.html` via local preview. - Screenshot using the in-app capture to ensure fonts render correctly.
Further reading