bergside

Design Md Chrome — AI skill for Claude Code

AI community

Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI.

How to install Design Md Chrome

This entry records only its repository, not the path inside it, so there is no exact command to give. Open bergside/design-md-chrome and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Design Md Chrome does

Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI.

Alternatives in AI

Manifest — Real-time cost observability for OpenClaw agents — track tokens, costs, messages, and model usage 4.1k ★
Geo SEO Claude — GEO-first SEO skill for Claude Code 3.6k ★
Claude Skill Web Clone — Methodology for faithfully cloning any website (static / React / WebGL) — without copying AI-hallucinated code 969 ★

README

TypeUI DESIGN.md Extractor (Chrome Extension)

This Chrome extension extract styles and information from any given site and generates a `DESIGN.md` or `SKILL.md` file that you can use with tools such as Google Stitch, Claude Code, Codex, and others to build websites with a given design system blueprint. The file is based on the open-source [TypeUI DESIGN.md](https://www.typeui.sh/design-md) format.

Getting started

Load the extension in Chrome:

Open chrome://extensions
Enable Developer mode
Click Load unpacked
Select this project folder

Curated design skills

Check out curated design systems at [typeui.sh/design-skills](https://www.typeui.sh/design-skills).

Available actions

Action	Description
Auto-extract	Reads styles from the active tab (typography, colors, spacing, radius, shadows, motion).
Generate `DESIGN.md`	Produces design-system documentation markdown from extracted signals.
Generate `SKILL.md`	Produces agent-ready skill markdown from extracted signals.
Refresh	Re-runs extraction for the current page state.
Download	Saves generated output as `DESIGN.md` or `SKILL.md`.
Explain (`?`)	Shows how the file was generated, with TypeUI reference.

Generated file structure

The generated markdown follows this structure:

Section	What it does
`Mission`	Defines the design-system objective for the extracted site.
`Brand`	Captures product/brand context, URL, audience, and product surface.
`Style Foundations`	Lists inferred visual tokens and foundations.
`Accessibility`	Applies WCAG 2.2 AA requirements and interaction constraints.
`Writing Tone`	Sets guidance tone for implementation-ready output.
`Rules: Do`	Lists required implementation practices.
`Rules: Don't`	Lists anti-patte