Before And After Slider
Show a visual transformation with accessible drag, tap, and keyboard controls.
What it adds
Build a before-and-after slider that works as a standalone page section or embeddable visual widget.
What your builder is told to do
4
What your builder is told to do
4-
1
Inspect available before/after assets, captions, proof notes, and any required disclaimers.
-
2
Build the slider with image loading states, keyboard support, touch support, and labels.
-
3
Add fallback layout for missing or mismatched image dimensions.
-
4
Place CTA or explanatory copy only if it is supported by the source files.
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
Funnel Visualizer
Funnel Visualizer
Visualize conversion drop-off across funnel stages.
What it does
Build a funnel visualizer that shows stage-to-stage conversion and highlights the biggest drop-offs.
How it works
- 1 Inspect the funnel stages and any conversion data in the source files.
- 2 Create editable stage inputs with counts or rates.
- 3 Render a funnel with per-stage conversion, drop-off highlights, and overall rate.
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/funnel-visualizer
Progress Bar Visualizer
Progress Bar Visualizer
Show progress toward a goal with a labeled, accessible bar.
What it does
Build a progress bar widget that renders goal progress with accessible labels and milestone markers.
How it works
- 1 Inspect the goal, current value, and any milestone rules in the source files.
- 2 Create inputs for goal, current value, and optional milestones.
- 3 Render an accessible bar with percentage, remaining amount, and milestone markers.
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/progress-bar-visualizer
Growth Projection Chart
Growth Projection Chart
Project growth over time from a start value and rate.
What it does
Build a growth projection chart that plots compounding growth from editable assumptions.
How it works
- 1 Inspect any baseline metrics or growth assumptions in the source files.
- 2 Create inputs for start value, growth rate, period, and scenario toggles.
- 3 Plot the projection with a clear axis, milestone markers, and editable assumptions.
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/growth-projection-chart
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.