← BackAI Product Design · 2025

Reframe

Observe and reframe your thoughts

Product Design · Engineering · 2025

What it is

A focused PWA for moving through a single difficult feeling, emotion check, automatic thought, distortion identification, reframe, and a measurable before/after. CBT structure delivered in under a minute, with AI assistance only where it actually earns its place.

Problem

Cognitive reframing is evidence-based. The tools for it aren't.

Reframe is a focused PWA for one job: take a difficult feeling, identify the cognitive distortion, and rewrite the thought. Five steps, measurable before/after.

The psychology

The CBT thought record, compressed

The thought record is among the most evidenced techniques in cognitive therapy, and its structure is fixed: name the feeling and its intensity, capture the automatic thought, identify the distortion, write a rational counter, then re-rate the intensity. The final re-rating is doing real clinical work rather than reporting, because the measurable drop is what gives the person evidence that examining a thought changed how it felt.

What it changed

I kept all five steps and cut everything around them. No onboarding, no courses, no streaks, because a protocol that takes longer than the difficult feeling is a protocol that is not used. AI is allowed in at exactly one step, drafting the rational counter from the user's own words, and the before and after ratings are kept because removing them would remove the evidence the method depends on.

Start with the feeling

Rate the intensity. Name the emotion. This is a structured protocol from CBT, simplified into five taps.

Identify the distortion

All-or-nothing thinking? Catastrophizing? Mind reading? Select the pattern, then see what a reframe could look like.

Rewrite and measure

Write the reframed thought. Rate the intensity again. The before/after delta is the evidence that the exercise worked.

Flow

Five steps to a reframe

Thought

Filled

Distortions

Stack & Tools

Claude CodeClaude (Sonnet)

design

Figma

code

Vanilla HTML / CSS / JSAlbert Sans

infra

PWA manifest + service worker

MindShapes

Open question

Does rating the intensity of a feeling before naming the thought change which thought gets named?

What the data shows

Which emotions are picked, where the intensity slider lands, and whether the reframe step is completed.

What it does not

The reframe being written is not evidence the belief moved.

More client and product design case studies at hannadevries.com