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.
미리보기
화면 살펴보기
Sleek에서 완전히 편집 가능한 QR scanner 모바일 앱 디자인을 미리 보세요.
QR Scanner App 소개
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.
구성 내용
포함된 화면
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.
디자인 & 기능
주요 기능
- 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
오디언스
이런 분께 맞습니다
활용 사례
이런 것을 만들 수 있습니다
- 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
이 템플릿 사용 방법
- 1
템플릿 열기
화면을 둘러보고 전체 디자인을 미리 보며 아이디어에 맞는지 확인해 보세요.
- 2
이 템플릿 사용
한 번의 클릭으로 Sleek에서 완전히 편집 가능한 사본을 엽니다.
- 3
AI로 편집
원하는 것을 설명하기만 하면 팔레트 재스타일, 레이아웃 변경, 화면 추가·삭제가 가능합니다.
- 4
내보내고 출시
디자인을 내보내거나 개발자에게 넘기고, 출시를 향해 계속 만들어가세요.
자주 묻는 질문
QR scanner 앱 디자인 시작하기
Sleek에서 사용해 내 것으로 만드세요. 팔레트를 다시 스타일링하고, AI로 어떤 화면이든 편집한 뒤 코드나 Figma로 내보내세요.
이 템플릿 사용