/grade

Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm), strengths + fixes, plus an SVG badge.

BOOST

manavarya09@manavarya09

GitHub

From plugin

designlang

4.2k14 skills14 commands

Install

> /plugin marketplace add manavarya09/design-extract
> /plugin install designlang@designlang

How it fires

How this command gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/grade

Context preview

What this command does when you run it.

Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm), strengths + fixes, plus an SVG badge.

Command definition

grade.md

description: Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm), strengths + fixes, plus an SVG badge.
argument-hint: <url> [--badge] [--open]

Audit the design system at the user-provided URL. Emits a self-contained HTML report card plus JSON + Markdown variants. Pass `--badge` to also emit a shields.io-style SVG you can drop into any README.

npx designlang grade $ARGUMENTS

If no `$ARGUMENTS` were supplied, ask the user which URL to grade.

After the run completes:

1. Read the generated `*.grade.md` file from `./design-extract-output/` 2. Surface the headline grade (A–F · score · 8 dimensions) 3. Highlight the top 3 strengths and top 3 issues from the report 4. Offer to open the HTML in the browser (the `--open` flag does this automatically)

If the user wants the live shareable badge URL instead of generating files locally, they can use:

![Design Score](https://designlang.app/badge/<host>.svg)

This endpoint is blob-cached 24h with edge caching for ~50ms repeat hits.

Compare two sites with `/battle <A> <B>`, restyle with `/remix`, bundle everything with `/pack`.

Read it on GitHub ↗

Ships withdesignlang

Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.

Get the whole plugin

Stats

JavaScript Tailwind shadcn/ui HTML CSS

+7 tags

Bash PHP GitHub Anthropic MCP Stripe Figma

4,182

Stars

353

Forks

Active

Maintenance

HTML