コンテンツへスキップ

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

画面を探索

workoutモバイルアプリデザインをプレビュー。Sleekで完全に編集可能です。

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にエクスポートしたりできます。