tomevault-io Wireframe
Create wireframes for UI mockups with two approaches.
Wireframes are skeletal, black-and-white representations of UI layout. They focus on structure, content priority, and function—not visual design. No colors, no styling, minimal fidelity.
Choose Your Approach
| Use | When | Render Script |
|---|---|---|
| SVG | Precise positioning, overlapping elements, custom shapes, artistic layouts | render.ts |
| HTML/Tailwind | Standard UI patterns (forms, grids, navigation, modals), flexbox layouts | render-html.ts |
Before creating any wireframe: Read the reference file for your chosen approach. The references contain required patterns, component examples, and the exact rendering workflow.
References
- SVG Reference — Absolute positioning with validation
- HTML Reference — Tailwind/flexbox patterns
Rendering
Use ONLY the provided render scripts. Do not improvise alternative methods (Chrome headless, third-party CLI tools, etc.).
| Format | Command |
|---|---|
| SVG | bun {SKILL_DIR}/scripts/render.ts [--scale N] <file.svg> [output.png] |
| HTML | bun {SKILL_DIR}/scripts/render-html.ts [--scale N] <file.html> [output.png] |
Common Sizes
| Device | Width | Height |
|---|---|---|
| iPhone | 375 | 667 |
| iPad | 768 | 1024 |
| Desktop | 1280 | 800 |
| Mobile web | 360 | 640 |
Iteration Process
- Create wireframe in the scratchpad directory
- Run validation (SVG) or render directly (HTML)
- Render to PNG (1x for quick verification)
- Read the PNG file to visually inspect
- Iterate until satisfied
- Render final version at 2x for sharing
Converted and distributed by TomeVault — claim your Tome and manage your conversions.