unslop — 7-Pillar Design Craft Engine

io.github.avivgerz-huePublished by GitHub account avivgerz-huev2.1.1Updated Nov 11, 2026

Audit UI design, extract Design DNA, generate tokens, and create transformation blueprints.

The publisher's own server: Craft

VerifiedSTDIODesktop onlyDeveloper Tools Media & Design

Server details

Identifier: io.github.avivgerz-hue/unslop
Transport: STDIO
Runtime: Desktop only
Trust: Verified
Published: Nov 11, 2026

Security note

MCP servers receive tool arguments from a conversation and may perform external actions. Review what a server can do before you enable it, and give it only the access it needs.

The registry verified the GitHub account avivgerz-hue for this listing. That does not show the account is the product's maker.

SourceWeft's checks cover whether the listing is complete and the endpoint answered; they do not review the server's code or what its tools do.

Add a badge to your README

Show readers this MCP server is listed on SourceWeft. The badge links to this page.

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/io.github.avivgerz-hue%2Funslop.svg)](https://sourceweft.com/mcp/io.github.avivgerz-hue%2Funslop?utm_source=readme&utm_medium=badge)

Overview

AI-generated overview

A local MCP server that audits UI code against 72 design rules, extracts design DNA, exports design tokens and generates prioritized refactor blueprints.

What you can do: Audit a codebase against 72 rules across seven design pillars and return a 0-100 Design Craft Score with exact file:line:column findings
Extract Design DNA from local CSS or a live URL and compile it into a reusable preset
Install one of ten built-in design archetypes and merge agent rules and MCP configuration into the project
Export tokens as Tailwind v4 theme, Tailwind v3 config, CSS custom properties or W3C Design Tokens JSON
Generate a transformation report with before/after class and token translations and P0/P1/P2 steps
When to use it: Useful when an AI coding agent is building or restyling a web interface and you want a measurable, repeatable design baseline instead of subjective taste. Also fits CI or agent loops that should fail below a score threshold, and projects that need a consistent token system across light and dark themes.
Requirements: Local process run with npx from the unslop-mcp npm package; Node.js 20.19 or later. No authentication, API keys or environment variables are declared. Extracting DNA from a URL needs network access to that site.

Before you install

The init and apply-preset tools write configuration and rule files into the project (.mcp.json, agent rule files, skill files), though the README says existing content outside managed blocks is preserved. URL extraction fetches third-party pages. The audit is static analysis and does not verify rendered behavior such as keyboard use, responsive layout or real contrast.

Installation

In SourceWeft

Open unslop — 7-Pillar Design Craft Engine in the dashboard and add it to a workspace.
Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

unslop v2.1.1

⭐ If this tool helps your AI coding workflow, please give this repository a Star! It helps more developers discover the project.

VibeFoundry Agent Suite: 🎨 unslop — UI Design DNA & Anti-Slop Engine (npx -y unslop-mcp@latest init) · 🛡️ vibe-shield — Security Scanner for AI Code (npx -y @vibefoundry/vibe-shield@latest scan .) · 👻 ghost-qa — Autonomous Headless Browser QA (npx -y ghost-qa@latest test http://localhost:3000)

[npm version] [npm downloads] [CI] [Node.js 20.19+] [MIT license]

[Live Terminal Demo]

Your agent can write the code. unslop gives it a measurable design engineering protocol.

[unslop preview]

unslop is a zero-runtime-dependency UI/UX Design Engineering CLI, native MCP Server, and AI Agent Skill. It audits 72 rules across seven design craft pillars, installs ten studio-grade archetypes, extracts Design DNA, exports four token formats, and turns every finding into an exact, prioritized transformation blueprint for JSX/TSX, HTML, Vue, Svelte, CSS, and Tailwind codebases.

Works natively with Claude Code, OpenCode, OpenAI Codex, Cursor, Windsurf, GitHub Copilot, Cline/Roo Code, Zed, and universal Agent Skills.

Human-readable CLI audits and refactor plans include a copyable badge for the calculated grade and a GitHub star link. Commands that do not calculate a score show a clearly labeled example badge. JSON and MCP stdio are never decorated.

[Before and after unslop: a generic purple-gradient AI landing page transformed into a precise, token-driven Linear Dark dashboard]

bash

npx -y unslop-mcp init --preset linear-precisionnpx -y unslop-mcp audit .npx -y unslop-mcp refactor-plan . --report UNSLOP-REPORT.md

npx -y unslop-mcp init --preset linear-precisionnpx -y unslop-mcp audit .npx -y unslop-mcp refactor-plan . --report UNSLOP-REPORT.md

Supported Coding Agents (Claude Code, OpenCode, Codex, Cursor, Windsurf, Copilot, Cline, Zed)

Install the latest universal integrations directly from GitHub in any project (the published npm version may lag behind main):

Agent	Native files generated by `unslop init`
Claude Code	`.mcp.json`, `CLAUDE.md`, `.claude/skills/unslop/SKILL.md`, `.claude-plugin/plugin.json`
OpenCode	`opencode.json` with `mcp.unslop-mcp`, plus `AGENTS.md`
OpenAI Codex CLI / Universal Agents	`AGENTS.md` and `.agents/skills/unslop/SKILL.md`
Cursor	`.cursor/mcp.json`, `.cursor/rules/unslop.mdc`, and legacy `.cursorrules`
Windsurf	`.windsurfrules`
VS Code / GitHub Copilot	`.vscode/mcp.json` and `.github/copilot-instructions.md`
Cline / Roo Code	`.clinerules`
Zed	`.zed/settings.json` under `context_servers`

Restart or reload the agent after installation so it discovers the new MCP server and Skill. Existing instructions outside Unslop's managed block, unrelated MCP servers, settings, inputs, and custom fields are preserved. Running init again is byte-for-byte idempotent.

This repository itself includes root AGENTS.md, CLAUDE.md, opencode.json, .claude-plugin/plugin.json, and both Claude/Codex Skill paths for immediate auto-discovery.

The result is not a generic prompt. It is a versioned token contract, a Design Craft Score from 0–100, a seven-pillar scorecard, exact before/after translations, and file-level steps your agent can execute in one coherent pass.

v2 at a glance

Capability	v2 contract
Design Craft Engine	72 rules · 7 pillars · A+–F grades
Color analysis	Exact WCAG 2.1 AA/AAA plus APCA-inspired perceptual checks
Studio archetypes	10 complete production design systems; five v1 IDs remain compatible
Token formats	Tailwind v4 `@theme`, Tailwind v3 config, CSS custom properties, W3C Design Tokens JSON
Transformation	`refactor-plan` CLI and `unslop_refactor_plan` MCP tool generate `UNSLOP-REPORT.md`
Agent protocol	Five-step principal UI/UX design engineer `SKILL.md`
Runtime	Node.js 20.19+, JSON-RPC 2.0 stdio, zero runtime dependencies

The 7-Pillar Design Craft Engine

Run a deterministic baseline before letting an agent rewrite the interface:

text

Design Craft Score: 78/100 (C)7-Pillar Scorecard:  Color & Contrast: 82/100 (B) · 3 findings  Typography & Hierarchy: 76/100 (C) · 4 findings  Layout & Spatial Rhythm: 70/100 (C) · 5 findings  Surface & Elevation: 88/100 (B) · 2 findings  Copy & Microcopy: 82/100 (B) · 3 findings  Interaction & Motion: 58/100 (F) · 7 findings  Theme & Token Architecture: 90/100 (A) · 2 findings

Design Craft Score: 78/100 (C)7-Pillar Scorecard:  Color & Contrast: 82/100 (B) · 3 findings  Typography & Hierarchy: 76/100 (C) · 4 findings  Layout & Spatial Rhythm: 70/100 (C) · 5 findings  Surface & Elevation: 88/100 (B) · 2 findings  Copy & Microcopy: 82/100 (B) · 3 findings  Interaction & Motion: 58/100 (F) · 7 findings  Theme & Token Architecture: 90/100 (A) · 2 findings

Pillar	Canonical rules	What the engine detects
1 · Color, Atmospheric Polarity & Contrast Math	`SLOP-COLOR-*`	Purple/pink/indigo clone gradients, neon glows, absolute black/white glare, muddy grays, hardcoded component colors, low-opacity text, exact WCAG AA/AAA, APCA-inspired polarity
2 · Typography & Scannable Hierarchy	`SLOP-TYPE-*`	Fixed display scales, monotonous heading weights, paragraphs beyond readable measure, missing `tabular-nums`, cramped body leading, loose display leading, untracked uppercase labels
3 · Layout, Spatial Rhythm & Grid Craft	`SLOP-LAYOUT-*`	Centered three-card clones, nested cards, off-grid arbitrary values, excessive container rounding, arbitrary grids, missing content measures, conflicting spacing and radii
4 · Visual Restraint & Surface Elevation	`SLOP-SURFACE-*`	Glassmorphism overuse, heavy dark-mode shadows, decorative blur blobs, icon badge clutter, unanchored raw elevation, ad-hoc shadow stacks
5 · Copywriting & Microcopy Anti-Slop	`SLOP-COPY-*`	100+ cliché variants, including “Unleash the power,” “Revolutionize,” “Supercharge your workflow,” “Seamless integration,” “Next-generation,” hype, filler, superlatives, and emoji spam
6 · Interactive Ergonomics, Motion & States	`SLOP-UX-*`	Clickable divs, missing labels and keyboard rings, incomplete hover/active/disabled states, small targets, positive `tabindex`, `transition-all`, missing reduced-motion behavior
7 · Theme Parity & Token Architecture	`SLOP-TOKEN-*`	Broken Canvas → Surface-1 → Surface-2 → Interactive → Border order, asymmetric dark overrides, missing dark companions, off-grid or mistyped tokens

Legacy slop/* IDs remain in output for compatibility. Canonical SLOP-* findings drive the v2 seven-pillar score, with location-level deduplication so compatibility output does not double-penalize a finding.

Scores with an action attached

Every audit includes exact file:line:column diagnostics and refactoring instructions. The overall score is the rounded mean of seven independently capped pillar scores; 95–100 is A+. Use --fail-under in CI or agent loops:

bash

npx -y unslop-mcp audit . --fail-under 95npx -y unslop-mcp audit . --promptnpx -y unslop-mcp audit src --json --no-fail

npx -y unslop-mcp audit . --fail-under 95npx -y unslop-mcp audit . --promptnpx -y unslop-mcp audit src --json --no-fail

Static analysis never replaces rendered verification. Keyboard operation, responsive behavior, actual contrast, content overflow, and reduced motion still need explicit inspection.

Design Transformation Blueprint

unslop_refactor_plan turns the audit into an executable Design Transformation Blueprint instead of a list of vague taste suggestions:

The report contains:

Design Craft Score and 7-Pillar Scorecard.
Before → After Class & Token Translation Table mapping detected classes, hex/RGB literals, off-grid values, and cliché copy to exact replacements from the selected archetype.
Prioritized P0/P1/P2 file:line steps covering the entire interface transformation.
Acceptance criteria for reaching 95–100 without suppressing rules or losing accessible states.

Example translations:

Before	After
`from-purple-500 via-pink-500 to-indigo-500`	`bg-[var(--surface-1)] text-[var(--text-primary)]`
`shadow-xl`	`border border-[var(--border-subtle)] shadow-[var(--shadow-md)]`
`p-[13px]`	`p-[var(--spacing-12)]`
`rounded-3xl`	`rounded-[var(--radius-lg)]`
`transition-all`	`transition-colors motion-reduce:transition-none`
`#777777`	`var(--text-primary)`
“Unleash the power”	A concrete product capability and verifiable user outcome

Use --json for the complete machine-readable blueprint:

10 Studio-Grade Design Archetypes

Inspect and install a complete token and agent-rule contract:

bash

npx -y unslop-mcp presetsnpx -y unslop-mcp presets anthropic-warm-editorialnpx -y unslop-mcp init --preset anthropic-warm-editorial

npx -y unslop-mcp presetsnpx -y unslop-mcp presets anthropic-warm-editorialnpx -y unslop-mcp init --preset anthropic-warm-editorial

Archetype	Visual and engineering thesis
`swiss-editorial`	High-contrast editorial grid, warm paper, serif/grotesk pairing, crisp hairline rules
`linear-precision`	Obsidian craft, luminance borders, compact tracking, subtle layers, tabular precision
`stripe-atmospheric`	Refined slate atmosphere, crisp white surfaces, cobalt trust, layered micro-shadows
`vercel-monochrome`	Architectural monochrome, geometric rhythm, zero decorative bloat, semantic status color
`teenage-engineering`	Tactile industrial UI, monospace labels, international orange, physical grid borders
`anthropic-warm-editorial`	Parchment and stone, literary serif headings, calm clay accents, generous reading measure
`bloomberg-terminal-dense`	Ultra-high data density, strict numeric alignment, compact workflows, semantic tickers
`raycast-command`	Frosted graphite command palette, keyboard-first selection, crisp shortcut badges
`fintech-institutional`	Deep forest-navy authority, legible financial hierarchy, restrained brass and emerald
`neo-brutalist-craft`	Intentional ink borders, offset hard shadows, bold geometric contrast, disciplined rhythm

Each archetype includes full surface hierarchy, explicit light/dark companions, typography scale and weights, spacing rhythm, radii, shadow/border elevation, layout contract, motion curve and spring values, plus ten archetype-specific design laws.

The v1 IDs linear-dark, swiss-grid, stripe-minimal, apple-glass, and neo-brutalist remain loadable for existing installations; the canonical v2 gallery contains the ten systems above.

Four token formats — presets or extracted DNA

Use the same deterministic exporter for a built-in archetype or extracted Design DNA.

Tailwind v4 `@theme`

Produces @theme, :root, and .dark contracts with semantic colors, fonts, fluid type, tracking, weights, radii, shadows, spacing, motion, and layout values.

Tailwind v3 configuration fragment

bash

npx -y unslop-mcp export-tokens --preset linear-precision --format tailwind-v3 --out tailwind.config.js

npx -y unslop-mcp export-tokens --preset linear-precision --format tailwind-v3 --out tailwind.config.js

Emits a mergeable theme.extend fragment with semantic utilities.

Pure CSS custom properties

Emits standalone :root and .dark variables without requiring Tailwind.

W3C Design Tokens JSON

Emits typed $type / $value groups for light and dark colors, typography, dimensions, radii, spacing, shadows, motion, and layout. A .json output path infers this format automatically.

Extract Design DNA from CSS or a URL

bash

npx -y unslop-mcp extract https://example.com --name reference --json -o design-dna.jsonnpx -y unslop-mcp export-tokens --source https://example.com --name reference --format w3c-json --out tokens.json

npx -y unslop-mcp extract https://example.com --name reference --json -o design-dna.jsonnpx -y unslop-mcp export-tokens --source https://example.com --name reference --format w3c-json --out tokens.json

The extractor reads local CSS or live HTML, inline styles, linked stylesheets, and @import graphs with explicit byte, request, and stylesheet budgets. Extraction warnings remain visible rather than silently inventing missing tokens.

Native MCP Server

Start the zero-dependency JSON-RPC 2.0 stdio server:

init merge-safely creates or updates .mcp.json without replacing unrelated servers, top-level settings, or custom fields on the unslop entry:

json

{  "mcpServers": {    "unslop": {      "command": "npx",      "args": ["-y", "unslop-mcp", "--mcp"]    }  }}

{  "mcpServers": {    "unslop": {      "command": "npx",      "args": ["-y", "unslop-mcp", "--mcp"]    }  }}

Claude Code can register it explicitly:

MCP tool	Purpose
`unslop_audit`	72-rule diagnostic, Design Craft Score, seven-pillar scorecard, exact findings
`unslop_extract_dna`	CSS/URL extraction and a complete compiled Design DNA preset
`unslop_apply_preset`	Install any canonical archetype and merge project agent rules/MCP configuration
`unslop_refactor_plan`	Generate `UNSLOP-REPORT.md` with exact translations and prioritized transformation steps

Positional mcp remains a backward-compatible alias for --mcp.

Principal UI/UX Design Engineer Skill

The rewritten SKILL.md is a five-step execution protocol for Claude Code, Cursor, Windsurf, and other coding agents:

Anti-Slop Diagnostic: baseline all seven pillars with unslop_audit.
Aesthetic Direction & Token Foundation: choose one archetype or extract Design DNA; install tokens before editing components.
Structural & Layout Transformation: use unslop_refactor_plan to replace clone layouts, enforce rhythm, and apply exact translations.
Surface, Typography & Copy Polish: implement semantic colors, WCAG contrast, fluid type, tabular numbers, and concrete product copy.
Interactive Ergonomics & Verification: complete focus and state behavior, then re-audit to 95–100/100 (A+) and inspect the rendered result.

init installs the selected contract into all native paths in the agent matrix above, including Claude/Codex Skills, Cursor and Copilot rules, and merge-safe MCP configuration for Claude Code, OpenCode, Cursor, VS Code, and Zed. Existing content outside managed blocks and unrelated JSON fields are preserved; repeated installs are byte-for-byte idempotent.

Alternative: zero-build GitHub execution

The npm package is the primary installation path. To execute the committed distribution directly from GitHub:

bash

npx -y github:avivgerz-hue/unslop --versionnpx -y github:avivgerz-hue/unslop init --preset linear-precisionnpx -y github:avivgerz-hue/unslop --mcp

npx -y github:avivgerz-hue/unslop --versionnpx -y github:avivgerz-hue/unslop init --preset linear-precisionnpx -y github:avivgerz-hue/unslop --mcp

The repository includes dist/. During a GitHub install, prepare uses TypeScript when available and otherwise validates and reuses the committed runtime and all fifteen canonical-plus-legacy preset JSON files. No production dependency or local compilation step is required.

Docker MCP

The image entrypoint is node dist/bin/unslop.js mcp. CI builds the image and verifies initialize, silent handling of notifications/initialized, and all four tools in tools/list over stdio with networking disabled.

Registry and citation metadata

server.json follows the official MCP Registry schema and declares unslop-mcp 2.1.1 with the npx -y unslop-mcp mcp startup contract and four tool summaries.
glama.json mirrors the exact MCP tool schemas and canonical archetype enum.
smithery.yaml starts the native stdio server without additional configuration.
CITATION.cff provides software citation metadata for VibeFoundry.

The npm package is published as unslop-mcp. These files support registry indexing but do not claim that a registry listing has occurred.

Development and verification

CI verifies Node.js 20 and 22, a production install without TypeScript, reproducible committed dist/, real CLI/MCP stdio negotiation, and the Docker MCP handshake. The v2 suite covers all seven pillars, all ten archetypes, every token format, extracted DNA, refactor blueprints, and manifest-driven 2.1.1 version output.

License

MIT · VibeFoundry

Source: README.md at commit 1fed06b

Tools

SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

v2.1.1LatestNov 11, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

Reached in the last 30 days25 pts
Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.
Auth declared10 pts
Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.
Tools listed15 pts
Answer tools/list without a credential, or ship a package that starts in a sandbox without one.
DescriptionRequired15 pts
Logo10 pts
Documentation15 pts
License10 pts

Other Craft integrations

Craft

do.craft.mcpOfficial publisher

Craft's hosted MCP server, published by mcp.craft.do; credential required; Streamable HTTP.

Streamable HTTPWeb executableAuth

Credential requiredOct 24, 2026

PersonCraft

Published by GitHub account johan1727

Hosted MCP server where Claude designs, codes and tests Godot 4 games, returning real screenshots and a downloadable project ZIP.

Streamable HTTPWeb executableAuth

Developer ToolsCredential requiredNov 11, 2026

CadCraft Studio

com.getcadcraft

CadCraft Studio's local MCP server lets an assistant read, edit, save and export CAD, BIM, takeoff and markup files inside folders you allow.

STDIODesktop only

Files & StorageNot validated yetNov 11, 2026

Meltbead Craft Colors

Published by GitHub account jsspace

Local MCP server for craft color charts: search bead, floss, yarn and block palettes and find nearest shades by CIEDE2000.

STDIODesktop only

Data & AnalyticsNot validated · the server did not startNov 10, 2026

Agent Craft

Published by GitHub account CipherClaw

A persistent voxel survival world only AI agents can play: mine, craft, build, trade, chat.

Streamable HTTPWeb executable

AI & ML17 toolsNov 3, 2026

unslop — 7-Pillar Design Craft Engine

Overview

Installation

In SourceWeft

Other MCP clients

README

unslop v2.1.1

Supported Coding Agents (Claude Code, OpenCode, Codex, Cursor, Windsurf, Copilot, Cline, Zed)

v2 at a glance

The 7-Pillar Design Craft Engine

Scores with an action attached

Design Transformation Blueprint

10 Studio-Grade Design Archetypes

Four token formats — presets or extracted DNA

Tailwind v4 @theme

Tailwind v3 configuration fragment

Pure CSS custom properties

W3C Design Tokens JSON

Extract Design DNA from CSS or a URL

Native MCP Server

Principal UI/UX Design Engineer Skill

Alternative: zero-build GitHub execution

Docker MCP

Registry and citation metadata

Development and verification

License

Tools

Version history

Score

Other Craft integrations

Craft

PersonCraft

CadCraft Studio

Meltbead Craft Colors

Agent Craft

Tailwind v4 `@theme`