bergside

Design Md Firefox — Design skill for Claude Code

Design community

Firefox extension that extracts styles from any websites and generates DESIGN.md and SKILL.md files for Google Stitch, Claude Design, Codex and Cursor.

How to install Design Md Firefox

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

What Design Md Firefox does

Firefox extension that extracts styles from any websites and generates DESIGN.md and SKILL.md files for Google Stitch, Claude Design, Codex and Cursor.

Alternatives in Design

CloudCLI — 8,400+ Free open-source web/mobile UI for Claude Code, Cursor CLI, and Codex 8.7k ★
Stitch Remotion — Generate walkthrough videos from app designs 2.6k ★
Brainwave — Learn to create modern websites with sleek parallax effects and bento box layouts 1.9k ★

README

TypeUI DESIGN.md Extractor (Firefox Extension)

This Firefox extension extracts styles and information from a 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 Firefox:

Open about:debugging#/runtime/this-firefox
Click Load Temporary Add-on...
Select this project's manifest.json
Pin the extension and open the popup on any regular website tab

To distribute publicly, package and sign the add-on through AMO.

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`	S