bergside

Design Md Microsoft Edge — Design skill for Claude Code

Design community

Microsoft Edge browser add-on for genererating DESIGN.md and SKILL.md files based on the style of the website.

How to install Design Md Microsoft Edge

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

What Design Md Microsoft Edge does

Microsoft Edge browser add-on for genererating DESIGN.md and SKILL.md files based on the style of the website.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Add Oas Support — Add support for a new OpenAPI Specification version to Swagger UI 29k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★

README

TypeUI DESIGN.md Extractor (Edge Extension)

This Microsoft Edge add-on extracts 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 Microsoft Edge:

Open edge://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 an