Penta AI — Design Inspector

Inspect website styles and assets. Capture pages into editable AI rebuild briefs with screenshots and export packs.

Penta AI is a CSS inspector and website design toolkit for designers and frontend developers. Explore a webpage’s visual details, collect useful references, and prepare an editable brief for your next project. Inspect page elements Select an element to view its typography, dimensions, spacing, borders and shadows. Use the page ruler to measure areas and understand how the layout fits together. Explore colors and fonts Review the page’s color palette and copy color values. Identify font families, sizes, weights and line heights. Copy font declarations and download accessible font files when available. Preview and download assets Browse supported images, SVGs and other available page assets. Preview files, select the items you need, and download them individually or together in a ZIP. Export design tokens Customize supported design values and export the collected information for use in your projects. Create briefs for AI coding tools Prepare an editable implementation brief from the page’s observed layout, sections, components, styles and asset references. Review and customize the text, add optional reference screenshots, then copy the brief or export a Markdown file or reference pack. Brief preparation runs locally without an API key. Penta AI does not send your captured page content to an AI service. Preview different screen sizes Explore layouts using phone, tablet and desktop viewport presets. Switch between portrait and landscape to check how the page responds to different dimensions. These previews resize the viewport; they do not emulate mobile hardware or browser engines. Some websites block embedded previews. Save and organize references Keep references in a local project library, reopen saved projects, and export backups. Work in Chrome’s side panel or a draggable floating panel, with light and dark appearance options. Get started Open a webpage, click Penta AI in Chrome’s toolbar, and choose Styles, Assets, Inspect or Design. Explore the page, save useful references, and export the information you need. Storage and connections No account is required. Saved projects and preferences use local Chrome storage. Asset previews, downloads and viewport previews may connect to the original websites.