Design System
Generate a design system from your codebase or audit your UI across 10 dimensions, with AI-slop detection.
- What
- Generate a design system from your codebase or audit your UI across 10 dimensions, with AI-slop detection.
- Cost
- Free
- Needs
- Use "design-system" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: a design-systems skill with three modes. Generate mode scans your CSS, Tailwind, or styled-components, extracts the real tokens (colors, typography, spacing, border radius, shadows, breakpoints), researches competitor sites for inspiration, and outputs a token set (design-tokens.json plus CSS custom properties), a DESIGN.md with the rationale behind each decision, and a self-contained interactive HTML preview. Audit mode scores your UI across 10 dimensions from 0 to 10 (color consistency, typography hierarchy, spacing rhythm, component consistency, responsive behavior, dark mode completeness, animation purpose, accessibility, information density, polish), each with concrete examples and a fix pinned to an exact file and line. Slop-check mode flags generic AI-generated design patterns: gratuitous gradients, purple-to-blue defaults, purposeless glassmorphism cards, scroll-triggered animation spam, and the centered-text-over-stock-gradient hero. By @affaan-m, listed here with credit to its creator. From the affaan-m/ECC repository (MIT). Honest caveats: the competitor-research step assumes a browser tool for live site inspection; in Muse, paste competitor URLs or screenshots yourself instead. Scores are opinions with reasons, not measurements; treat the 10-dimension audit as a structured critique to argue with. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseCommunity-built. Skill Harbor doesn't audit code — review the source before installing.
Use "design-system" with your Muse. Prerequisites: the Muse app (mobile or web). No installation, no API key, no extra account. For generate mode, have your codebase accessible; for audit mode, a running URL or screenshots of the pages. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/design-system/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add one of: "Generate a design system from this codebase: [describe stack and link or paste key style files]." / "Audit this UI: [URL or screenshots of the pages]." / "Slop-check this design: [URL or screenshot]." 3. For generate mode, give Muse 2 to 3 competitor sites you admire so the token proposal has somewhere to aim. Tip: the audit's value is the file:line-pinned fixes. Ask Muse to rank the 10 dimensions by impact before diving into fixes, so you fix what users feel first. Safety: a skill is plain-text instructions; it runs nothing by itself. Never paste secrets or API keys into it, and review anything Muse proposes before it acts.
Saved to your recent installs. Find it anytime on /connect.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.