Design Md Framer — AI skill for Claude Code

DESIGN.md Generator for Framer - TypeUI

This Framer plugin extracts local style signals from the current project and generates editable `DESIGN.md` and `SKILL.md` outputs that you can use with tools such as Google Stitch, Claude Code, Codex, and others to build interfaces with a consistent design-system blueprint. The generated files are based on the open-source [TypeUI DESIGN.md](https://www.typeui.sh/design-md) format.

Getting started

Run the plugin in Framer:

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open the plugin in Framer:

   • Visit https://framer.com/plugins/open
   • Select this local development plugin
   • Run TypeUI framer plugin

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 local Framer styles and selection signals on load (color styles, text styles, spacing, radius).
Generate DESIGN.md	Produces editable design-guideline markdown from extracted project signals.
Generate SKILL.md	Produces editable agent-ready markdown from extracted project signals.
Toggle view	Switches between DESIGN.md and SKILL.md in a single editor panel.
Refresh	Regenerates markdown from the current extracted token model.
Copy	Copies generated markdown to clipboard.
Download	Saves generated output as DESIGN.md or SKILL.md.

Generated file structure

The plugin generates two markdown files with consistent structure.

`DESIGN.md`

Section	What it does
Frontmatter tokens	Captures extracted token primitives: name, colors, typography, rounded, and spacing.
Overview	Documents design