Getting started

Sign in, make a project and build your first page.

1
Sign in
Go to sfproto.com/login and enter your email. We send you a 6-digit code — there is no password. SFProto is invite-only while we test, so your address has to be invited first.
2
Create a project
A project holds the pages you build for one piece of work, such as "Service Console refresh". Everything you save goes to your account, so it follows you to another computer.
3
Choose how to build
AI Prompt: describe the page. User Story: paste a Jira story and its acceptance criteria. Build via Palette: start from a template or a blank page and drag components in.
4
Save and reopen
Save keeps the page under its own name in the project. The badge at the top says whether your work has reached your account or is still only in this browser.

Building with the AI

How to describe a page, answer its questions and make changes.

1
Describe the page as you would to a developer
Say what is on the page, what happens when someone clicks, what they choose and what they see next. "Build a Deal Support Request page with a Link DSR action that opens a popup with two options" works better than "build a DSR page".
2
Answer the questions
When a request could go several ways, the AI asks a couple of questions instead of guessing. Answer them in the conversation and it builds. Those question-and-answer turns don't count against your monthly allowance.
3
Change what is there
Switch the chat to "Edit this page" and describe the change: "add a Region picklist to the Details tab". Each change is one undo step (⌘Z or Ctrl+Z).
4
Write longer requests comfortably
The message box grows as you type, and the expand button opens a large editor for a long specification. Ctrl+Enter (⌘+Enter on a Mac) sends from either one.
5
Keep an eye on your allowance
Under the message box you can see how many AI builds and changes are left this month. When they run out, the conversation tells you when they reset.

Attach a sketch, mock-up or screenshot and have the page match it.

1
Attach the files
Use Attach wireframes on the project screen, or Attach in the studio chat. PNG, JPG, WebP or PDF, up to 5 files of 10 MB each.
2
Say what matters
You can send wireframes on their own, but a sentence helps: which object the page is for, and anything in the picture that should not be built.
3
Check the notes
If a file can't be read, or the offline engine answered, the reply says so. Where your words and the picture disagree, the AI follows your words and mentions the difference.

Send a prototype to a client, or put it in Confluence, Jira or Notion.

1
Create a link
Open Share and choose who can open it: signed-in SFProto users, only people you name by email, or anyone with the link. Set it to expire after 7 days, 30 days or never, then select Create link.
2
Share with named people
Enter their email addresses and each person gets the link. They confirm their address with a one-time code and view the prototype without an account.
3
Embed it
Copy the embed code into a Confluence iframe macro, a Jira smart link or a Notion embed. Use "Anyone with the link" for embeds, because browsers often block signing in inside an iframe.
4
Turn a link off
The Share dialog lists every link for the page. Turn off stops it immediately, and anyone who opens it is told it was turned off.

Turn a prototype back into documentation and scaffolding.

1
Export the spec
Export in the studio header generates user stories, a data dictionary of every field with API names and types, and Gherkin acceptance criteria.
2
Paste into Jira or Confluence
Copy any section with one click and paste it into a ticket description or a page. The Gherkin scenarios are written Given / When / Then.
3
Hand code to developers
The same dialog produces Lightning Web Component scaffolding (.html, .js, .js-meta.xml and .css) as a starting point for the build.

Use SFProto from Claude Desktop, Cursor or Windsurf.

1
Claude Desktop
Add an "sfproto" server to claude_desktop_config.json that runs the bundled MCP server, then restart Claude Desktop. The tools icon appears when it connects.
2
Cursor and Windsurf
Add a remote MCP server of type SSE pointing at https://sfproto.com/api/mcp?transport=sse, then refresh.
3
What your tools can do
Generate a prototype, read your saved pages and export LWC code, without leaving the tool you are already working in.

What is stored, how to get a copy, and how to leave.

1
Where your work lives
Projects, pages, AI conversations and wireframes are saved to your account so they are on every computer you sign in from.
2
Download a copy
Account → Download my data gives you a JSON file of everything: projects, pages with their conversations, share links and who they were shared with, wireframes and feedback.
3
Delete your account
Account → Delete my account asks you to type your email to confirm, then removes your work and stops your shared links. It cannot be undone, so download your data first.
4
Tell us what to build
The Feedback button sends an idea, a problem or anything else straight to the SFProto team.

Inviting testers, reading feedback and watching AI usage.

1
Invite people
Account menu → People. Enter up to 20 email addresses at a time. Each person gets an invitation telling them how to sign in. Remove takes their access away but keeps their work, so inviting them again restores it.
2
Read the feedback
Account menu → Feedback inbox. Filter by status and mark notes New, Planned, Done or Not planned. You are emailed when someone sends one.
3
Watch the AI bill
Account menu → AI usage shows this month's builds, changes, tokens and an estimated Gemini cost per person. Google's own budget alerts and spending cap are what actually stop the bill running away.