# First Aid Step-by-Step Instruction UI Template

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-31, updated 2026-06-02. 5 min read.
> Source: https://vp0.com/blogs/first-aid-step-by-step-instruction-ui-template

In an emergency, the screen has one job: show the next step in seconds, even with no signal and shaking hands.

**TL;DR.** A first aid instruction app is a calm, fast reference: an emergency list, one large step per screen, a CPR rhythm timer, and a prominent call-emergency-services action. Build it from a free VP0 design with Cursor or Claude Code, make it work fully offline, keep text large and high-contrast, and frame it clearly as guidance that never replaces professional help. Speed and clarity save the day.

Want a free first aid step-by-step instruction UI template to build from? You can do it without paid source code. The short answer: build an emergency list, one large step per screen, a CPR rhythm timer, and a prominent call-emergency-services action from a free VP0 design, and make it work offline. VP0 is the free iOS design library for AI builders: pick a design, copy its link, and have Cursor or Claude Code rebuild it in SwiftUI or React Native. The stakes are real, because immediate bystander action like CPR can improve survival by [2x](https://cpr.heart.org/) to three times, so clarity and speed are the whole product.

## Who this is for

This is for makers building a first aid, safety, or emergency-preparedness app on iOS who want a calm, fast, offline reference, built from a free design and framed honestly as guidance, not a replacement for professional care.

## What a first aid app needs

In an emergency, the interface must remove every obstacle between the user and the next step. The home screen is a short, scannable list of emergencies: CPR, choking, severe bleeding, burns, allergic reaction. Tapping one opens a step-by-step flow with one clear instruction per screen, large text, and a simple illustration, so a frightened person with shaking hands can follow it. For CPR, a rhythm timer or metronome at the right compression rate is invaluable. Above all, a call-emergency-services action must be present and obvious on every relevant screen, because the app's first job is often to get a professional on the way. Because emergencies happen where signal is weak, the content must work fully offline. Apple's [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) on accessibility, especially large [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) and high contrast, are not optional here.

## First aid app building blocks

| Part | Job | Get it right |
|---|---|---|
| Emergency list | Find help fast | Short, scannable, big targets |
| Step view | Guide the action | One step per screen, large text |
| CPR timer | Keep the rhythm | Correct compression rate |
| Call action | Reach professionals | Prominent on every screen |
| Offline | Work anywhere | All content cached on device |

## Build it free with VP0

Pick the list and step designs from VP0, copy the links, and rebuild them with your AI builder. A copy-and-paste prompt:

> Build a first aid guide app from this VP0 design: [paste VP0 link]. Include an emergency list, a step-by-step view with one large instruction per screen, a CPR rhythm timer, and a prominent call-emergency-services button on every relevant screen. Use SwiftUI, make all content work offline, and support large Dynamic Type and high contrast.

For related verticals, see [a free healthcare app UI](/blogs/free-healthcare-app-ui/), [a patient EHR medical chart iPad UI](/blogs/patient-ehr-medical-chart-ipad-ui/), and [a document scanner crop UI](/blogs/document-scanner-crop-ui-like-camscanner/) for capturing forms. For a very different consumer social pattern with its own safety needs, see the [Gas-style anonymous voting UI template](/blogs/gas-app-anonymous-voting-ui-template/).

## Accuracy, offline, and honest scope

A first aid app carries responsibility, so three things matter beyond the UI. Content accuracy comes first: base every instruction on a qualified source such as the [American Red Cross](https://www.redcross.org/) or a recognized resuscitation council, and never invent steps. Offline reliability comes second, because the moment you need first aid is often the moment you have no bars, so cache everything on device. Honest scope comes third: the app is a quick reference that supports action and helps the user reach professionals; it is not a diagnosis, not a substitute for training, and not a replacement for emergency services. Say so plainly, lead with the call action, and the app becomes genuinely useful without overpromising.

## Common mistakes

The first mistake is requiring a network connection for content that is needed when there is none. The second is small, low-contrast text that a panicked user cannot read. The third is burying the emergency call action. The fourth is shipping unverified medical content. The fifth is cramming several steps onto one screen instead of one clear step at a time.

## Key takeaways

- A first aid app is an emergency list, one-step-per-screen guidance, a CPR timer, and a call action.
- Build it free from a VP0 design with Cursor or Claude Code.
- Make it work fully offline and keep text large and high-contrast.
- Source content from a qualified body and never invent steps.
- Lead with calling emergency services; the app is guidance, not a replacement.

## Frequently asked questions

Where can I find a free first aid step-by-step instruction UI template? Start from a free VP0 design, copy the emergency list and step designs, and have Cursor or Claude Code rebuild them in SwiftUI or React Native, with offline access and a clear call-emergency button.

What is the safest way to build a first aid app with Claude Code or Cursor? Design from a free VP0 layout, make it work offline, lead with a call-emergency-services action, source content from a qualified body, keep text large and high-contrast, and frame it as guidance that never replaces professional care.

Can VP0 provide a free SwiftUI or React Native template for a first aid app? Yes. VP0 is a free iOS design library; pick the list and step designs and your AI builder rebuilds the guide, CPR timer, and offline content at no cost.

What common errors happen when vibe coding a first aid app? Requiring a network connection, small low-contrast text, burying the emergency call, unverified content, and too much per screen. Fix them with offline-first, large type, a prominent call action, sourced content, and one step per screen.

## Frequently asked questions

### Where can I find a free first aid step-by-step instruction UI template?

Start from a free VP0 design. VP0 is the free iOS design library for AI builders: copy the emergency list and step-by-step designs and have Cursor or Claude Code rebuild them in SwiftUI or React Native, with offline access and a clear call-emergency button.

### What is the safest way to build a first aid app with Claude Code or Cursor?

Design from a free VP0 layout, make it work offline, lead with a call-emergency-services action, source content from a qualified body like the Red Cross, keep text large and high-contrast, and frame the app as guidance that never replaces professional care.

### Can VP0 provide a free SwiftUI or React Native template for a first aid app?

Yes. VP0 is a free iOS design library; pick the list and step designs and your AI builder rebuilds the emergency guide, CPR timer, and offline content at no cost.

### What common errors happen when vibe coding a first aid app?

Requiring a network connection, small low-contrast text, burying the emergency call, unverified medical content, and too much text per screen. Fix them with offline-first, large readable type, a prominent call action, sourced content, and one step per screen.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*