One-click extension on / off
Master toggle in the popup. Turn the whole toolkit off for a clean tab, or scope tools to This tab vs All tabs so nothing surprises you on other pages.
Chrome extension · fully local · MIT
A full web designer toolkit in one extension.
Measure and mark layouts, inspect and edit live UI, pull colors and media, audit accessibility and speed, export DESIGN.md / SKILL.md for AI IDEs, clear cache, fill forms for QA, and run a WordPress builder suite — all from one free, local-first Chrome extension.
0
core tools
0
WordPress actions
0
workspace presets
Standout capabilities
Beyond the tool names — these are the moments designers, QA, and WordPress builders actually reach for every day.
Inspect & edit live
Element Inspector covers box model, CSS, structure, text, colors, spacing, images, effects, and HTML — with contrast checks and typography details without opening full DevTools noise.
DESIGN.md & SKILL.md for AI IDEs
Design System scans typography, colors, buttons, and inputs, then generates markdown you can copy into Cursor, Claude, Codex, and similar agents — so your AI works from the live site’s real tokens.
Cache management
Cache Cleaner clears cache, cookies, storage, IndexedDB, service workers, and more for the current site only — with auto-reload and an optional floating quick button.
Fake form filler for QA
Page Controls includes Fake Filler and Lorem helpers so you can stress-test forms with random data, plus toggles to hide images, block JS, stop animations, and isolate bugs without touching source.
WordPress builder suite
Role switcher, private Theme switcher, ACF field/PHP copy, admin menu search, hide notices, sidebar shrink, smart page editor, theme/plugin detector, update backlog, and Classic Customizer — in one WP Tools panel.
Everything in Aligner
Quick map of every tool — the same inventory as Aligner Home inside the extension. Hide whole groups anytime with Workspace presets after install.
Layout
Align and mark the page while you design.
- Rulers
- Pixel rulers on the viewport edges
- Guides
- Alignment lines you place and lock
- Grids
- Column and baseline overlays
- Measure
- Point or rectangle distances and area
- Drawing
- Temporary arrows, shapes, and notes
Inspect
Understand structure and breakpoints.
- Inspect
- Box model, CSS, contrast, and live element details
- Responsive
- Device-width preview for common sizes
- Wireframe
- Grayscale structural page view
Color & media
Sample colors and pull page assets.
- Color Picker
- Eyedropper with HEX, RGB, HSL history
- Palette
- Extract and save colors from the page
- Media
- Scan, preview, and download images / SVG / video
Quality
Catch issues before you ship.
- Accessibility
- Automated a11y audit with severity filters
- Design Check
- Typography, color, and spacing consistency
- Page Speed
- Core Web Vitals and performance score
- Design System
- Tokens + DESIGN.md / SKILL.md for AI IDEs
Utilities
Everyday helpers while testing.
- Cache Cleaner
- Per-site cache, cookies, storage, workers
- Page Load Timer
- Navigation timing and paint milestones
- Page Controls
- Isolate bugs + Fake Filler for QA forms
WordPress
Builder panel for WP sites. Role & Theme switcher need the helper plugin.
- WP Tools
- Floating panel with quick actions and detection
- Admin bar toggle
- Hide or show the WP toolbar
- Admin / front switcher
- Jump between site and wp-admin
- Smart page editor
- Open the right editor or page builder
- Role switcher
- Preview roles securely (helper plugin)
- Theme switcher
- Private theme preview only for you (helper)
- ACF Tools
- Copy field names and PHP for theme work
- Theme & plugin detector
- Scan assets on the current page
- Update backlog
- Copy updates from Dashboard → Updates
- Admin menu search
- Filter the left admin menu
- Hide admin notices
- Clean wp-admin and restore when needed
- Classic Customizer
- Additional CSS even on block themes
- Sidebar shrink
- Collapse the admin sidebar
Layout
Align, measure, and mark the page while you design.
Rulers
What: Pixel rulers along the viewport edges.
Why: Quick distance checks without leaving the page.
How: Toggle from the popup, then drag origin if needed.
Guides
What: Straight or free-draw alignment lines.
Why: Keep columns, baselines, and edges consistent.
How: Enable Guides, place lines, lock when settled.
Grids
What: Column and baseline overlays.
Why: Validate rhythm against a layout system.
How: Choose columns/gutters in popup controls.
Measure
What: Point or rectangle measurements.
Why: Capture exact sizes between elements.
How: Turn on Measure and click the page surface.
Drawing
What: Temporary annotation marks on the page.
Why: Leave visual notes during review passes.
How: Pick a drawing tool and sketch overlays.
Inspect
Understand structure, breakpoints, and wireframe intent.
Inspect
What: Hover inspection for box model, CSS, structure, text, colors, spacing, images, effects, and HTML.
Why: Inspect and edit understanding without DevTools overload — includes WCAG contrast and typography.
How: Enable Inspect, move across elements, open Details / Box Model / Tabs panels.
Responsive
What: Device-width preview helpers.
Why: Check layouts at common breakpoints quickly.
How: Toggle Responsive and pick a device width.
Wireframe
What: Structural wireframe rendering of the page.
Why: Review hierarchy without visual decoration.
How: Enable Wireframe for a stripped composition view.
Color & media
Sample colors, build palettes, and pull page assets.
Color Picker
What: Eyedropper and color history for the page.
Why: Match brand colors from live UI.
How: Enable Color Picker and sample the screen.
Palette
What: Generated palette from page colors.
Why: Turn a live site into a reusable swatch set.
How: Run Palette and copy the groups you need.
Media
What: Inventory of images, video, SVG, and more.
Why: Audit and download assets from the current page.
How: Open Media Manager and scan the tab.
Quality
Catch accessibility, consistency, and performance issues early.
Accessibility
What: Issue scan with severity filters.
Why: Surface barriers before shipping.
How: Enable Accessibility and review highlighted findings.
Design Check
What: Consistency checks for type, color, spacing.
Why: Spot drift across a page system.
How: Run Design Check and triage highlighted mismatches.
Page Speed
What: Local performance diagnostics for the tab.
Why: Find heavy assets and slow paths while designing.
How: Open Page Speed and run against the current page.
Design System
What: Live tokens for typography, colors, buttons, and inputs — plus Preview.
Why: Hand AI IDEs and teammates the real system the page uses, not a guess.
How: Scan, then Generate DESIGN.md / SKILL.md, Copy, Download, or quick-install for Claude, Codex, Cursor.
Utilities
Everyday helpers for cache, timing, and page behavior.
Cache Cleaner
What: Per-site cleanup for cache, cache storage, cookies, file systems, IndexedDB, local storage, and service workers.
Why: See fresh builds without nuking your whole browser profile.
How: Pick data types, optional auto-reload / floating button, then Clear Selected Data.
Page Load Timer
What: Visible load timing for the current navigation.
Why: Compare perceived speed after edits.
How: Enable the timer and reload the page.
Page Controls
What: Temporary controls for content, styling, JS, cookies, popups, other extensions, and Fake Filler for QA forms.
Why: Isolate bugs and fill forms fast without changing source or installing separate filler extensions.
How: Toggle what you need, Apply Changes, Reset All when finished.
WordPress
Admin-aware tools for builders working on WordPress sites.
WP Tools panel
What: A floating panel for admin shortcuts, detection, backlog, notices, and switchers on WordPress tabs.
Why: Keep WordPress builder chores in one place instead of hunting admin screens.
How: Enable WP Tools on a WordPress tab while logged in. Most actions work with normal WordPress admin access. Role switcher and Theme switcher need the optional helper plugin below.
ACF Tools
What: Copy field names and PHP snippets from Advanced Custom Fields contexts.
Why: Faster handoff between admin UI and theme/plugin code.
How: Enable ACF Tools in the WP Tools toggles on an ACF screen.
Role switcher
What: Preview the site as one sample user per role, then switch back.
Why: Check editor / customer / subscriber views without juggling accounts.
How: Needs Aligner WP Tools Helper (or an existing trusted user-switching link).
Theme switcher
What: Privately preview installed themes in your browser only.
Why: Compare themes without changing the public active theme for visitors.
How: Requires Aligner WP Tools Helper; reset when finished.
Admin menu search
What: Filter the left wp-admin menu instantly.
Why: Find settings deep in crowded admin UIs.
How: Enable Admin menu search while in wp-admin.
Hide admin notices
What: Clean wp-admin of noisy notices; restore when needed.
Why: Focus on the screen you’re editing.
How: Toggle Hide admin notices from WP Tools.
Sidebar shrink
What: Collapse the WordPress admin sidebar for more canvas.
Why: Builder and editor work feels less cramped.
How: Use Shrink sidebar from the WP Tools panel or toggle.
Aligner WP Tools Helper
Optional WordPress plugin bundled inside Aligner and in GitHub Releases. Install it only when you need the advanced switcher features. Requires WordPress admin access with permission to upload and activate plugins.
Needs the helper
- Role switcher — securely switch to one sample user per role and switch back, when the site does not already provide a trusted user-switching link.
- Theme switcher — privately preview installed themes in your browser only, without changing the public active theme for visitors.
Works without the helper
- Admin bar toggle, Dashboard / View site, Smart page editor
- Theme & plugin detector, Update backlog, Admin notices
- Classic Customizer, Admin menu search, Sidebar shrink, ACF tools
After download: WordPress Admin → Plugins → Add New → Upload Plugin → choose the ZIP → Activate → reload the site page in Aligner.
Workspace
Hide what you do not need. Keep what you use. Visibility only changes the popup — saved feature settings stay intact when you turn a group back on.
Click a preset to spotlight matching tool groups above.
In action
Real captures of Aligner tools on a live page. Click any image to enlarge.
Install in under a minute
Chrome Web Store listing may come later. Until then, load the open-source ZIP like any developer extension.
Download the package
Grab aligner.zip from this page or GitHub Releases.
Unzip somewhere permanent
Do not delete the folder after install — Chrome loads the extension from that path.
Load unpacked
Open chrome://extensions, enable Developer mode, click
Load unpacked, and select the unzipped folder that
contains manifest.json.
Open Aligner Home
Pin the icon, open a page, then use the popup footer Home link — or Settings → Workspace → Open Aligner Home.
Stay up to date
Chrome only auto-updates extensions from the Chrome Web Store. For the
GitHub ZIP build: download the latest release, replace your unpacked
folder contents, then click Reload on chrome://extensions.
Who it’s for
Same toolkit, different jobs. Each row is a real friction point — and the Aligner tools that clear it. Screenshots are from the live extension, not mockups.
1/11
UI & layout designers
Measure once. Align for real.
The problem: Eyeballing gaps, baselines, and columns until “close enough” ships as almost-right.
What Aligner solves: Rulers, guides, grids, and Measure so spacing, columns, and alignment are pixel-clear on the live page.
Responsive & breakpoint work
Preview device widths without leaving the page.
The problem: Resizing the browser window is clumsy, and DevTools device mode is overkill for a quick layout check.
What Aligner solves: Responsive mode frames common device widths beside your tools so you can catch wrapping, overflow, and breakpoint bugs fast.
Front-end polish & inspect work
Understand the box without drowning in DevTools.
The problem: You need box model, type, and spacing on one element — not a full console session.
What Aligner solves: Inspect for live structure, CSS, contrast, and typography so you can fix what’s on screen, fast.
Structure & wireframe reviews
See the bones of the page in one click.
The problem: Visual noise hides hierarchy — it’s hard to judge layout structure when every image and color is shouting.
What Aligner solves: Wireframe turns the live page into a grayscale structural view so spacing and blocks are obvious.
Media, content & marketing folks
Pull the images you already see on the page.
The problem: Hunting assets in Network tabs, CMS libraries, or “save image as…” when you just need what the page is already loading.
What Aligner solves: Media Manager scans the page and lets you review and download images without leaving the tab.
Brand, color & visual QA
Sample real colors from the live UI.
The problem: Guessing HEX values from screenshots or outdated style docs while the shipped page has drifted.
What Aligner solves: Color Picker and Palette Generator pull HEX / RGB / HSL from what’s actually rendered.
Accessibility reviewers
Catch a11y issues before they ship.
The problem: Manual spot-checks miss contrast, labels, and structure problems until a late audit or user report.
What Aligner solves: Accessibility Checker runs an automated audit with severity filters so you can prioritize real fixes.
Performance-minded designers
See how heavy the page feels, on the page.
The problem: Speed regressions hide until someone opens a separate Lighthouse run or waits on CI.
What Aligner solves: Page Speed surfaces Core Web Vitals and a performance score while you still have the live design open.
QA, builders & anyone testing forms
Isolate bugs. Fill forms. Clear stale cache.
The problem: Retyping fake form data, fighting popups or scripts, and wondering if you’re still seeing a cached build.
What Aligner solves: Page Controls (including Fake Filler), Cache Cleaner, and load timing so tests stay honest and fast.
WordPress developers & builders
wp-admin without the hassle stack.
The problem: Role checks, theme peeks, ACF field names, noisy notices, and a crowded sidebar — all while you’re trying to ship a page.
What Aligner solves: WP Tools for role switcher, theme switcher, ACF Tools, menu search, hide notices, sidebar shrink, smart editor, detector, and more — in one panel.
Designers working with AI IDEs
Hand Cursor, Claude, or Codex the real design system.
The problem: AI tools invent tokens because nobody exported what the live page actually uses.
What Aligner solves: Design System scans typography, color, and components, then exports DESIGN.md / SKILL.md you can drop into an IDE.
FAQ
Straight answers for install, privacy, and WordPress.
Is Aligner free?
Yes. Aligner is free and open source under the MIT License.
Does it upload my browsing data?
No analytics or account system ships in this project. Settings stay in Chrome storage on your device. See PRIVACY.md.
How do I update after installing from ZIP?
Download the newest aligner.zip from Releases, replace the
files in your unpacked folder, then hit Reload in
chrome://extensions. Watch the GitHub repo for release
notifications. Store auto-update will apply once a Chrome Web Store
listing exists.
What is the WordPress helper plugin?
Optional. Most WP Tools work with normal admin access. Role switcher and private Theme switcher need Aligner WP Tools Helper (ZIP bundled in the extension and Releases). Install via Plugins → Add New → Upload.
Will it slow my browser?
Tools run on the tab where you enable them. Use Workspace presets to hide groups you do not need so the popup stays light.
Is this affiliated with Google or WordPress.com?
No. Independent project by Gobinda Tarafdar. Chrome is a trademark of Google LLC. WordPress is a registered trademark of the WordPress Foundation. WPBakery is a product of Rain-Task Ltd.
About the maker
Gobinda Tarafdar
WordPress product marketer · stubborn problem-solver · lifelong Harry Potter devotee
By day I am the Product Marketing Specialist at WPBakery, the page builder that quietly powers a sizeable corner of the WordPress universe. Before that, I helped a single plugin cross 400,000+ active users.
When the day-job owl flies home, I tinker on my own workshop of spells. Aligner is one of them — a visual toolkit so designers and WordPress builders can measure, inspect, and ship without juggling a dozen tabs.
Also from the workshop
| Project | Description |
|---|---|
| WPBakery | Page builder I do product marketing for |
| Docscriber | Documentation, conjured |
| TheRecaller | A memory charm for what you forget online |
| TheEditra | AI video editor |
| The Quill Press | Tech news, Daily Prophet style |
| Costlas | Cost of living for 140+ countries |
| Auto AFK Slack | Lock your Mac, Slack goes AFK |
| Slack Teammate Time | Teammate local times inline in Slack |
| FinderFlow | Mac file manager with built-in editor |
| Slack Agent Bridge | MCP bridge for Cursor/Claude, local archive, automations |
| Broken Link Checker | Find broken links without leaving the page — local Chrome toolbox |
If it saves you a trip to DevTools, give it a star
Aligner is MIT-licensed and ships without ads or tracking. A GitHub star helps others find it. A small donation keeps the workshop lit.