#AISChallenge Day 3 - It's a SKILL Issue

So this was built regarding a problem I experienced in Day 1 of researching, writing, and formatting a Newsletter. A big problem I encountered was that I had no Brand Kit to give guidelines to the output of the Newsletter. This resulted in too much back and forth with Claude trying to make minor tweaks. So, naturally, I decided to make a Brand-Kit-Extractor SKILL.

The idea was to make the SKILL work with either extracting a Brand Kit from your own website for reference, or to use it on any website to extract a Brand Kit that could be used for inspiration or to use that style to apply to any project. The Output would go to an editable Canva Project so the results could be fine tuned if necessary. This was an important distinction, rather than having a single PDF-style page that you could not alter.

It is not perfect yet. But has delivered some pretty great results. Enjoy.

What skill you built - brand-kit-extractor SKILL. You enter a URL and it extracts: logo, fonts, color palette, and images into an editable Canva Project. That's it. It organizes the assets into a pre-loaded Canva Template. This Template is completely editable with hexadecimal values and displays all the assets that can be downloaded into any format Canva allows. Plug this downloaded Canva output into any project that requires a brand kit.
One optimization you made - There were a lot of optimizations. One thing I learned is that extracting exact fonts is a PITA, I believe I fixed it. Another thing I learned was getting a real logo in any desirable resolution is also a PITA, I believe I fixed it. I also wanted to provide two logo options: 1. a logo with transparent background and 2. a standard logo with color. Also a bit difficult. The result works and involved how the scan of the website operates.
Screenshot - I provided three screenshots of the output. One was for a website for a local cleaning business I work with. The second was, of course, Nate Herk's website. The third was a popularly admired site Stripe.

The most interesting thing I discovered was approaching this from a completely different angle. The SKILL worked well with my first two simple sites. But, it really struggled to produce accurate output for the Stripe site. I learned that this was because of this:

"The orange/purple ribbon isn't an <img> — it's drawn live by JavaScript onto a <canvas> element, so a static HTML/CSS fetch (no headless browser, no JS execution — this script uses plain requests) never sees those pixels at all. They structurally cannot be captured."

So now I am thinking the whole SKILL could be remade by initially doing a screenshot-type command instead of reading the HTML and CSS. This would give a starting point of just matching pixels to the color palette instead of reading the site code and might be more accurate.

Anyway, the results are still pretty good. I am going to try a version that approaches it from a screenshot-pixel approach. But, I am interested in any feedback in modifying it.

Great fun!

11 comments

#AISChallenge Day 3 - It's a SKILL Issue