SFProto
SFProto.comPrototyping for Salesforce Teams
Salesforce prototyping toolFree to start · No Apex / Zero Sandboxes Required

From User Story to Interactive SLDS Prototype in Minutes

SFProto turns a Jira story into a clickable Lightning prototype that business analysts, consultants and architects can share, refine in the meeting, and export as the spec.

Try sample:
Sign upSee examplesBrowse templates

Free to start: one AI-built page, no card needed. Already have an account? Sign in, or read the guides.

Built on SLDS 2.264Process Flows & Portal Design IncludedShareable Links & EmbedsZero Salesforce Sandboxes Needed

An interactive Opportunity record page drawn with the Lightning Design System: highlights panel, Sales Path, record details and related lists. Use the link below to open it in its own tab and click through it.

Open the demo in a new tab

Watch three narrated walk-throughs.

Open the examples
Lightning prototypes

Clickable Salesforce prototypes from a user story

Clickable Salesforce Lightning mock-ups drawn with the Lightning Design System: record pages, home pages and app pages built by the AI from a user story or a wireframe, or assembled by hand, that look and behave as they would in the org.

Record pages, home pages and screen flows

  • Highlights panel, Sales Path with Guidance for Success, record details, related lists, activity timeline and Chatter
  • Screen flows, modals, toasts, dynamic actions and custom components you can click through
  • Build from a wireframe, a Figma export or a screenshot; SLDS 1 and SLDS 2 looks
  • Export a Jira story, Gherkin acceptance criteria, a data dictionary, Lightning page metadata, LWC scaffolding and the JSON spec
  • Model Context Protocol (MCP) server: build, read and export from Claude Desktop, Cursor or Windsurf
  • Share links and Confluence, Jira or Notion embeds, with a “Prototype — not Salesforce” banner
Sign upWhat a Salesforce prototyping tool does

Three ways to start

  1. Describe it

    Say what the page is for in plain English. The AI asks about anything you left open, then builds it.

  2. Paste the story

    Paste the Jira ticket or the "As a… I want… so that…" story. The fields, picklists and stages it names become the page.

  3. Build it by hand

    Drag SLDS components in, set their properties in the inspector, and watch the JSON spec follow.

Spec export

Turn a prototype into a first draft of Jira stories and specs

SFProto reads the page you built and writes the data dictionary, the user story and the Gherkin scenarios from it, so the first draft is done before the meeting ends. It describes the prototype, not your org: read it over once, and confirm field names and rules against Object Manager before a developer starts.

Tabular Data Dictionary

Lists every field on the page with its label, type (lookup, formula, picklist), required mark and conditional visibility, and an API name: standard fields are recognised, custom ones are derived from the label for you to confirm.

Gherkin Acceptance Criteria

Writes Given / When / Then scenarios from what the page does: required fields, conditional visibility, Path stages, and the screen flow behind each button.

Confluence & Jira Ready

Copy any section formatted for GitHub Markdown or Jira markup, or download the whole spec as a Markdown file.

Sign up
opportunity-spec.md Auto-Generated
## 1. Object & Field Data Dictionary
| Field Label | API Name | Type | Required | Details / Options |
| :--- | :--- | :--- | :---: | :--- |
| **Opportunity Name** | `Name` | `text` | ✅ Yes | Default: "Acme Global Expansion — 500 Enterprise Seats" |
| **Amount** | `Amount` | `currency` | ✅ Yes | Default: "250000" |
| **Stage** | `StageName` | `picklist` | No | Options: `Prospecting`, `Qualification`, `Needs Analysis`, `Proposal / Quote`, `Negotiation / Review`, `Closed Won`, `Closed Lost` |
| **Close Date** | `CloseDate` | `date` | ✅ Yes | Default: "31/10/2026" |
| **Loss Reason** | `Loss_Reason__c` | `picklist` | No | Options: `Competitor Pricing Advantage`, `Budget Cut / Project Cancelled`, `Feature Gap`, `Executive Change` | *Hidden unless `StageName` equals `Closed Lost`* |
## 2. Acceptance Criteria (Gherkin Scenarios)
### Scenario: Required fields on save Given a user is editing an Opportunity record When the user saves with any of these left empty: - "Opportunity Name" in "Opportunity Information" - "Amount" in "Opportunity Information" - "Close Date" in "Opportunity Information" Then the page shows an error against each empty field And the record is not saved. ### Scenario: Moving Stage from "Proposal / Quote" to "Negotiation / Review" Given the record's "Stage" is "Proposal / Quote" When the user clicks "Mark Stage as Complete" on the path Then "Stage" becomes "Negotiation / Review" And Guidance for Success shows "Redline MSA and DPA terms with General Counsel."
Also included

