본문으로 건너뛰기

Charcoal & Voltage

Workout App UI Design Template

Forge is a strength-training app design with a charcoal-and-voltage look, built for founders and designers shipping a workout tracker.

Workout app today home screen with push day split card and weekly volume chart
Workout app programs screen with training plan cards and progress bars
Workout app active session screen with weight stepper and set logging table

화면 살펴보기

Sleek에서 완전히 편집 가능한 workout 모바일 앱 디자인을 미리 보세요.

Workout app today home screen with push day split card and weekly volume chart
Workout app programs screen with training plan cards and progress bars
Workout app active session screen with weight stepper and set logging table
Rest Timer화면 4
Exercise Detail화면 5
Progress화면 6
Profile화면 7

Workout App 소개

Forge is a workout app UI design template built around a "Charcoal & Voltage" aesthetic: a near-black graphite base, slate panels separated by thin hairlines, bone-white text, and a single electric-lime accent reserved only for active sets, progress fills, and the primary action. The big numbers (reps, weight, the rest timer) are set in a heavy condensed grotesque, tracked tight, so the interface feels athletic and dense, like a dim gym at 6am with one bright bar overhead.

The template ships seven connected screens that form a complete training flow: a Today home with today's split and a weekly volume chart, a Programs list of training plans, an Active workout logger with a plate-weight stepper and set table, a full-screen Rest timer with a depleting lime ring, an Exercise detail with target muscles and execution cues, a Progress dashboard with PR cards and a volume trend, and a Profile with stats and a consistency grid. A signature vertical voltage meter climbs the left edge of the active workout and reappears as a mini meter on workout cards.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.

포함된 화면

01

Today

A 'Ready, Marcus' greeting over a hero card for today's Push Day split with exercise list and a full-width "Start Session" button, plus a weekly volume bar chart and a streak counter.

02

Programs

A stacked list of training plans (Push/Pull/Legs, 5x5 Strength Base, Hypertrophy 4-Day) as slate panels with difficulty tags, schedule, and lime week-progress fills, plus a "Create Custom Program" option.

03

Active Workout

A live session showing the exercise name, a plate-weight stepper with quick-add increments, and a set table with previous lifts, weight, reps, and lime checkmarks to log each set.

04

Rest Timer

A full-screen 01:30 countdown set in a giant tracked-tight numeral with a lime ring depleting around it, an 'Up Next' set preview, and '+15S' and 'Skip' controls.

05

Exercise Detail

A barbell bench press hero image with a primary-exercise tag, target muscle chips, and numbered execution cues so lifters know exactly how to perform the movement.

06

Progress

Personal-record cards for squat, deadlift, bench, and press in oversized lime numerals, plus a 30-day volume trend line chart and a body-weight section.

07

Profile

An athlete header with total workouts, day streak, and total pounds lifted, a 12-week consistency grid, and settings for equipment and notifications.

주요 기능

  • Charcoal & Voltage aesthetic: graphite base, slate panels, one lime accent
  • Condensed grotesque for oversized reps, weight, and timer numerals
  • Signature vertical voltage meter that climbs as sets are logged
  • Plate-weight stepper with quick-add increments and a set table
  • Full-screen rest timer with a depleting lime ring
  • Bottom nav bar with monochrome line icons and a lime active underbar
  • Progress dashboard with PR cards and a volume trend chart
  • Consistency grid and streak tracking on the profile

이런 분께 맞습니다

Founders validating a workout tracker MVP
Product designers needing a strength-app starting point
Indie developers shipping a fitness or gym app
Fitness coaches launching a branded training app

이런 것을 만들 수 있습니다

  • Launch an MVP for a strength-training or workout tracker app
  • Mock up screens for an investor or stakeholder pitch
  • Hand a consistent, athletic dark-mode UI off to developers
  • Explore a redesign of an existing fitness app

이 템플릿 사용 방법

  1. 1

    템플릿 열기

    화면을 둘러보고 전체 디자인을 미리 보며 아이디어에 맞는지 확인해 보세요.

  2. 2

    이 템플릿 사용

    한 번의 클릭으로 Sleek에서 완전히 편집 가능한 사본을 엽니다.

  3. 3

    AI로 편집

    원하는 것을 설명하기만 하면 팔레트 재스타일, 레이아웃 변경, 화면 추가·삭제가 가능합니다.

  4. 4

    내보내고 출시

    디자인을 내보내거나 개발자에게 넘기고, 출시를 향해 계속 만들어가세요.

궁금한 점에 답해 드립니다. 시작하기 전에 알아야 할 모든 것.

How do I design my own workout app from this template?
Click "Use this template" to open Forge in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from seven complete screens instead of a blank canvas, so you reach a working workout app design far faster.
What screens are included in this workout app UI design?
Seven connected screens: Today, Programs, Active Workout, Rest Timer, Exercise Detail, Progress, and Profile. Together they cover the core flow of a real workout tracker, from picking a program to logging sets, resting, and tracking personal records.
Can I customize the workout app UI design?
Yes. Use the template in Sleek and edit any screen by chatting with the AI: swap the lime accent for your own color, change the set table or charts, and add or remove flows. There's no manual redraw; you describe the change and it's applied.
Is this workout app design template free to use?
You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.
Can I export the design to code or Figma?
Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.
Is this template suitable for a strength or weightlifting tracker?
Absolutely. The active workout logger, plate-weight stepper, rest timer, and PR cards map cleanly onto strength training, powerlifting, or hypertrophy programs. Adjust the exercises and program structure to fit your niche.

다른 문의가 있나요? support@sleek.design 주소로 이메일을 보내 주세요.

workout 앱 디자인 시작하기

Sleek에서 사용해 내 것으로 만드세요. 팔레트를 다시 스타일링하고, AI로 어떤 화면이든 편집한 뒤 코드나 Figma로 내보내세요.