Generate design tokens and audit UI consistency across codebases.
npx skills add https://github.com/samymity/node-poc --skill design-system-samymity
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/samymity/node-poc/tree/main/.claude/skills/design-system Command: npx skills add https://github.com/samymity/node-poc --skill design-system-samymity
Teams frequently face disjointed user interfaces, missing standardized design tokens, and undiagnosed visual inconsistencies in existing codebases, leading to poor user experience, wasted design and development time, and inefficient pre-redesign workflows.
This Skill provides three core capabilities to streamline design workflows: it can generate a full, cohesive design system by scanning your codebase for existing styling patterns, extracting design tokens, researching competitor sites for inspiration, and producing documentation plus a self-contained interactive preview. It can also perform comprehensive visual audits of existing UIs, scoring them across 10 key dimensions including color consistency, typography hierarchy, and accessibility, with specific, file-line-pinned fix recommendations. Finally, it detects generic AI-generated "slop" design patterns such as overused gradients, generic hero sections, and unnecessary scroll animations that make products feel unpolished. For example, a product team can use this Skill to generate a standardized design token set for a new SaaS product, or audit their current marketing site to fix spacing and contrast inconsistencies before a major redesign.
Use the design-system skill to generate a complete, customized design system for your project by analyzing your existing codebase and producing design tokens, documentation, and a visual preview page.
High-intent search queries and answers about installing and using this skill.
A visual UI audit evaluates your existing interface across 10 key dimensions, including color consistency, typography hierarchy, and accessibility. The audit produces a scored report with specific, file-line-pinned recommendations to fix visual inconsistencies.
AI slop design detection identifies generic, AI-generated visual patterns like overused gradients, unnecessary scroll animations, and generic hero sections. It scans your UI to pinpoint unpolished elements, helping you achieve a more cohesive and professional visual design.
Yes, you can use this Skill for pre-redesign analysis to diagnose undiagnosed visual inconsistencies and missing standardized design tokens. It audits your current UI to provide actionable, file-specific fixes before you execute a major redesign.
To fix inconsistent visual design in a frontend project, this Skill performs comprehensive visual audits and extracts standardized design tokens. It delivers actionable fix recommendations pinned to specific file lines, ensuring visual consistency across your web application.
Yes, this Skill applies to styling-related pull request reviews by detecting generic AI slop design patterns and auditing visual consistency. It evaluates UI changes against standardized design tokens to maintain cohesive frontend design standards during code reviews.
vrcmsAnalyze codebase styling patterns to generate design tokens and audit visual consistency.
eburairuReview UI code against Vercel Web Interface Guidelines for accessibility and semantics.
fefogarciaAudits frontend applications for design system consistency and accessibility.
AradotsoSynchronize Figma design tokens and components with code-ready formats.
