No Slop Design

Senior product-design workflow for web and mobile UI that avoids generic "AI slop" and produces token-based, accessible, platform-correct design with a deliberate visual anchor. Use when asked to design, redesign, review, or "make it look better" for any screen, app, landing page, component, or design system; when building UI from scratch; when a design system or brand must be adopted or created; when generating design tokens, moodboards, or design specs; or when output must not look AI-generated. Runs discovery (market, audience, existing design system) → mini research → moodboard → tokens →

10 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add agshinrajabov/no-slop-design --skill no-slop-design

Manual install

git clone --depth 1 https://github.com/agshinrajabov/no-slop-design.git /tmp/no-slop-design
mkdir -p ~/.claude/skills
cp -r /tmp/no-slop-design/. ~/.claude/skills/no-slop-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# no-slop-design

You are the design lead on this work, not a component assembler. The single question behind every decision is:
**was this chosen, or did it happen?** Anything that "happened" (a default font, a template layout, a gradient
nobody asked for, a page with no visual decision, a page stuffed with photographs nobody chose) is slop and gets replaced by a decision
traceable to the brief, the research, or the platform.

This file is the router. The depth lives in `references/`; load a reference **only at the step that needs it**.
Read the sections the step names; skim the rest by its table of contents.

## Non-negotiables

1. **No pixels before a brief.** Fill `templates/design-brief.md` (or confirm an existing one) first.
2. **Ask four things before anything else** (one message, pre-filled from what you detected): **(a)** which market,
   country, and language(s) the audience is in — the page is written in that market's primary language unless the
   user says otherwise; **(b)** whether an existing or preferred design system exists (Figma
   library link, Storybook, tokens file, component library, brand guide) or whether we build one; **(c)** the one
   thing a first-time viewer should remember; **(d)** how much visual ambition the piece should carry — the
   **expression register** R1 Utility / R2 Composed / R3 Expressive / R4 Experimental, with your recommendation and

Read the full skill on GitHub

Details

Skill name: no-slop-design
Repository: agshinrajabov/no-slop-design
License: MIT
Repo updated: 25 September 2026

FAQ

What does the No Slop Design skill do?

How do I install the No Slop Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add agshinrajabov/no-slop-design --skill no-slop-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is No Slop Design popular?

It lives in agshinrajabov/no-slop-design, which has 10 GitHub stars and 1 forks.

Related skills

Premium Web Design

Lucxar/premium-web-design-skill

Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating hero sections, improving visual hierarchy, adding animations, or optimizing web aesthetics.

Frontend & Design

Motion Graphics

acelera-agency/html-animation

Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export them to MP4 in 1:1, 4:5 and 9:16. Use this whenever someone wants to animate a wordmark or logo, make a video from text, build a title sequence or lower third, produce a clip for LinkedIn / Instagram / Reels / TikTok, "turn this design into a video", animate a landing-page hero, or export a web animation to a video file — and also when an existing animation of this kind needs fixing, retiming, rest

Frontend & Design

Senior Designer

sshahzaiib/senior-designer-skill

Act as an evidence-based senior product designer for any UI/app design or build task. Use this skill whenever the user wants to design or build an app, screen, page, component, landing page, dashboard, onboarding flow, or any user interface — web or native iOS (SwiftUI) — even if they only say "build me X" without mentioning design. Also use when the user complains that a UI looks generic, AI-generated, or ugly, or asks for design review, redesign, color/typography/layout decisions. Every rule inside is sourced from 158 vetted design publications (Apple HIG, WCAG, NN/g research, Bringhurst, No

Frontend & Design

Liquid Glass Frontend

ngocanhnckh/liquid-glass-frontend-skill

Use when building a beautiful, distinctive, awwwards-tier web frontend — landing pages, dashboards, web apps, marketing sites — that needs Apple-style liquid-glass surfaces, choreographed motion.dev animations, and creative editorial layouts instead of the generic SaaS look (icon-card rows, centered heroes, default fonts, uniform fade-ins). Covers creative direction and signature interactions, the frost/blur glass material, single-source color tokens with dark+light theming, scroll/stagger/parallax/scroll-scrubbed animation, type-as-hero typography, and asymmetric grid-breaking composition.

Frontend & Design

A2ui Adk

coolxeo/a2ui-adk

Build agents that generate rich, interactive UIs using Google's A2UI (Agent-to-User Interface) format with Google ADK (Agent Development Kit). Use when building ADK agents that need to render dynamic UI components, forms, cards, lists, or interactive elements via the A2UI declarative JSON format. Includes a Tailwind CSS + shadcn/ui design system flavor for creating beautiful, modern A2UI catalogs and components. Covers A2UI schema management, catalog configuration, A2A transport integration, response parsing/validation, custom catalog creation, and the orchestrator pattern for multi-agent UI r

Frontend & Design

Character Animation

karem505/character-animation-skill

Turn a static character or asset image into a looping animated character, delivered as a moving SVG plus animated WebP and GIF. Use this whenever the user wants to animate, bring to life, or "make move" a character, mascot, logo, creature, sprite, icon, or any asset image — or wants a moving/animated SVG, WebP, or GIF made from an image — or mentions generating a sprite sheet animation, or names "Nano Banana 2" / Gemini image generation for animation. Also use it to convert an EXISTING sprite sheet (a grid of frames) into those animated formats. Trigger even when the user just says things like

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.