Checkout and Form Page UI Spec
Specify a high-converting, accessible checkout layout.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
Specify a checkout layout that is accessible and clear. Business and products: [BUSINESS_AND_PRODUCTS]. Payment and shipping options: [PAYMENT_AND_SHIPPING]. Platform and design system: [PLATFORM_AND_DESIGN_SYSTEM]. Known abandonment points: [ABANDONMENT_DATA]. Write the spec and make sure it satisfies this checklist: [ ] Guest checkout is available; account creation is optional and offered after purchase [ ] A clear order summary is visible throughout, including items, quantities, shipping, taxes, discounts, and the final total [ ] No surprise costs; shipping and taxes are estimated early [ ] Fields are limited to what is needed; address lookup and autofill are supported [ ] Every field has a visible label, correct input type, and autocomplete attribute [ ] Errors are specific, linked to the field, and announced; entered data is preserved [ ] Payment methods are shown with recognizable names; card fields use the provider's secure components [ ] Security and return information are near the payment step, stated truthfully [ ] Progress is shown for multi-step flows; back navigation keeps data [ ] Keyboard focus order is logical; touch targets are large; contrast is sufficient [ ] Loading states and double-click protection on the pay button [ ] Confirmation page and email with order details and next steps Provide the layout per screen size, states for each component, microcopy for errors and buttons, analytics events, and a test plan including keyboard-only and screen reader runs. Don't recommend manipulative urgency.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.