跳到主要内容

Graphite Precision

CRM Mobile App Design for Figma

Pipeline is a sales CRM app design with a graphite-and-teal command-center look, built for founders and designers shipping a deal-tracking product.

CRM mobile app dashboard screen with pipeline KPIs and forecast bar
CRM mobile app pipeline screen with deals grouped by stage
CRM mobile app deal detail screen with pipeline bar and activity timeline

探索各界面

预览 CRM 移动应用设计,可在 Sleek 中完整编辑。

CRM mobile app dashboard screen with pipeline KPIs and forecast bar
CRM mobile app pipeline screen with deals grouped by stage
CRM mobile app deal detail screen with pipeline bar and activity timeline
Contacts第 4 屏
Activity第 5 屏
Tasks第 6 屏

关于 CRM App

Pipeline is a CRM mobile app design built around a "Graphite Precision" look: warm graphite ink on a paper-white canvas, steel-grey blocks for grouped data, and a single electric-teal accent reserved for primary actions and won deals. There are no drop shadows; surfaces separate through tonal shifts and hairline rules, with deal values set large and tight in tabular numerals so every figure reads like a ledger entry.

The template ships six connected screens that form a complete sales workflow: a Dashboard with pipeline KPIs and a stage-segmented forecast bar, a Pipeline grouped by deal stage, a Deal detail with activity timeline and next-task reminder, an alphabetized Contacts list, a chronological Activity feed, and a Tasks checklist. A signature segmented pipeline bar (Lead, Qualified, Proposal, Negotiation, Won) recurs on every deal card, the deal header, and the dashboard, so progress is legible at a glance.

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 to code, copy it into Figma with no plugin, or hand a prompt to an AI agent to build it for real, all far faster than starting from a blank canvas.

包含的界面

01

Dashboard

A personalized "Morning, Daniel" greeting sits above three KPI blocks (total pipeline, closing this month, win rate) and a stage-segmented forecast bar, with a recent-activity list below. The at-a-glance command center a rep checks between meetings.

02

Pipeline

Deals grouped into collapsible stage sections like Negotiation and Proposal, each card showing company, contact avatar, deal value, and a segmented progress bar. Filter chips across the top switch between all deals, leads, and qualified.

03

Deal detail

A large deal-value hero with expected close date, the full five-stage pipeline bar, an "Advance to Won" action, a next-task reminder, primary contact block, and a call-and-email activity timeline. Everything needed to move a deal forward on one screen.

04

Contacts

An alphabetized, hairline-divided list of contacts with avatars, company, role, and a last-touch date, plus a search bar across 412 records. Keeps relationships and recency front and center.

05

Activity

A chronological feed of tonal cards for logged calls, sent proposals, won deals, and stage changes, split into Today and Yesterday. A live record of every interaction across the pipeline.

06

Tasks

Today's follow-ups as checklist rows with due times, priority tags, and linked deals, grouped into Overdue, Today, and Completed. Keeps a rep on top of every commitment.

核心功能

  • Graphite Precision aesthetic: graphite ink, paper-white canvas, one teal accent
  • Shadowless tonal-stack surfaces separated by hairline rules
  • Signature segmented pipeline bar repeated across deals, detail, and dashboard
  • Tabular numerals for currency and percentage figures
  • Dashboard with pipeline KPIs and a stage forecast bar
  • Stage-grouped, collapsible pipeline with filter chips
  • Deal detail with activity timeline and next-task reminder
  • Bottom navigation with a graphite active-tab pill

适合谁

Founders validating a sales CRM or deal-tracking MVP
Product designers needing a CRM app UI starting point in Figma
Indie developers building a pipeline-management app
SaaS teams prototyping a mobile CRM experience

你可以做什么

  • Launch an MVP for a sales CRM product
  • Mock up screens for an investor or sales-team pitch
  • Hand a consistent CRM UI off to developers
  • Explore a redesign of an existing pipeline app

如何使用此模板

  1. 1

    打开模板

    浏览各界面并预览完整设计,看看是否契合你的想法。

  2. 2

    使用此模板

    一键在 Sleek 中打开你自己的完全可编辑副本。

  3. 3

    用 AI 编辑

    只需描述你想要的效果,就能重设配色、改布局、增删界面。

  4. 4

    导出并上线

    导出设计或交给开发者,继续推进上线。

有问必答。 开始之前你需要了解的一切。

How do I build a CRM app from this template?
Click "Use this template" to open it 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 six complete CRM screens instead of a blank canvas, so you reach a working app design far faster.
What screens are included in this CRM mobile app design?
Six connected screens: Dashboard, Pipeline, Deal detail, Contacts, Activity, and Tasks. Together they cover the core sales workflow, from forecasting and stage tracking to logging interactions and managing follow-ups.
Can I export this CRM app UI design to Figma?
Yes. Sleek copies your design straight into Figma with no plugin required, exports it as code, 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.
Can I customize the CRM app UI design?
Yes. Use the template in Sleek and edit any screen by chatting with the AI: restyle the graphite-and-teal palette, change layouts, adjust the pipeline stages, and add or remove flows. There's no manual redraw; you describe the change and it's applied.
Is this template suitable for a sales pipeline or deal-tracking app?
Absolutely. The dashboard, stage-grouped pipeline, deal detail, and activity timeline map cleanly onto sales CRM, lead management, and account-tracking products. Adjust the stages, fields, and labels to fit your sales process.
Is this CRM 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.

还有其他问题?请发邮件至 support@sleek.design。

开始设计你的 CRM 应用

在 Sleek 中使用并改成你的:重设配色、用 AI 编辑任意界面,再导出为代码或 Figma。