skill

design-md-framer

Framer plugin to generate DESIGN.md files based on project style specifications to integrate with other AI tools

bergside/design-md-framercommunitylistedunreviewed

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/bergside/design-md-framer itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 17, 2026

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 format.

Getting started

Run the plugin in Framer:

Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
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.

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 intent summary.
`Colors`	Lists semantic color usage guidance from extracted palette tokens.
`References`	Includes repo/version metadata and TypeUI links.

`SKILL.md`

Section	What it does
Frontmatter metadata	Sets `design-system-[brand-or-scope]` name and skill description.
`Mission`	Defines the design-system objective for the extracted project.
`Brand`	Captures product/brand context, audience, and 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 anti-patterns and prohibited behavior.
`Guideline Authoring Workflow`	Defines ordered guideline authoring steps.
`Required Output Structure`	Enforces consistent output sections.
`Component Rule Expectations`	Defines required interaction/state details.
`Quality Gates`	Adds testable quality and consistency checks.
`References`	Includes repo/version metadata and TypeUI links.

Local development

Common local commands:

npm run dev
npm run build
npm run lint
npm run pack

License

This project is open-source under the MIT License.