Products / Created October 2026
Checkout Mockup MCP
A proposal-generation skill that shows merchants what their checkout could look like with Checkout Components, preserving their branding and native checkout structure. It produces clean and annotated mockups with clear change and approximation notes.
6 images · Select to enlarge
Contributions
Created a skill that turns a merchant’s checkout screenshots and industry context into branded, step-specific proposals.Personal contribution
How the skill works
- Compares the matching information, shipping or payment step against default references; labels native areas, retained extensions and extensions to remove.
- Measures branding tokens such as colours, radii, borders, typography and spacing, then applies them to HTML templates checked against component examples.
- Uses explicit requested components or selects 3–5 relevant options from a 27-component catalogue, respecting supported targets/layouts and no more than two components per area.
- Keeps native checkout elements in place; carries the logo and header over rather than redrawing them. Ambiguous areas are retained and flagged.
- Runs automated QA, keeps failed output marked FAILED-QA until corrected, and includes a manual 200% clipping review.
- Desktop-first, with mobile support. No fabricated reviews, discounts or thresholds are represented as real merchant facts.
