Free Frontend Eng Prompts for ChatGPT

Act as a senior frontend engineer with 10+ years specializing in frontend engineering for product users. I will give you the brief; you will deliver a ship-ready UI plan.

Brief: [PASTE BRIEF HERE].
Constraints: must be specific, measurable, and grounded in frontend engineering best practice. Avoid generic advice and obvious tips.

Deliver:
1. The full UI plan (the actual artifact, not a description of it).
2. Three sharpening notes - what you would test or improve first.
3. One contrarian angle most frontend engineers miss.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

You are a brutal but constructive frontend engineer reviewing my UI plan. Your job is to make it 2x better, not to be polite.

My UI plan: [PASTE HERE].
Target UX and performance: [STATE TARGET].
Audience: product users.

Return:
- 5 specific weaknesses, each tied to UX and performance.
- A rewritten UI plan that fixes them.
- A diff-style explanation of what changed and why.

Be blunt. Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Generate 10 meaningfully different UI plans from the same brief. Each variant must hit a different angle - not paraphrases.

Brief: [PASTE].
Audience: product users.

For each variant provide:
- Angle name (1-3 words).
- Hook / opening line.
- Full UI plan.
- The single psychological lever it pulls (loss aversion, status, novelty, etc.).

End with your top pick and a one-line reason. Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Pick the single best-known frontend engineering framework for this situation, name it, then walk me through applying it to my brief step by step.

My situation: [PASTE].
Goal: UX and performance.

Output:
1. Framework name + 1-line origin (so I can verify).
2. Each step labelled, with my inputs filled in.
3. The resulting UI plan.
4. Where the framework breaks down - and what to swap in.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Take my existing UI plan and rewrite it cleanly for three distinct audiences. Keep the core promise; change the vocabulary, references, and emotional register.

My UI plan: [PASTE].

Audiences:
A) product users (current).
B) A skeptic who has been burned before.
C) An expert peer who could spot fluff in two seconds.

For each: full rewrite + 2-line note on what shifted. Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Compress the strongest possible UI plan into exactly 50 words. Every word must earn its place.

Brief: [PASTE].
Audience: product users.

Deliver:
- The 50-word UI plan.
- The 3 words you would protect if forced to cut to 30.
- The cheap word you almost used and why you killed it.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Produce a UI plan that is optimized to be found and shared in the frontend engineering space, not just to read well.

Topic: [PASTE].
Audience: product users.
Primary keyword/phrase: [PASTE].

Deliver:
- The UI plan, with the primary phrase used naturally in title, opener, and one mid-point anchor.
- 5 semantic keywords you wove in (and where).
- 3 share-bait one-liners I could pull as social hooks.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Build a comparison matrix that ranks options for my frontend engineering decision honestly.

Options: [LIST 3-6].
My priority: UX and performance.
Constraints: [PASTE].

Deliver:
1. A table - options × criteria - scored 1-5 with a one-line justification per cell.
2. The weighted winner.
3. The "wrong but obvious" pick most frontend engineers would default to, and why it loses.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Embody a precise product users persona and react to my UI plan as they would, out loud.

The persona: [PASTE 3-5 traits - role, fear, current solution, last frustration].
My UI plan: [PASTE].

Deliver:
- 3 internal-monologue paragraphs as the persona reading the UI plan.
- The exact line where they would close the tab - and why.
- 2 edits that would make them keep reading.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Enumerate the edge cases and failure modes that could break my UI plan in production / in market / in front of product users.

My UI plan: [PASTE].
Context: frontend engineering.

Deliver:
- 12 edge cases, ranked by likelihood × damage.
- For each: the trigger, the symptom, and the cheapest mitigation.
- The single edge case I should design around first.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Stress-test my frontend engineering plan and surface what could go wrong, with mitigations.

Plan: [PASTE].
Stakes: UX and performance.

Deliver:
1. 7 risks across execution, market, technical, legal, reputational.
2. For each - probability (L/M/H), impact (L/M/H), and a mitigation that costs less than the worst case.
3. The 1 risk worth accepting and the 1 risk worth killing the plan over.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Convert a great UI plan into a reusable template I can fill in repeatedly.

Reference UI plan: [PASTE].
What stays fixed: the structure and rhythm.
What varies: the inputs.

Deliver:
- The template with clearly marked [VARIABLES].
- A one-line description of each variable and example values.
- 2 worked examples using different inputs.
- The 1 line I should never let a junior change.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Design a 30-day plan to take me from where I am now to shipping a credible UI plan in frontend engineering.

Starting point: [PASTE].
Time available per day: [PASTE].
End state: UX and performance.

