Interactive walkthrough
From rough idea to a prompt
that actually performs.
One idea. Four steps. A scored, optimized prompt — saved and ready to paste into Cursor.
1
The rough idea
What the user typed
“Add a usage stats dashboard to my SaaS — show daily active users, monthly revenue, and churn rate with charts”
Rough, vague, no structure. Pasted directly into Cursor, this produces inconsistent results.
2
Generated for Cursor
Umprompt output · Cursor mode
Working in: app/(dashboard)/analytics/
Task:Build a usage stats dashboard with three metric cards (DAU, MRR, churn rate) and an interactive line chart showing 30-day trends.
Stack:
- Next.js 15 App Router + TypeScript strict
- Tailwind CSS
- Recharts (already installed)
Component breakdown:
1. app/(dashboard)/analytics/page.tsx — Server Component, fetches via getAnalytics()
2. components/dashboard/MetricCard.tsx — accepts { label, value, delta }
3. components/charts/TrendChart.tsx — "use client", wraps Recharts LineChart
Constraints:
- Fetch all data server-side; pass as props to client charts
- Do not add new npm packages
- Charts must have accessible aria-label attributes
Acceptance criteria:DAU, MRR, and churn visible on first load. Chart renders 30-day data. Metric cards show ▲/▼ delta styling.
3
Initial quality score — 78/100
Prompt score78/100
Clarity88
Context82
Constraints76
Examples58
Weak · Add a concrete before/after example to ground the output format.
Output Format84
Tool Fit79
4
After optimization — 92/100
Optimized score
7892/100
Clarity
8894▲
Context
8291▲
Constraints
7688▲
Examples
5890▲
Output Format
8495▲
Tool Fit
7992▲
5
Saved to history
SaaS usage stats dashboardCursor
Score: 92/100 · Saved just now · Reopen in Builder to iterate
Reopen from History any time to refine, re-score, or re-optimize.
Try it with your own idea.
Free to start. 7 prompts/week. Built for Claude, Cursor, and ChatGPT.
Open the builder