Prototyping
in <Code>

There’s a point in every design process where a Figma prototype stops being enough. The layout looks good. The flow makes sense. Then someone asks, “What happens when the title is twice as long?” or “What happens if you click that?” And suddenly you’re guessing.

At Shorthand, we’ve started reaching for code earlier to answer those questions.

Not instead of Figma. It’s still where lots of ideas begin. Just sooner than we used to.

CLOSING
THE GAP

For a long time, our prototypes lived in the middle ground. Figma for layouts and flows. Occasionally a quick CodePen or branch to prove something was technically possible.

It worked. But there was always a gap between the prototype and the shipped product. Animations felt different in the browser. Components behaved differently with real data. Edge cases appeared late.

The prototype was a promise the build had to reinterpret.

AI tools have lowered the barrier to working in code. What used to take half a day now takes an hour. Sometimes less.

That shift changes things.

USING REAL COMPONENTS

We are not building throwaway UI. We use our actual component library. The same buttons, spacing tokens, and patterns that ship in the product.

When someone clicks through one of these prototypes, they are interacting with something close to reality.

That means:

• We can try more ideas and discard them quickly.
• Feedback becomes specific. “This transition is too slow” instead of “it feels off.”
• Engineers do not have to translate a static mock into intent. Sometimes the prototype becomes the starting point.
• Edge cases show up earlier, when they are still cheap to fix.

IT'S NOT MAGIC

AI does not design for us.

Judgment, taste, and understanding the user are still the work. The tools simply reduce friction between having an idea and seeing it behave like a product.

The code is not perfect. We still adjust, refactor, rethink. But getting to something interactive faster improves the quality of the conversation around it.

And that improves the product.

CLOSER TO REALITY

Not every idea needs a code prototype. Sometimes a sketch is enough.

But the threshold for building something real is lower now. When your product is as interaction heavy as Shorthand, that matters.

The closer our prototypes are to the real experience, the better the product will get.