Utilities & Tools · Precision Graphite
QR Code Scanner App Design Template
Scanline is a QR and barcode scanner app design with a lab-grade graphite look, built for founders and designers shipping a fast, precise scanning tool.
Önizle
Ekranları keşfedin
Sleek'te tamamen düzenlenebilen QR scanner mobil uygulama tasarımını önizleyin.
QR Scanner App hakkında
Scanline is a QR code scanner app design template built on a "Precision Graphite" aesthetic: a near-black base, charcoal surface tiers separated by thin hairline rules, off-white text, and a single electric-lime accent reserved for the live scan reticle and primary buttons. The decoded URLs, codes, and timestamps render in a tabular monospace, so every value reads as measured and machine-precise, with the instrument-panel calm of a confident scanning device.
The template ships six connected screens that form a complete scanning flow: a full-bleed Scan viewport with the lime corner-bracket reticle and a QR / Barcode / Document / Wi-Fi mode strip, a slide-up Result sheet with a verified-domain line and Open, Copy, Share actions, a Wi-Fi result card with one-tap connect, a History list grouped by Today and Yesterday with bracket-framed thumbnails, a Create tab for generating QR codes with live preview, and a Settings screen for scan feedback, data retention, and sync. The corner-bracket motif recurs as the framing device around scanned thumbnails, tying the whole system together.
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.
İçindekiler
Dahil olan ekranlar
Scan
A full-bleed camera viewport with the lime corner-bracket reticle locking onto a QR code, a torch toggle and gallery-import button floating at the bottom, and a QR / Barcode / Document / Wi-Fi mode strip above the tab bar.
Result
A slide-up sheet showing the detected type chip, the decoded URL in monospace, a verified-secure domain line, and stacked Open in Browser, Copy, and Share actions. The fast path from scan to action.
Wi-Fi result
A parsed network card showing the SSID, security type, frequency, and signal strength, topped by a lime Connect to Network button and a share-credentials link.
Create
A QR generator with Link, Text, Wi-Fi, and Contact tabs, a URL field, a live-rendered code preview, and accent-color plus add-logo options, ending in a Generate & Export action.
History
A reverse-chronological list grouped by Today and Yesterday, each row a bracket-framed thumbnail, type chip, decoded snippet, and timestamp. Quick recall of past scans.
Settings
Tonal list rows grouped into Scanning Engine, Data Management, and Terminal: scan sound, haptic pulse, auto-torch, history retention, iCloud sync, and a reset option. Controls feedback and data behavior.
Tasarım ve özellikler
Öne çıkan özellikler
- Precision Graphite palette: near-black base with one electric-lime accent
- Tabular monospace for decoded URLs, codes, and timestamps
- Lock-On corner-bracket reticle as the signature scan motif
- Hairline-ruled tonal surface stack with square-shouldered radii
- Four-mode scan strip: QR, Barcode, Document, Wi-Fi
- Slide-up result sheet with verified-domain safety line
- Built-in QR generator with live preview and logo option
- Slim bottom nav with lime-filled active tab
Hedef kitle
Kimler için
Kullanım alanları
Neler oluşturabilirsiniz
- Launch an MVP for a QR and barcode scanner app
- Mock up screens for an investor or stakeholder pitch
- Hand a complete, consistent scanner UI off to developers
- Explore a redesign of an existing utility scanning app
Bu şablon nasıl kullanılır
- 1
Şablonu aç
Ekranlara göz atın ve fikrinize uyup uymadığını görmek için tüm tasarımı önizleyin.
- 2
Bu şablonu kullan
Tek tıkla Sleek'te tamamen düzenlenebilir kendi kopyanızı açın.
- 3
Yapay zekâ ile düzenle
Ne istediğinizi anlatarak paleti yeniden tasarlayın, düzenleri değiştirin, ekran ekleyin veya kaldırın.
- 4
Dışa aktar ve yayınla
Tasarımınızı dışa aktarın ya da geliştiricilere teslim edin, lansmana kadar geliştirmeye devam edin.
Sıkça sorulan sorular
İlgili mobil uygulama şablonları
QR scanner uygulamanızı tasarlamaya başlayın
Sleek'te kullanın ve kendinize göre uyarlayın: paleti yeniden tasarlayın, herhangi bir ekranı yapay zekâ ile düzenleyin, ardından koda veya Figma'ya dışa aktarın.
Bu şablonu kullan