shaom

shaom / brand-to-design-md-skill

Public

A portable local skill that turns a public brand URL into a source-aware DESIGN.md, extracting visual evidence into design tokens, component guidance, usage boundaries, and optional responsive demo verification.

16
1
100% credibility
Found Apr 24, 2026 at 16 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
AI Summary

This repository provides a portable skill for AI assistants that generates a DESIGN.md file from a public brand website, extracting design tokens, components, guidance, and an optional responsive demo.

How It Works

1
🔍 Discover the skill

You find a handy tool that turns any public brand's website into a clear design guide just by giving it the web address.

2
📥 Add to your AI helper

You simply place this skill into your AI assistant's collection of tools, making it ready to use.

3
🌐 Pick a brand site

You choose the website of the brand you want to learn from and share its address with your AI.

4
✨ Let the magic happen

Your AI explores the site, pulls out colors, fonts, layouts, and component ideas, then creates a complete DESIGN.md guide with usage tips and boundaries.

5
Add a test demo?
✅
Yes, include demo

Your AI builds a responsive preview page to try out the design elements live.

❌
Guide only

You get just the detailed DESIGN.md file packed with all the design insights.

🎉 Design guide ready

You now have a beautiful, source-backed design document with tokens, do's and don'ts, and optional demo to kickstart your projects.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 16 to 16 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is brand-to-design-md-skill?

This portable local skill grabs a public brand URL and spits out a source-aware DESIGN.md file, pulling colors, typography, components, logo boundaries, and usage guidance straight from official sites, CSS, SVGs, and press kits. It solves the drudgery of manually scraping brand assets by bundling visual evidence into actionable design tokens and Do/Don't rules, with an optional responsive HTML demo for verification. Install via npx from GitHub or drop into any local AI agent's skills folder, like Cursor or Claude Code, and trigger with a simple prompt.

Why is it gaining traction?

Its true portability—no agent-specific ties—sets it apart from locked-in tools, working seamlessly across environments as a github portable app for local AI workflows. Developers dig the evidence-backed output, citing exact sources for boundaries and components, which builds trust over generic scrapers. The one-command npx skills add hook makes it effortless to test on real brands, fueling shares in portable local LLM circles.

Who should use this?

Frontend devs reverse-engineering public brands for client projects, skipping hours of screenshot hunts. Design system leads auditing competitor guidelines or building from scratch. Teams with portable local AI setups prototyping UIs fast, especially around brand boundaries.

Verdict

At 16 stars and 1.0% credibility, it's raw maturity—just a focused skill with solid docs—but that's its charm for experiments. Try it for quick brand-to-design wins if portable github cli-style tools fit your stack; iterate as needed for heavier lifts.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.