How I Built BrandPrint in Cursor and Published It to Chrome

How I Built BrandPrint in Cursor and Published It to Chrome

I often need to understand a brand before designing a landing page, campaign, presentation, or social post.

Sometimes there is a detailed brand guideline. Sometimes the guidelines are outdated. And sometimes the live website is the only reliable reference available.

This made me think about a simple question:

What if I could open any website, click one button, and turn its visual language into a practical brand guide?

That idea became BrandPrint, a Chrome extension that reads the visible website and generates a structured overview of its colors, typography, buttons, spacing, content, and visual voice.

I built it using Cursor, published it on the Chrome Web Store, and made the complete project open source on GitHub.

Starting with a design problem

I did not begin BrandPrint with a technical architecture or a detailed development plan.

I began with the output I wanted as a designer.

I wanted something that could:

• Read the visual system of a live website

• Identify the colors that are actually visible

• Understand its typography and type scale

• Find primary and secondary button styles

• Capture common spacing and corner-radius patterns

• Read headings, descriptions, and calls to action

• Create a lightweight description of the brand’s voice

• Export everything into one portable file

The output needed to be useful, not just technically correct.

Collecting every color or font value from a website would be easy, but the result would also be noisy. I wanted BrandPrint to make sense of the page and present the information like a simple brand guide.

Building the extension in Cursor

I was new to building a Chrome extension, but Cursor helped me move from the initial idea to a working product much faster than I expected.

I used it to understand the Chrome extension structure, plan the architecture, write the Manifest V3 implementation, and build the first version of the page-extraction logic.

But the process was not one large prompt that magically produced the final extension.

It was a continuous loop:

1. Build a feature

2. Test it on a real website

3. Find something inaccurate

4. Understand why it happened

5. Refine the logic

6. Test it again

I tested BrandPrint on websites such as Apple, Stripe, Linear, and my own portfolio. Every website revealed a different problem.

One site might use transparent colors. Another might declare many CSS colors that are never visible. Some sites use gradients, dynamic components, dark themes, or multiple button systems.

Cursor made this development loop faster, but the product decisions, interface design, testing, and final judgment remained designer-led.

The difficult part was not collecting CSS

A website can contain hundreds of declared CSS values, but many of them are not part of what a visitor actually sees.

Some colors belong to hidden elements. Others come from libraries, old components, hover states, or unused code. Transparency can also make a CSS color look completely different once it is rendered over another background.

If BrandPrint simply collected every value, it would create a confusing palette instead of a useful brand guide.

To improve this, I built a color-ranking system based on how prominently colors are used on the rendered page.

BrandPrint also compares extracted CSS colors with rendered pixels from the visible tab. This helps it identify differences caused by transparency, layering, and browser rendering.

The goal is not to show every possible color. The goal is to find the colors that appear to define the page.

How BrandPrint works

The extension works through a simple browser-based process:

1. The user opens a website and clicks the BrandPrint icon.

2. A Manifest V3 service worker responds to the action.

3. A script reads the page’s computed styles and visible content.

4. Chrome captures the visible portion of the tab.

5. BrandPrint compares CSS values with rendered pixels.

6. The result is temporarily stored in chrome.storage.session.

7. A responsive panel presents the generated brand guide.

8. The user can copy values, save a PDF, or download brand.md.

The extension reads the website as it is currently displayed. If a website has separate light and dark themes, BrandPrint can be run again after switching the theme.

It focuses on the visual system created through CSS. It does not try to pull colors from every photograph or illustration on the page.

What it captures

BrandPrint currently looks for:

• Primary, secondary, tertiary, accent, and neutral colors

• CSS gradients

• Font families and font weights

• Type scale and heading patterns

• Primary and secondary button styles

• Common spacing patterns

• Corner-radius patterns

• Visible headings and descriptions

• Calls to action

• A lightweight description of the visual language and brand voice

The generated guide is presented inside a floating panel with dedicated sections for the palette, typography, gradients, buttons, spacing, and brand.md.

Why brand.md matters now

For me, the most important BrandPrint output is not the visual panel. It is the generated brand.md file.

AI tools work better when they receive clear context.

A screenshot can show how a website looks, but it does not clearly explain which color is primary, how the typography is structured, what kind of buttons the brand uses, or how the written voice feels.

A brand.md file turns those observations into portable, structured text.

It can provide context when creating:

• Landing pages

• Social media posts

• Presentations

• PDF documents

• Campaign assets

• Videos

• Early design concepts

Instead of explaining the same brand rules again in every tool, I can provide one file as a starting point.

I see brand.md as a context layer between an existing brand and a new AI-assisted draft.

It is especially useful now because designers are moving between many tools. The same project may involve a coding assistant, image generator, presentation tool, video tool, and design platform. A portable brand file makes it easier to carry the same visual direction across those workflows.

It is a starting point, not the final design

BrandPrint does not replace a complete brand guideline or a designer’s judgment.

It reads one rendered page at a time. That page may not contain every color, component, message, or rule used by the brand.

The generated output should be treated as a brainstorm, quick reference, or V1.

A designer still needs to review it, understand the wider context, make decisions, and finish the work properly.

That distinction was important to me while building the product. I wanted BrandPrint to speed up the beginning of the process, not pretend that the design process was finished.

Keeping everything inside the browser

BrandPrint works entirely inside Chrome.

There is:

• No AI model running behind it

• No external API

• No account

• No analytics system

• No server or backend

The extension reads the current page only after the user clicks it. The screenshot used for pixel comparison is handled in memory and is not uploaded.

The generated result is temporarily stored in Chrome’s session storage. It is saved, downloaded, or copied only when the user chooses to do so.

This approach keeps the product lightweight and makes the workflow easier to understand.

Making BrandPrint open source

I decided to release BrandPrint as an open-source project under the MIT License.

Anyone can inspect the implementation, understand how the extraction process works, modify it, or use it as a learning reference.

Keeping it open source also brings transparency to the product. Since BrandPrint reads information from a live page, users should be able to see what it does and how the information is handled.

I also hope the project can help other designers who are starting to explore coding and browser extensions.

From a local build to the Chrome Web Store

Building a working extension locally was only one part of the project.

To publish it, I also had to prepare the store listing, extension icons, screenshots, permission explanations, privacy policy, documentation, and packaged build.

This part helped me understand that shipping a product involves much more than making the main feature work.

The extension is now live on the Chrome Web Store, where it can be installed and used directly on any website.

What I learned from building it

BrandPrint began as a small design workflow idea, but it became one of my interesting design engineering experiments.

I learned how Chrome extensions are structured, how browser permissions work, how rendered websites differ from their CSS declarations, and how much testing is needed to make a seemingly simple feature reliable.

More importantly, it showed me how the role of a designer is changing.

With tools such as Cursor, Claude, Codex designers can move beyond static mockups and build working utilities around the problems they regularly face.

The AI helped me write and debug the code faster. But knowing what to build, deciding how it should work, testing the output, and recognizing when the result felt wrong were still human decisions.

That is the part of vibe coding I find most valuable. It gives designers another way to turn their thinking into something real and usable.

Try BrandPrint

BrandPrint is now available as a free Chrome extension.

You can install BrandPrint from the Chrome Web Store or explore the source code on GitHub.

Open a website, click the BrandPrint icon, and see what its visual language looks like when turned into a practical brand guide.