First CHToolsFree web tools

FIRST CH TOOLS / Design / 81 WEB STYLE PROMPT

Site Style to AI Brand Guide

Paste the HTML and CSS of your own site and this tool measures what actually renders — colours by role, the type scale, line height, Japanese fonts, spacing and corner radius — and turns it into one brand guide you can hand to Claude Code, Cursor or another AI coding assistant. The guide contains only values and structure: none of the page's text, images or copy. No URL is ever fetched; everything runs inside this browser.

What you paste is only measured inside this browser — never uploaded or stored. Scripts, images, external CSS and web fonts are not loaded.

How to Use

  1. Paste your page sourceOpen your site, choose "View page source", copy everything and paste it in — or select the HTML file. For sites that build the page with JavaScript, open DevTools, right-click <html> in Elements and choose "Copy outerHTML" to measure the rendered page instead.
  2. MeasureClick "Measure and build the guide" to see the colours, type sizes, spacing and radius along with the guide. Stylesheets loaded with <link> are not fetched; paste their contents into "External CSS" to include them.
  3. Use the guideCopy or save it and give it to Claude Code, Cursor or any other AI assistant. You can edit any value in the text before you hand it over.

About This Tool

Ask an AI to build a screen and it tends to bring in a blue your site never uses, a font size just slightly bigger than body text and spacing that matches nothing else. Give it your existing colours and type rules up front and the result fits in with the rest of the site. This tool writes your own site's brand guide out for an AI. It renders the pasted HTML off-screen inside your browser, reads the values each element actually ends up with (getComputedStyle) and summarises (1) colours by role (background, body text, headings, secondary text, primary, links, surfaces and borders, with contrast ratios), (2) the type scale (px, rem, weight, line height, where each size is used and its size at phone width), (3) fonts (whether a Japanese font is specified, Google Fonts families and weights, line height and letter spacing for body and headings, and Japanese settings such as palt and word-break: keep-all), (4) spacing (whether values follow a 4px or 8px grid, section padding, gaps), (5) corner radius and shadows, (6) how buttons, inputs and links look and (7) the max content width, breakpoints and page structure.

The guide only contains numbers, colour codes, font names and element names — never the page's text, headings, images or class names. CSS custom properties already defined on :root are listed with their names and values. Similar colours (within an RGB distance of 12) are merged; text colours are weighted by character count and surface colours by area to decide their role. The type scale calls the body size base, the steps above it lg, xl… and the steps below sm, xs…. While measuring, scripts, images, external CSS and web fonts are not loaded (the page is shown in a frame that blocks all network requests), so fonts are read from the declared values rather than the glyphs that would load.

There is no option to fetch a page by URL. The HTML and CSS you paste are only measured inside this browser — never uploaded or stored. You can paste up to 3 MB in total, and up to 6,000 elements are measured. To check how readable the measured colours are, use the Contrast Checker; to make font sizes scale with the viewport, use the CSS clamp() Calculator; for a px-to-rem table, use PX ⇄ REM / EM.

Other Tools