{: .font-heading-2xl}

 {: .float-right .maxw-mobile-lg .tablet:margin-left-3 .border-05 .border-base-lighter .radius-md .bg-light-yellow}

Trap Kit is a low-code toolkit of components, layouts, and templates to build working prototypes in the browser with the human-friendliest tech stack around: Markdown for content, USWDS for components, and GitHub Pages for hosting. All free and open-source. {: .usa-intro}

{% include components/button.html link="https://github.com/pglevy/trapkit#readme" label="Start prototyping" number="1" style="bg-primary-vivid usa-button--big display-inline-block" %}

{% include components/button.html link="https://github.com/pglevy/trapkit/wiki" label="Check out the docs" number="1" style="usa-button--outline display-inline-block" %}

{: .font-body-xl .border-top .border-base-light .padding-top-4 .margin-top-4}

{% include components/card.html values=site.data.quotes width="tablet:grid-col-4" %}

{% include components/button.html link="https://github.com/pglevy/trapkit#readme" label="Start prototyping" number="2" style="bg-primary-vivid margin-bottom-3" %} {% include components/button.html link="https://github.com/pglevy/trapkit/wiki" label="Check out the docs" number="2" style="usa-button--outline" %}

{: .font-body-xl}

This repository template provides everything you need to get started with rapid web prototyping. These are the high-level steps: {: .font-body-md .measure-5}

1. Create content and link it together with GitHub-flavored Markdown.
2. Add USWDS components to your pages with a line or two of text.
3. Go live with GitHub Pages and get feedback. {: .font-body-md .measure-5}

The most important thing people interact with on your page is the content. This is why they're there — either to get information or get something done. So let go of lorem ipsum and start testing your content first. Markdown makes it easy to format your text without messy HTML tags. {: .font-body-md .measure-5 .margin-top-1}

Hotspot-based prototype tools are nice, but there's nothing like interacting with a real website on a real device for seeing how users actually respond to your hypothesis. And as easy as it is to build in the browser, you'll spend less time futzing around in Figma and more time validating your ideas. {: .font-body-md .measure-5}

Working with an accessibility-aware, mobile-friendly design system allows you to focus more on collaboration with developers and less on communicating design details. The U.S. Web Design System includes a robust set of well-documented components that work out of the box. Even if you're already using a design system, this approach covers the basics so you can concentrate on what makes your design unique. {: .font-body-md .measure-5}

{% include components/button.html link="https://github.com/pglevy/trapkit#readme" label="Start prototyping" number="3" style="bg-primary-vivid margin-bottom-3" %} {% include components/button.html link="https://github.com/pglevy/trapkit/wiki" label="Check out the docs" number="3" style="usa-button--outline" %}

Not ready to jump in? You can always connect with me on LinkedIn{: .text-primary-vivid}. {: .font-body-md .measure-5}

Made by @pglevy{: .text-primary-vivid} with Trap Kit{: .text-primary-vivid}—no-cost, no-catch rapid web prototyping for no-coders. Get on GitHub{: .text-primary-vivid} {: .border-top .border-base-light .padding-top-4 .margin-top-4}

Illustration by Illustrations.co{: .text-primary-vivid}.