Wireframe UI Kit: Hand-drawn wireframes for AI prototypes
47 hand-drawn HTML and CSS components
Sketch ideas and prove concepts before the visual. Plain HTML and CSS, no JavaScript. Paste into any AI agent.
- Plain HTML and CSSNo framework and no build step. Works with any AI tool.
- One gray drawing style47 components for phones, lists, controls, and sheets
- Marks on the sketchCallouts, notes, arrows, and gestures for decisions still open.
How to use
- Step 1Copy the kit prompt below.
- Step 2Paste it into any AI agent.
- Step 3Ask for a screen, like "a checkout with a tab bar."
Use the Wireframe kit for this sketch. It has 47 hand-drawn, gray-only components in plain HTML and CSS.
All components
- Phone
- App bar
- Tab bar
- Card
- Data grid
- List
- Tabs
- Progress steps
- Carousel and page dots
- Accordion
- Text and placeholder copy
- Image placeholders
- Avatar
- Badge
- Tag
- Icons
- Chat
- Keyboard
- Button
- Fields
- Checkbox
- Radio
- Switch
- Segmented control
- Chips
- Slider
- Progress bar
- Stepper
- Calendar
- Banner
- Empty state
- Spinner
- Dialog
- Bottom sheet
- Menu
- Toast
- Floating button
- Drawer
- Tooltip
- Coach mark
- Callout
- Notes
- Sticky note
- Highlight
- TBD
- Flow
- Gestures
Questions
What is the Wireframe UI Kit?
A free hand-drawn HTML and CSS kit with 47 components and 52 variants for sketching ideas and proofs of concept. Link one stylesheet, paste the markup, and sketch the structure before you polish.
How many components are included?
47 components across 7 categories: frame, layout and navigation, content, controls, feedback, overlays, and annotations. Phones, lists, sheets, callouts, and placeholders are covered.
Is it free?
Yes. The whole kit is free for personal and client sketches, with no sign-up. Link the hosted stylesheet or copy the components you need.
Do I need React or a build step?
No. Each part is plain HTML plus one stylesheet link. No React, Vue, or other framework required. It works in a plain HTML file or inside anything your AI tool generates.
When should I use this kit?
Use it to sketch an idea or a proof of concept: the layout, the flow, and what still needs a decision. Switch to an iOS UI kit when you want a finished visual system.
Who built this kit?
The team behind AI UX Playground at Bestfolios.com. We built it for our own AI prototypes and made it free.