Process flows and portals, in the same project

The process around the screens and the portal a customer sees live beside the prototypes, share the same links and exports, and are a click apart. One tool instead of a prototyping tool, a diagramming tool and a design tool.

Process flows

The process around the screens

A draw.io-style canvas with more than fifty shapes, Salesforce shapes and icons, swimlanes, pools and containers, and steps that open the prototype page they lead to.

  • Ten Salesforce process templates: lead to opportunity, quote to cash, case escalation and more
  • Connectors with bends, arrowheads and labels; lanes that run either way; pools and containers
  • Import a draw.io diagram, or describe the process and let the AI draft it
  • Your own SVG shapes, kept with the flow and shared across the project
  • Export as PNG, SVG, PDF or JSON; share a read-only link that opens the linked prototypes
Sign upProcess flows for Salesforce

Portal design

Experience Cloud sites: several pages, one brand

A multi-page Experience Cloud (LWR) site mock-up, such as a help centre, partner portal or customer account site, as the customer would see it, with colours, fonts, imagery and spacing set once and followed by every page.

  • Customer Help Centre, Partner Central and Account & Billing starters, or a blank site
  • One brand: colours, typography, logo, hero imagery, header style, spacing and footer
  • Experience Cloud components: hero banner, featured topics, trending articles, case deflection, community feed, partner scorecard, tile menu
  • Navigation, hero buttons, tiles, topics, footer links and the profile menu open other pages
  • Interact to click through the site as a visitor would; share it with a link that can open any page
  • Download the whole portal as JSON; every page uses the same SLDS components as a prototype
Sign upExperience Cloud portal design
Works with your tools

Fits the way your team already works

Embed a prototype in the page your team reads, attach it to the ticket a developer picks up, build one from a Figma export, or bring a draw.io diagram in as a process flow — without asking anyone to learn a new tool.

Integrations

  • ConfluenceEmbed a live prototype in a page
  • JiraAttach the prototype and its acceptance criteria to a ticket
  • NotionDrop a clickable prototype into a doc
  • Build from a Figma export (PNG/PDF)Export the frame, attach it, and the AI builds the page to match
  • draw.io / diagrams.netImport a diagram as a process flow
  • Claude, Cursor and Windsurf (MCP)Drive SFProto from your AI tool with MCP

Works anywhere you can paste a link

  • Slack and Microsoft TeamsPaste a share link into a channel or a chat
How each one works
Simple, Transparent Pricing

Choose the Right Plan for Your Salesforce Workflow

Start free, upgrade when you need more. Prices are in US dollars and exclude GST; Australian customers pay GST on top, and no other tax is added.

Free

Start here
Free

No card needed

Try SFProto on a real use case: one AI-built page you can click through, save and share.

What's Included:
Build 1 prototype page with AI, and 10 AI changes to refine it
Build by hand in the palette as much as you like: no credits needed
Keep 3 saved pages, flows or portals in 1 project
1 share link at a time, for 7 days, with the SFProto watermark
Click through screen flows, popups and toasts; SLDS 1 and SLDS 2 looks
Refer a colleague: when they build their first page, you both get 25 AI credits
Exports not included
Recommended for BAs & Consultants

Starter

$25 per month — or $250 a year

For Salesforce BAs, consultants and architects working on client projects: prototypes, process flows and portals in one place.

What's Included:
150 AI credits a month — one credit is one page the AI builds or one change it makes; its questions are free
Top up: 75 extra AI credits for $10, as often as you need
Lightning prototypes with screen flows, popups, toasts and custom components
Process flows: 50+ shapes, ten Salesforce templates, draw.io import, AI drafts
Portal design: multi-page Experience Cloud sites that share one brand
Flow exports as PNG, SVG and PDF; Jira story, Gherkin and Markdown spec exports
Lightning page metadata export
Share links and embeds with no watermark
Cloud saves you can open from any device
Email support

Cancel any time from your account.

Team

Quoted per team
Custom pricing

For a consultancy or a Salesforce team that works on the same projects.

What's Included:
Everything in Starter, for every seat
Seats you add and remove as the team changes
Shared projects that everyone on the team can open and edit
One pooled AI allowance across the team instead of a limit per person
Invoicing and purchase orders

Tell us your team size and we will quote it.

Talk to us

Enterprise

Larger organisations
Custom pricing

