A single-file Web Components library for AI-generated lo-fi wireframes. The sketchy, hand-drawn aesthetic signals "this is a prototype" and prevents premature discussions about visual polish.
./build.sh
open catalog/index.html- Web Components — 103 custom elements with
w-prefix - Tailwind CSS (CDN) — Layout and spacing
- Patrick Hand (Google Fonts) — Hand-drawn typeface
- No build dependencies — Shell script concatenation, no Node/npm required
Each wireframe is a standalone .html file with SketchKit inlined. Double-click to open in any browser.
<w-browser url="app.example.com">
<w-navbar brand="MyApp">
<w-nav-item active>Dashboard</w-nav-item>
<w-nav-item>Settings</w-nav-item>
</w-navbar>
<div class="flex gap-4 p-6">
<w-sidebar class="w-64">
<w-menu title="Navigation">
<w-menu-item active>Overview</w-menu-item>
<w-menu-item>Reports</w-menu-item>
</w-menu>
</w-sidebar>
<w-main class="flex-1">
<w-card title="Welcome">
<w-paragraph>Dashboard content here.</w-paragraph>
</w-card>
</w-main>
</div>
</w-browser>| Category | Count |
|---|---|
| Page Frames | 5 |
| Layout & Structure | 10 |
| Navigation | 11 |
| Typography & Content | 9 |
| Forms & Inputs | 17 |
| Buttons & Actions | 5 |
| Data Display | 15 |
| Feedback & Status | 7 |
| Overlays & Modals | 5 |
| Media & Rich Content | 9 |
| Specialized / Domain | 10 |
| Total | 103 |
chmod +x build.sh
./build.shOutput: dist/sketchkit.js — one file, zero dependencies.
See ai/COMPONENTS.md for the component reference and ai/SKILL.md for the Claude Code skill file.
MIT