Pricing Toggle Widget
Monthly and annual pricing toggle with live savings.
What it adds
Build a pricing toggle that switches plan prices between billing cycles and shows the savings.
What your builder is told to do
4
What your builder is told to do
4-
1
Inspect the plans, prices, and billing options in the source files.
-
2
Build a monthly/annual toggle that updates plan cards and shows savings.
-
3
Handle single-plan, missing-price, and highlighted-plan states.
-
4
Connect CTAs to the existing checkout or contact routes.
Edge cases it handles
5
Edge cases it handles
5- Keep the tool focused on one primary job. If the source asks for a suite, build the first usable tool and list the obvious follow-ups.
- Do not invent testimonials, guarantees, legal disclaimers, revenue numbers, scarcity, or unverifiable claims.
- If formulas, scoring weights, or recommendation rules are missing, create editable placeholders and call out the assumptions.
- If payment, email, analytics, CRM, or storage integrations are missing, build clear seams and document the variables or endpoints still needed.
- Match the existing app or page design system unless the user explicitly asks for a standalone visual direction.
Definition of done
5
Definition of done
5- The tool is buildable as a standalone page, lightweight SPA, embeddable widget, or cleanly integrated app screen.
- The primary input, primary output, and primary action are obvious without extra instructions.
- The implementation includes empty, loading, error, and completed states.
- Mobile, tablet, and desktop layouts are accounted for.
- The agent reports the source files used, assumptions made, and any formulas or rules that still need owner review.
Related tool files
FAQ Accordion
FAQ Accordion
Accessible FAQ accordion with search and single or multi open.
What it does
Build an accessible FAQ accordion with keyboard support, optional search, and clean empty states.
How it works
- 1 Inspect the questions, grouping, and any search needs in the source files.
- 2 Build an accordion with keyboard support, ARIA roles, and single or multi-open modes.
- 3 Add optional search or category filtering and a no-results state.
Copy the prompt
No account needed
Build this as a complete, standalone tool. Read the blueprint first and follow it exactly — make it responsive, handle empty and error states, and keep it production-ready:
https://buildthistool.com/x/faq-accordion
Cookie Consent Banner
Cookie Consent Banner
Configurable consent banner with category preferences.
What it does
Build a consent banner with accept, reject, and category preferences plus a persisted choice.
How it works
- 1 Inspect the categories and any consent rules in the source files.
- 2 Build a banner with accept, reject, and manage-preferences controls.
- 3 Persist the choice and expose a callback seam for enabling scripts by category.
Copy the prompt
No account needed
Build this as a complete, standalone tool. Read the blueprint first and follow it exactly — make it responsive, handle empty and error states, and keep it production-ready:
https://buildthistool.com/x/cookie-consent-banner
Image Gallery Lightbox
Image Gallery Lightbox
Responsive gallery with an accessible lightbox viewer.
What it does
Build an image gallery with a keyboard-accessible lightbox, captions, and lazy loading.
How it works
- 1 Inspect the images, captions, and any grouping in the source files.
- 2 Build a responsive grid with lazy loading and an accessible lightbox with keyboard nav.
- 3 Handle missing images, varied aspect ratios, and long captions.
Copy the prompt
No account needed
Build this as a complete, standalone tool. Read the blueprint first and follow it exactly — make it responsive, handle empty and error states, and keep it production-ready:
https://buildthistool.com/x/image-gallery-lightbox
How it works
-
1
Copy the link
Grab the Markdown blueprint URL for this tool type.
-
2
Give it to your builder
Paste it into Claude Code, Cursor, Codex, or whatever AI builder is already working in your app.
-
3
It maps, then builds
Your agent reads the blueprint first, then builds the tool into your app around the rules, audience, and stack.
Works with your stack
These blueprints are written to adapt. They tell the agent to detect your framework, match your existing design system, and use your source files instead of guessing the tool rules.
Need it tighter than that? Customize the tool file and tell it exactly which source docs and stack to use.