Design Md Webflow — AI skill for Claude Code

DESIGN.md Generator for Webflow - TypeUI

This project is a Webflow Designer Extension that scans the current Webflow workspace context and generates editable `DESIGN.md` and `SKILL.md` outputs based on [TypeUI](https://www.typeui.sh).

It is adapted from the same concept used in `design-md-framer`, but implemented for Webflow Designer APIs.

What it scans

When you click **Scan workspace**, the extension inspects:

• Webflow site metadata (getSiteInfo)
• All styles/classes on the site (getAllStyles + style.getProperties)
• Elements in the current canvas context (getAllElements)
• Variables in the default variable collection when available (getDefaultVariableCollection + getAllVariables)

From these signals, it infers:

• semantic colors (primary, secondary, tertiary, neutral)
• typography tokens (h1, body-md, label-caps)
• radius scale (sm, md)
• spacing scale (sm, md)

Then it renders editable markdown for `DESIGN.md` or `SKILL.md`.

Includes TypeUI and repo references

Generated `SKILL.md` frontmatter includes:

• TypeUI links:
  • https://www.typeui.sh
  • https://www.typeui.sh/design-skills
• GitHub reference:
  • https://github.com/bergside/design-md-webflow
• Version: v1.0.0

Local development

Prerequisites:

• Node.js 16.20+
• A registered Webflow App with Designer Extension enabled
• App installed on a test site in your Webflow workspace

Install dependencies:

npm install

Run dev mode (build watch + Webflow extension server on `localhost:1337`):

npm run dev

Build JS bundle for the extension:

npm run build:js

Bundle for upload:

npm run build

File structure

• src/index.ts: core scanning, token inference, markdown generation, and UI event wiring
• public/index.html: extension UI markup
• `public/styles