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.

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.css: extension styles
• DESIGN-MD-BLUEPRINT.md: design markdown blueprint reference
• SKILL-BLUEPRINT.md: skill markdown blueprint reference
• webflow.json: extension manifest (apiVersion: "2", size: "large", publicDir: "public")

Notes

• This extension scans the Webflow Designer workspace data model, not your machine's filesystem.
• If you change page/selection/context, click Scan workspace again to refresh extracted design signals.

License

MIT