skills.rest
ReviewStage
ReviewStageOFFICIAL
Explore all skills by this author →
GitHub

deslop-ui

Enforce spacing, typography, color, and layout rules for UI design systems.

259|24|Updated Apr 26, 2026
Search Tags:#typography#accessibility#ui-design#design-system#spacing#premium#intentional-design
One-click install
npx skills add https://github.com/ReviewStage/stage-cli --skill deslop-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: deslop-ui
Source: https://github.com/ReviewStage/stage-cli/tree/main/.agents/skills/deslop-ui
Command: npx skills add https://github.com/ReviewStage/stage-cli --skill deslop-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes UI design quality by enforcing a disciplined system for spacing, typography, color, and component consistency to avoid vibe-coded results.

Core Features & Use Cases

  • Enforces a strict spacing rhythm (4-point or 8-point scale) across layouts.
  • Defines a unified typography scale with a single heading and body font.
  • Maintains a small, disciplined color palette to reinforce hierarchy.
  • Use Case: Design system reviews, component libraries, and page audits.

Quick Start

Provide a premium UI design brief for a new page and implement it following the system’s spacing, typography, and color rules.

Frequently Asked Questions about deslop-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize UI spacing and typography for a consistent design system?▼

Standardize UI spacing and typography by enforcing a strict 4-point or 8-point spacing rhythm and using a unified typography scale with a single heading and body font. This ensures consistent layouts and prevents fragmented visual hierarchy.

What is the best way to maintain a disciplined color palette in UI component libraries?▼

Maintain a disciplined color palette by restricting your UI design to a small, intentional set of colors that reinforce visual hierarchy. This approach keeps component libraries consistent and avoids distracting, vibe-coded interfaces.

Can I use this premium UI design system for mobile projects and web pages?▼

Yes, you can apply this premium UI design system to both mobile projects and web pages. It standardizes spacing, typography, color, and layout rules across platforms to ensure a consistent design language and accessibility.

How do I audit an existing page for premium UI design and accessibility compliance?▼

Audit an existing page by checking its components against strict spacing, typography scale, and color palette rules. This design system review enforces intentional design choices and satisfies accessibility requirements for consistent layouts.

Does this UI design system work without external dependencies or component libraries?▼

Yes, this UI design system works without external dependencies or component libraries. It operates as a standalone set of rules for spacing, typography, and color to help you build and review premium UI components from scratch.

Why does my UI layout feel inconsistent even when using a design system?▼

Your UI layout feels inconsistent if it lacks a strict spacing rhythm and unified typography scale. Enforcing a disciplined 4-point or 8-point grid and a single body font standardizes component alignment and restores visual hierarchy.

Related Skills

Explore More Design & Creative Skills→
staruhubstaruhub
662

ui-analyzer

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

Community
Intermediate
Anuj23105Anuj23105
1

component-library-management

Audit React components and generate structured inventory documentation.

Community
Intermediate
KentoShimizuKentoShimizu
7

visual-design

Create a reusable visual spec with color, typography, spacing, and grid rules.

Community
Intermediate
spartDevspartDev
6

Design System Violation Detector

Detect design-system violations in React components against DESIGN_GUIDELINES.md.

Community
Advanced