Prototype and animate designs for stripe.com
This simple template enables designers to rapidly create code-based prototypes for Helm projects. Need access or have questions? Slack a message to @mikestilling.
Install the tools
Ensure Git, Node, and NPM are installed on your machine. This often requires the installation of Homebrew and Xcode.
Start installingUse the template
Setup a GitHub account and get added to the repo. Next, click the "Use this template" button and clone the repo.
Access the repoStart prototyping
Clone the repo on your device, open the project in your code editor, and then start building your prototype.
Watch the tutorialShare your work
Create a Netlify or Vercel account, connect your repo, and deploy your prototype. Do not to share any sensitive info.
Learn how to deploy
0. What to expect
Not just AI. Some HTML, CSS, and JavaScript, too.
Most apps and websites aren't up to Stripe's standards. AI is trained on those, too. As such, most of what AI creates doesn't meet Stripe's expectations—so, we augment it.
1. Install the tools
Get your computer ready for designing with code
Unlike Figma, code requires a few additional things to fire it up. This video will guide you through the setup process. Don't worry, it gets easier from here on out.
2. Use the template
Create a copy of this project and start using it
Rather than starting from scratch, this template will save you time by providing a solid foundation. This video will help you do this and explain the tools within it.
3. Start prototyping
Design, build, and animate your prototype
This video details how to design with code then add rich interactivity and next-level animations to your prototype. It also touches on leveraging AI to speed up the process.
4. Share your work
Put your prototype online and share it with others
Gotta cool prototype you need to share? This video will show you how to do that through tools like Netlify and Vercel. Again, don't share any sensitive info.