Rebuilding Sketch Systems as Statefully in v0
Sketch Systems came out in 2018 and it was kind of revelatory for me. You write a state chart in a basic markdown format and get a chart you can click through (0:11). I used it a ton, and I had a love-hate relationship with it, because I loved that it was there but it never got any improvements. I reached out to the team over the years and I don't think they have any interest in it. It's been eight years, and I'm done waiting for updates, so I made my own (0:36).
What set it off was work. At v0 we needed to talk through some complicated states, so I pulled out Sketch Systems, and realized that now, with AI, I could build it myself (1:18). It's called Statefully, and I'd spent the last couple of evenings vibe coding it in v0. Things are broken. It's not working 100% (1:42).
To show how it works I typed out a login screen, a landing page, a marketing site and a contact page, then indented them, so the contact page sits inside the marketing site and the rest inside a product (1:48). Submit goes from the login screen to the landing page, forgot password goes to its own page and back, and log out takes me back to login, and I can click through all of it in the diagram (3:33).
I made typing a lot better than it is in Sketch Systems, which can be frustrating to use. Every name has to be unique and it doesn't auto-predict any of them (3:51). I added other layouts too: tabs, for when I really want to work on the spec and notate it, and columns, to see everything at once, with or without the preview (4:16). You can also hook it up to a prototype, so a page renders whenever you get to a certain state, but I didn't show that in this video.
It's very early on. I'd spent 40 or 50 bucks in v0 credits on it, partly because it's good to use v0, but also because I just really want this piece of software (4:53). I think there's probably a path for it to be AI generated, where I describe the chart I'm looking for, or vibe code the preview that shows up at each state, which would give me a better way to control the states of a prototype (5:06). Even when it's not a good way to make a comprehensive, nuanced flow, doing the exercise turns up states you didn't think of and didn't design anything for. We'd just found a whole bunch of stuff in v0 that way, talking through all the states of our Git flow (5:39).
I hooked up Stripe, because I'm 50 bucks in the hole, but I'm not charging for it right now. I might in the future if it's helpful (6:23). Making these state charts has been nearly universally helpful for me as a product designer, and I never regret doing it. Drawing flow charts never really captures the nesting, and this gets you to think about the systems, the connections, the calls to action, the primary actions and the edge cases (6:39).
I hope I can make it into a decent tool. Two days later I redesigned the whole thing.
When I posted it on X I wrote:
After 8 years of waiting for Sketch Systems to come out of alpha, I decided to just make my own in v0.
Was originally going to gate access when I recorded this video but what the heck, just sign up and experience the bugs.