Prompts · Vibe coding

Turn a screenshot into a component

Model notes: Needs a vision-capable model

Fill in the variables (optional — they're inserted live below):

Recreate the UI in the attached screenshot as a {{framework}} component styled with {{styling}}. - Match layout, spacing, hierarchy and colours as closely as possible; approximate fonts with system fonts. - Use semantic HTML and accessible labels. - Make it responsive: describe what changes below 640px. - Use placeholder data in a typed props object, not hard-coded strings. - Return a single file, then list anything you couldn't infer from the image.

How to use it

  1. Fill the variables above, or replace each {{variable}} after pasting.
  2. Paste into your AI tool (ChatGPT, Claude, Gemini, Cursor, Claude Code, or a local model in Ollama/LM Studio).
  3. Review the output. Models make mistakes, especially with facts, numbers and code.
Pro Prompt Pack · US$12

Get all 209 prompts + agent workflows

Every prompt as Markdown and JSON, 10 multi-step agent workflows, and 12 ready-made slash commands for Cursor and Claude Code. Instant zip download, one-time purchase.

Buy the Pro Pack for US$12 What's inside

More Vibe coding prompts

Vibe coding

Spec-first app kickoff

Any frontier model; works in Cursor, Claude Code, Windsurf

Variables: ideausersstack

You are a senior engineer starting a new project with me. Before writing any code, produce a short build spec.

Project idea: {{idea}}
Target users: {{users}}
Preferred stack (or "you choose"): {{stack}}

Write:
1. One-paragraph product summary.
2. MVP feature list (max 7), each with a one-line acceptance test.
3. Explicit out-of-scope list.
4. Data model (entities + key fields).
5. File/folder structure.
6. Step-by-step build plan in small commits, each independently runnable.
7. Open questions you need me to answer.

Do not write code yet. Wait for my "go".
Open & fill variables →
Vibe coding

One small step at a time

Reduces runaway edits in agent mode

Variables: step_numberstep_description

Implement only step {{step_number}} of the plan we agreed: "{{step_description}}".

Rules:
- Touch the fewest files possible. List the files you will change before changing them.
- Don't refactor, rename or reformat anything unrelated.
- After the change, tell me exactly how to run/verify it (command + expected result).
- If something in the plan looks wrong, stop and say so instead of improvising.
Open & fill variables →
Vibe coding

Add a feature without breaking things

Best with full-repo context (Cursor @codebase, Claude Code)

Variables: feature

I want to add: {{feature}}.

First, explore the codebase and tell me:
1. Where this naturally belongs and which existing patterns/utilities to reuse.
2. Every file you expect to modify or create.
3. Risks: what existing behaviour could break, and how we'll check it.

Then wait for approval. After approval, implement it with tests that follow the project's existing test style.
Open & fill variables →

New prompts every week

One short email with the best new prompts and agent workflows we've tested. Free; unsubscribe any time.