HTML Builder
A design reference and helper tool for web development. Quickly look up color palettes, font pairings, layout grids, icon libraries, spacing scales, responsive breakpoints, contrast checkers, shadow presets, mockup tools, and design checklists — all from your terminal.
Commands
| Command |
Description |
palette |
Display a curated color palette with Primary (#2563EB), Secondary (#7C3AED), and Accent (#F59E0B) values |
font |
Show recommended font pairings — Heading: Inter/Poppins, Body: Open Sans/Lato |
layout |
Output layout template specs — 12-column grid, 8px base spacing, 1200px max-width |
icon |
List popular icon libraries — Heroicons, Lucide, Phosphor, Tabler |
spacing |
Show spacing scale guide — xs:4 sm:8 md:16 lg:24 xl:32 2xl:48 |
breakpoint |
Display responsive breakpoints — sm:640 md:768 lg:1024 xl:1280 2xl:1536 |
contrast |
Provide contrast checker reference (webaim.org tool link) |
shadow |
Show box-shadow presets — sm, md, lg with CSS values |
mockup |
List recommended mockup/design tools — Figma, Sketch, Adobe XD |
checklist |
Output a design checklist — consistent spacing, color contrast, mobile responsive |
help |
Show all available commands |
version |
Display current version (v2.0.0) |
Data Storage
- Data directory:
~/.local/share/html-builder/ (override with $HTML_BUILDER_DIR or $XDG_DATA_HOME)
- History log:
$DATA_DIR/history.log — records every command invocation with timestamp
- All data is stored locally; no external services or accounts required
Requirements
- Bash 4+ (uses
set -euo pipefail)
- No external dependencies — pure bash, no API keys needed
- Works on Linux and macOS
When to Use
- Starting a new web project — quickly reference standard color palettes, font pairings, and grid layouts without leaving the terminal
- Checking responsive design — look up breakpoint values (sm/md/lg/xl/2xl) to ensure your CSS media queries follow common conventions
- Reviewing accessibility — use the
contrast command to get the WCAG contrast checker link and the checklist command for a quick design audit
- Prototyping UI components — reference spacing scales and shadow presets to maintain consistent visual rhythm across your design
- Onboarding a new designer or developer — share the tool as a quick-reference cheat sheet for design system fundamentals
Examples
# Get the default color palette
html-builder palette
# Look up recommended heading and body font pairings
html-builder font
# Check responsive breakpoint values for CSS media queries
html-builder breakpoint
# Get box-shadow CSS presets (small, medium, large)
html-builder shadow
# Run through the design checklist before shipping
html-builder checklist
Example Output
$ html-builder spacing
xs:4 sm:8 md:16 lg:24 xl:32 2xl:48
$ html-builder icon
Libraries: Heroicons | Lucide | Phosphor | Tabler
Configuration
Set HTML_BUILDER_DIR environment variable to change the data directory. Default: ~/.local/share/html-builder/
Powered by BytesAgain | bytesagain.com | hello@bytesagain.com
1---2name: html-builder3description: Generate HTML pages, landing pages, email templates, and forms with ease. Use when building landing pages, creating emails, or prototyping portfolios.4---5# HTML Builder
6
7A design reference and helper tool for web development. Quickly look up color palettes, font pairings, layout grids, icon libraries, spacing scales, responsive breakpoints, contrast checkers, shadow presets, mockup tools, and design checklists — all from your terminal.
8
9## Commands
10
11| Command | Description |
12|---------|-------------|
13| `palette` | Display a curated color palette with Primary (#2563EB), Secondary (#7C3AED), and Accent (#F59E0B) values |
14| `font` | Show recommended font pairings — Heading: Inter/Poppins, Body: Open Sans/Lato |
15| `layout` | Output layout template specs — 12-column grid, 8px base spacing, 1200px max-width |
16| `icon` | List popular icon libraries — Heroicons, Lucide, Phosphor, Tabler |
17| `spacing` | Show spacing scale guide — xs:4 sm:8 md:16 lg:24 xl:32 2xl:48 |
18| `breakpoint` | Display responsive breakpoints — sm:640 md:768 lg:1024 xl:1280 2xl:1536 |
19| `contrast` | Provide contrast checker reference (webaim.org tool link) |
20| `shadow` | Show box-shadow presets — sm, md, lg with CSS values |
21| `mockup` | List recommended mockup/design tools — Figma, Sketch, Adobe XD |
22| `checklist` | Output a design checklist — consistent spacing, color contrast, mobile responsive |
23| `help` | Show all available commands |
24| `version` | Display current version (v2.0.0) |
25
26## Data Storage
27
28- **Data directory:** `~/.local/share/html-builder/` (override with `$HTML_BUILDER_DIR` or `$XDG_DATA_HOME`)
29- **History log:** `$DATA_DIR/history.log` — records every command invocation with timestamp
30- All data is stored locally; no external services or accounts required
31
32## Requirements
33
34- Bash 4+ (uses `set -euo pipefail`)
35- No external dependencies — pure bash, no API keys needed
36- Works on Linux and macOS
37
38## When to Use
39
401. **Starting a new web project** — quickly reference standard color palettes, font pairings, and grid layouts without leaving the terminal
412. **Checking responsive design** — look up breakpoint values (sm/md/lg/xl/2xl) to ensure your CSS media queries follow common conventions
423. **Reviewing accessibility** — use the `contrast` command to get the WCAG contrast checker link and the `checklist` command for a quick design audit
434. **Prototyping UI components** — reference spacing scales and shadow presets to maintain consistent visual rhythm across your design
445. **Onboarding a new designer or developer** — share the tool as a quick-reference cheat sheet for design system fundamentals
45
46## Examples
47
48```bash
49# Get the default color palette
50html-builder palette
51
52# Look up recommended heading and body font pairings
53html-builder font
54
55# Check responsive breakpoint values for CSS media queries
56html-builder breakpoint
57
58# Get box-shadow CSS presets (small, medium, large)
59html-builder shadow
60
61# Run through the design checklist before shipping
62html-builder checklist
63```
64
65### Example Output
66
67```
68$ html-builder spacing
69 xs:4 sm:8 md:16 lg:24 xl:32 2xl:48
70
71$ html-builder icon
72 Libraries: Heroicons | Lucide | Phosphor | Tabler
73```
74
75## Configuration
76
77Set `HTML_BUILDER_DIR` environment variable to change the data directory. Default: `~/.local/share/html-builder/`
78
79---
80
81Powered by BytesAgain | bytesagain.com | hello@bytesagain.com
bytesagain