Give your AI one guide and your app explains itself
Kin’s Flow is a guide for AI coding tools. Hand it over and the AI adds a safe demo, tours, and help buttons. Anyone can learn your app without you there.
For developers: demo accounts with a write guard, data-driven tours, info text, a role flow map, and first-login setup.
Paste into Claude Code, Cursor, or any AI coding tool:
> Read kins-flow.md from https://github.com/kinperezdev/kin-s_flow_framework and add Kin's Flow to this app. Show me the flow before building.
Born from a demo that went wrong
Kin showed a client an app with many user types. The screens worked. The room still got lost. Nobody could see who starts the work or where it ends.
The fix wasn’t better slides. It was an app that teaches itself, in plain words, with zero risk to real data.
The pieces are known. Kin’s Flow puts them in order, so an AI can build them for you. This page is the example.
New to these words?
- Role
- A type of user, like manager, staff, or customer.
- AI coding tool
- An AI that writes code for you, like Claude Code or Cursor.
- Demo account
- A practice login with sample data.
- Onboarding
- Setup that helps new people start.
Everything the AI adds to your app
All six share one map of who does what. Tap any “i” to try one.
- 01What it isPractice logins with sample data.What it’s forClients can try the app safely.
Demo accounts
A practice login for each user type. Click anything. Nothing real changes.
For developers
- Shared sample data
- Reads match live RLS
- Write guard on the DB client
- 02What it isA step-by-step walkthrough.What it’s forPeople learn without you there.
Show me around
A tour for each user type: the flow, the setup, the daily work.
For developers
- Steps stored as data
- Highlights real buttons
- Tested at 375 x 640
- 03What it isA short tour of one page.What it’s forGet unstuck fast.
Explain this page
Every page can explain what it’s for and what each section does.
For developers
- Same engine as the tour
- One tour per page
- 04What it isA tiny help button, like this one.What it’s forEvery number makes sense.
“i” buttons
Tap the “i” on any card to see what it is and why it matters.
For developers
- All text in one file
- Test fails if one is missing
- 05What it isA map of how everyone connects.What it’s forEveryone sees the big picture.
How it works
One screen showing who starts the work and who finishes it.
For developers
- Roles joined by arrows
- “You” marker
- Once, daily, weekly steps
- 06What it isGuided setup for new accounts.What it’s forLaunch day matches the demo.
First-login setup
New accounts get the same guide on day one, for real.
For developers
- First-login flag per user
- Reuses the setup steps
Who starts the work and who finishes it
FlowK’s own “How it works” card. Tap a role to see its steps.
First, the setup
- KinWrites and shares the guide.FlowK → kins-flow.md
- YouPick an app with more than one role.Your project
Then the flow
Your steps as
Developer
Paste the prompt into your AI.
FlowK → Copy prompt
Read the guide once.
FlowK → Read the guide
Check who does what before any code.
AI chat → Flow map
Test every role on a phone.
Demo → Show me around
Update the “i” text when cards change.
Info text file
The demo never touches real data
Demo can’t save
Click anything. Nothing reaches your real records.
The DB client is wrapped. In demo mode, every write stops before the network.
Same view as real life
Each role sees only what it would really see.
Demo fetchers filter rows like your live RLS.
Tested
A test fails if anything gets through.
Demo on, call every write, assert fetch never ran.
const WRITE_METHODS = new Set(['insert', 'update', 'upsert',
'delete'])
function guardBuilder<T extends object>(builder: T): T {
return new Proxy(builder, {
get(target, prop, receiver) {
const isWrite = typeof prop === 'string' && WRITE_METHODS.has(prop)
if (isWrite && isDemoMode()) return () => blockedChain()
const value = Reflect.get(target, prop, receiver)
return typeof value === 'function' ? value.bind(target) : value
},
})
}
expect(fetch).not.toHaveBeenCalled()The rules the AI follows
- 01
Flow first
The AI shows you who does what before it builds.
- 02
Real button names
Tours only name buttons that exist.
- 03
Plain words
“Add students”, not “configure entities”.
- 04
Works on phones
Every step is tested on a small screen.
- 05
One guide, two jobs
The demo and real setup use the same steps.
- 06
Ask first
The AI lists confusing labels and waits for your OK.
Share it and hand it to your AI
- 1
Give it to your AI
Paste the prompt below, or save kins-flow.md in your project.
- 2
Check who does what
The AI shows the flow first. Fix it there.
- 3
Try every role
Log in to each demo and tap “Show me around”. Try it on a phone too.
> Read kins-flow.md from https://github.com/kinperezdev/kin-s_flow_framework and add Kin's Flow to this app. Show me the flow before building.