For organisations that need terms, limits and support agreed in a contract.

What's Included:
Everything in Team
AI limits set in the contract rather than per seat
Invoicing, purchase orders and your own terms
A data processing agreement on request
Priority email support with a named contact
Security questionnaires answered from the security page
Referral credits

Refer a colleague. You both get 25 AI credits.

The Free plan is one AI-built page. The fastest way to more is the BA at the next desk: every colleague who joins through your link and builds their first page earns you both 25 credits, whichever plan you are on.

  1. Step 1

    Share your link

    Every account has a referral link on its Account page. Send it to a colleague, post it, put it in your email signature.

  2. Step 2

    They sign up and build a page

    When someone joins through your link and builds their first page with the AI, the referral counts. A sign-up alone earns nothing.

  3. Step 3

    You both get 25 AI credits

    Bonus credits are used after your monthly allowance and never expire. Earn up to 150 a month this way, on the Free plan too.

Sign up and get your link

Already have an account? Your link is on the Account page.

Frequently asked questions

Everything you need to know

Access, pricing, AI credits, flows and portals, sharing, confidentiality, your data, and what happens when you leave.

Do I need Salesforce org credentials or a sandbox to use SFProto?
No. SFProto is a standalone, browser-based prototyping studio. It needs no developer org, sandbox, Salesforce licence or Apex deployment. Prototypes are drawn with the Salesforce Lightning Design System (SLDS 2.264), and nothing connects to a Salesforce org.
How much does SFProto cost?
Starter is $25 a month, or $250 a year (two months free), in US dollars. It includes 150 AI credits a month, the Lightning prototype studio, the Process flows and Portal design workspaces, spec and metadata exports, and share links and embeds with no watermark. A Team plan with seats, shared projects, a pooled AI allowance and invoicing is being priced; Enterprise is priced case by case with AI limits, terms and support set in a contract. Prices are in US dollars and exclude GST, which Australian customers pay on top. The Free plan costs nothing and needs no card.
What is an AI credit, and how many do I get?
Starter includes 150 AI credits a month. One credit is spent each time the AI builds a page or makes a change you asked for — in the studio, or when it drafts a process flow. Its clarifying questions are free, and so is everything you do by hand: dragging components, editing properties, sharing, exporting. 150 is enough for, say, 25 pages with five rounds of changes each. What is left is shown under the message box in the studio, and before the AI drafts a flow the dialog says it will use one credit. There is also a limit of 20 AI requests an hour so one account can't flood the service.
Can I earn AI credits by referring colleagues?
Yes. Your Account page has a referral link. When someone joins through it and builds their first page with the AI, you both get 25 bonus AI credits. Bonus credits are used after your monthly allowance and never expire, and you can earn up to 150 a month this way. Nothing is paid for a sign-up alone, only for a first page.
What happens if I run out of AI credits mid-month?
Starter subscribers can buy top-up packs of 75 extra AI credits for $10 from the Account page, as many as they need. Top-up credits are used after your monthly 150 and carry over: they don't expire when the month resets. On the Free plan, building by hand in the palette keeps working without credits; Starter is the way to more AI.
Is my client requirement or user story data used to train AI models?
No. To build a page, SFProto sends your request and the page you're working on to Google's Gemini API, on Gemini's paid tier, where Google doesn't use requests to improve its products. Your pages and their AI conversations are saved to your account so you can pick up where you left off.
How do I share a prototype, and who can open it?
Open Share in the studio and create a link. You choose who can open it: signed-in SFProto users, only people you name by email (they confirm with a one-time code and need no account), or anyone with the link. Links expire after 7 days, 30 days or never, and you can turn one off at any time. Every shared page carries a "Prototype — not Salesforce" banner and is never indexed by search engines.
Is my client’s work confidential? Can I put real customer data in a prototype?
Your requirements, prototypes, conversations and uploads are confidential to you. The Terms of Service say so in their confidentiality clause; only the two people who administer SFProto can reach the database, and only to help you, investigate an abuse report or a security incident, or answer the law. Client requirements and process descriptions are exactly what SFProto is for. Real customer records and personal data are not: prototypes are design mock-ups, so use made-up sample data, as the Acceptable Use Policy requires.
Will a competing consultancy see my client work?
No. SFProto is built by Cloud Mavericks, a Salesforce consultancy, and its consulting staff have no access to SFProto’s database, storage or admin console. Only the two people who administer SFProto can reach the database, under the confidentiality clause in the Terms, and only to help you, investigate an abuse report or a security incident, or answer the law. Your projects are private to your account under row-level security, and nothing you build is used for anyone’s consulting work, including ours. The About page lists the controls.
Can I embed a prototype in Confluence, Jira or Notion?
Yes. The Share dialog gives you an iframe snippet as well as the link, and shared pages allow framing. Use "Anyone with the link" for embeds: browsers often block signing in inside an iframe, so a link that needs a sign-in may ask viewers to authenticate in the embed.
Can I build from a wireframe or a screenshot?
Yes. Attach up to 5 images or PDFs (PNG, JPG, WebP or PDF, 10 MB each) to an AI request, on the project screen or in the studio chat, and the AI builds the page to match them. Your files are kept privately in your own account, and the copy sent to Gemini is deleted as soon as the reply comes back.
Can I connect my own AI tools to SFProto?
Yes. SFProto includes a Model Context Protocol (MCP) server, so tools such as Claude Desktop, Cursor and Windsurf can generate prototypes, export LWC code and read your pages. Every call carries a token you make on your Account page. MCP calls are free and never use AI credits; SFProto builds them itself rather than asking the AI. See the guides for the exact configuration.
Which Salesforce objects and SLDS components are supported?
Standard objects (Opportunity, Case, Lead, Account, Contact, Quote) and custom objects (__c). Components include page headers, highlights panels, sales paths with Guidance for Success, one- and two-column record details, picklists, checkboxes, related lists, activity timelines and modal dialogs, plus Experience Cloud pages such as help centres and partner portals.
Can I export technical documentation into Jira tickets?
Yes. The Reverse Spec Exporter turns a prototype into user stories, a data dictionary (API names, types, required flags) and Gherkin acceptance criteria (Given / When / Then) you can paste straight into a Jira ticket. It also generates Lightning Web Component scaffolding.
Can I draw process flows and design portals too?
Yes. A project has three workspaces, kept separate: Lightning prototypes, Process flows and Portal design. Flows is a draw.io-style canvas with more than fifty shapes, Salesforce shapes and icons, connectors you can bend and label, swimlanes that run either way, pools and containers, and ten Salesforce process templates to start from — lead to opportunity, quote to cash, case escalation and more. A step can open one of the project's prototype pages: press Interact and click it. Portal design is several Experience Cloud pages that share one brand — colours, fonts, imagery, spacing — with links between them you can click through. One tool for the whole conversation instead of a prototyping tool, a diagramming tool and a design tool.
Can I import my draw.io diagrams?
Yes. In the Flows workspace, choose Import a draw.io file from the menu and pick a .drawio or .xml file; compressed files are fine. Swimlanes become lanes, pools and containers; the flowchart shapes become their SFProto equivalents with their colours, borders and labels; connectors keep their routes, bends, arrowheads and Yes / No labels. A note tells you what had no match (those come in as rectangles) and that images were left out. Undo brings your previous drawing back.
Can the AI draft a process flow for me?
Yes. Choose Draft with AI in the Flows workspace and describe the process in plain words — who does what, in what order, where it branches. The draft comes back on lanes with steps, decisions and connectors, ready to edit. It uses one AI credit; the dialog says so and shows how many you have left before anything is sent. If the AI cannot answer, a plain outline is drawn from your sentences instead and nothing is counted.
Can I use my own shapes and icons in a flow?
Yes. The palette has Salesforce products and every standard object as icons, and Add an SVG shape brings in your own — a symbol, a product icon, a partner's logo. Your shapes stay with the flow, so they are saved, shared and exported with it, and every other flow in the project can use them. AWS and Azure icon sets are not bundled because their licences do not allow it; bring them in as your own shapes if you hold the rights.
How do I export a process flow?
PNG and SVG for slides and documents, a one-page PDF (A4 landscape, with the flow's name) for printing or attaching, and JSON for the flow itself — all from the toolbar. A share link opens the flow read-only, and steps linked to a prototype page open it from there too.
Can I share a process flow or a portal, not just a prototype?
Yes. Share works the same way for all three: choose who can open the link and when it expires. A shared flow opens as a read-only diagram to pan and zoom, and a step linked to a prototype page opens that page for the viewer; a shared portal opens on its home page with every link working. All three carry the same "Prototype — not Salesforce" banner as a shared page.
What happens to my work if I leave?
Your Account page has "Download my data", which gives you a JSON file of your projects, pages, AI conversations, share links, wireframes and feedback. Deleting your account removes all of it, and links you have shared stop working. Backup copies roll off within 30 days.