aiprompts.page 提示詞庫先展示每條提示詞的生成結果
I built a prompt library where every prompt shows its result first
作者打造 aiprompts.page,提供經測試的提示詞,並在提示詞前展示生成結果。網站及遊戲提示詞另附模型生成頁面的即時示範,複製提示詞免費且無需帳戶。作者亦交代 HTML 示範的 CSP 沙盒隔離、資料庫權限控制及 PromptAI 的點數退款機制。
Every AI trend comes with a prompt. A sherwani portrait, 3D balloon letters, a pet dancing next to a car. The prompt usually travels as a cropped screenshot, tuned for a different model than the one you use. You paste it and get something nothing like the picture.
Prompt libraries have the same problem in a tidier form: hundreds of prompts and no idea what any of them produce until you run them.
So I built aiprompts.page around one rule: show the result before the prompt.
What it does
- 100s of tested prompts for ChatGPT, Gemini, Claude, Midjourney, Veo, Kling and more, each shown with an example of what it produced
- Website and game prompts come with a live demo of the exact page the prompt generated
- Copying is free and needs no account
- PromptAI, an optional built-in chat, runs a prompt with your own photo or PDF and is paid with credits
Here's how the interesting parts work.
1. Live demos of AI-written HTML, without trusting it
A website prompt's "result" is a full HTML page written by a model. I wanted visitors to click around it, not look at a screenshot. That's untrusted code on my own domain.
Each demo is served from /demo/<slug> with its own Content-Security-Policy header:
sandbox allow-scripts allow-pointer-lock allow-popups allow-popups-to-escape-sandbox
frame-ancestors 'self'
default-src 'none'
script-src 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://unpkg.com https://cdnjs.cloudflare.com https://esm.sh
connect-src https://cdn.jsdelivr.net https://unpkg.com https://cdnjs.cloudflare.com https://esm.sh
form-action 'none'
base-uri 'none'
The sandbox directive in the header gives the page an opaque origin even when someone opens /demo/... directly, so its scripts never see the site's cookies or storage. Inline scripts are allowed because the demos need them, but network access is limited to a few CDNs and forms can't post anywhere. The iframe on the prompt page carries a sandbox attribute as well, for older browsers.
2. Static pages that still update right away
Public pages (home, categories and every prompt) are statically generated with Next.js 16 and revalidated every 5 minutes. Every published prompt is prerendered at build time; prompts published later render on first visit and are then cached. Publishing, editing or deleting a prompt invalidates the catalog immediately, so new prompts show up at once without making every page dynamic.
One safety rule: if Supabase is unreachable during a build, the build fails instead of publishing an empty site. On Vercel the previous deployment keeps serving.
3. Letting Postgres enforce the rules
Anyone with an account can publish a prompt instantly, so the rules can't live only in the UI. They live in the database:
- every table has row-level security, and the
anonandauthenticatedroles only get column-level grants, so users can't setstatus,featuredor counters on their own posts - a trigger caps current posts per account and serializes concurrent submissions, so the limit can't be raced with parallel requests
- uploads are checked by magic bytes (PNG, JPEG and WebP only), capped at 4 MB each and 50 MB per account
A SQL test suite starts a throwaway Postgres container, applies every migration and checks these rules on every push.
4. Credits that never feel unfair
PromptAI runs on credits, and the experience I most wanted to avoid was paying for a reply that never arrived. So each request reserves the most it could cost, then settles to what it actually used:
- the unused part returns to your balance as soon as the reply finishes
- a failed reply refunds everything it reserved
- a reply that never completes refunds automatically after 10 minutes
- one generation runs at a time per account
Payments go through Razorpay, and credits are granted only after the payment is verified on the server. Prices are chosen server-side from the visitor's country, in 8 currencies, so the browser never sends a price.
5. Small things that add up
- First-party analytics stores a signed-in ID or a random per-tab ID, never an IP address, and respects Do Not Track
- First-time visitors get a 30-second guided tour of the buttons
-
npm run smokechecks a live deployment's canonical tags, sitemap, robots.txt and security headers, and doubles as a release gate
Stack
Next.js 16 (App Router, React 19, React Compiler) · Supabase (Postgres, Auth, Storage) · Tailwind CSS v4 · TypeScript · Zod · Vitest · Playwright · Razorpay · Vercel
What's next
More trend prompts every week and better search. If you try it, I'd love to know which prompt you'd want to see next.
來源:DEV Community · dev.to