Deliver:
- Week 1-4 milestones (1 sentence each).
- Daily 30-minute focus for every day, grouped by week.
- The 3 things I should NOT do during these 30 days.
- The checkpoint that proves I'm on track at day 14.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

I am seeing symptoms in my frontend engineering work. Diagnose the most likely root causes and propose tests to confirm.

Symptoms: [LIST 3-6].
What I have already ruled out: [PASTE].
Tools available: [PASTE].

Deliver:
1. 3 candidate root causes, ranked by likelihood with a 1-line reason.
2. The fastest test to disprove each.
3. The order to run those tests, and stop conditions.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Design the end-to-end workflow a frontend engineer would run to produce a high-quality UI plan repeatedly.

Volume target: [PASTE].
Team size: [PASTE].
Quality bar: UX and performance.

Deliver:
- The workflow as a numbered sequence of steps.
- For each step: input, output, owner, tool, and time-box.
- Where to insert review gates without slowing the pipeline.
- The bottleneck step and how to relieve it.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Design a measurement plan for UX and performance in this frontend engineering context.

Goal: UX and performance.
Audience for the dashboard: [PASTE].
Available data sources: [PASTE].

Deliver:
- The 1 north-star metric - defined precisely.
- 3 input metrics that move it, with formulas.
- 3 guardrail metrics so we don't optimize the wrong thing.
- Dashboard layout sketch (sections, charts, refresh cadence).
- The 1 vanity metric I am tempted to track and should not.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Build an objection-handling script for my UI plan aimed at product users.

My offer / position: [PASTE].
The 3 most common objections I hear: [PASTE].

Deliver:
- For each objection: validate, reframe, evidence, ask.
- 2 objections I am probably not hearing but should expect.
- The single phrase to never say in response, and why.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Design an A/B test for my UI plan with one clear hypothesis.

Current UI plan: [PASTE].
Hypothesis (or what I'm curious about): [PASTE].
Traffic / sample size available: [PASTE].

Deliver:
- The hypothesis sharpened to one sentence.
- Variant A vs Variant B - only one variable changed.
- Primary metric and minimum detectable effect.
- Test duration and stop conditions.
- The decision rule before I peek at results.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Storyboard my UI plan as a 7-beat narrative arc.

Subject: [PASTE].
Audience: product users.
Emotional outcome I want: [PASTE].

Beats: Hook → Stakes → Conflict → Attempt → Setback → Insight → Resolution.

For each beat: 1 sentence of action + 1 sentence of feeling. End with the single image the audience walks away with. Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Build a glossary of the 20 most important terms in frontend engineering as it relates to UI plans and product users.

For each term:
- The term.
- A precise 1-sentence definition (no jargon recursion).
- 1 concrete example.
- The most common misuse I should watch out for.

End with the 1 term that is overused and meaningless. Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Produce a one-page cheat sheet for shipping a UI plan in frontend engineering.

Audience: product users.
Bias toward action, not theory.

Sections:
1. The 5-step quick path.
2. 3 hard rules (never break).
3. 3 soft rules (break with a reason).
4. Top mistake at each step.
5. The single check before publishing / shipping / sending.

Plain text, dense, under 400 words. Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

List the most damaging anti-patterns in frontend engineering when producing a UI plan.

Deliver:
- 8 anti-patterns.
- For each: a named label, a 1-line description, a real-sounding example of the failure, and the corrective principle.
- The anti-pattern that looks like best practice from the outside.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

My UI plan or frontend engineering effort went wrong. Build me a recovery plan.

What happened: [PASTE].
Who noticed: [PASTE].
Reversibility (1=easy, 5=baked-in): [PASTE].

Deliver:
- The first 24 hours: communications and operational steps.
- The next 7 days: trust-rebuild moves.
- The 30-day move that turns this into a credibility gain.
- The 1 thing I must NOT do in the first 24 hours.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Build a 90-day roadmap for serious progress on UX and performance in frontend engineering.

Current state: [PASTE].
End state: [PASTE].
Resources: [PASTE].

Deliver:
- Month 1 / Month 2 / Month 3 themes (1 line each).
- 3-5 outcomes per month - each measurable.
- Dependencies and the order they must clear.
- The single bet I should kill if month 1 underdelivers.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.

Build me a swipe file of exceptional UI plans in frontend engineering to study, not copy.

My focus: UX and performance.
Audience I serve: product users.

Deliver:
- 10 exemplary UI plans (real or plausibly real) with 1-line context for each.
- For each - the one technique to steal and the one tic to avoid.
- 3 patterns that show up across most of them.
- The exemplary UI plan that is overrated and why.

Ask one clarifying question only if a hard blocker remains; otherwise proceed with stated assumptions. Use plain language, no fluff, no filler. Quote evidence when citing sources.