Devsloka UI / Agent skill

Anti-Slop.

Landing pages that look designed, not generated. Your AI agent builds the page from Devsloka parts, screenshots every section and redesigns anything that reads as AI slop.

$npx skills add devsloka/ui-devsloka --skill devsloka-anti-slop
Download .zip Source on GitHub MIT · Free

01

Install it three ways

  1. With the skills CLI

    Run this in your project. It adds the skill to the project's agent folder, for example .claude/skills.

    $npx skills add devsloka/ui-devsloka --skill devsloka-anti-slop

    To make it available in every project, install it globally:

    $npx skills add devsloka/ui-devsloka --skill devsloka-anti-slop -g

  2. Download the zip

    devsloka-anti-slop.zip unpacks into a devsloka-anti-slop folder. Put that folder in your project's skills directory:

    mkdir -p .claude/skills
unzip devsloka-anti-slop.zip -d .claude/skills

    Use ~/.claude/skills instead to make it available in every project.

  3. Copy from GitHub

    The source lives in skills/devsloka-anti-slop in the Devsloka UI repository. Copy that folder into your project, or commit it so your whole team gets it.

    git clone --depth 1 https://github.com/devsloka/ui-devsloka.git /tmp/devsloka-ui
mkdir -p .claude/skills
cp -R /tmp/devsloka-ui/skills/devsloka-anti-slop .claude/skills/

AgentClaude Code, or any agent that supports SKILL.md skills.

RuntimeNode.js 22 or newer for the audit scripts.

BrowserChrome, Brave, Edge or Chromium for screenshots. Set CHROME_PATH if it isn't found.

02

Eight steps, from brief to verified page

  1. 01

    Brief

    Collects the product, the audience, one to three concrete facts and the action the page should drive. Specific inputs are what keep the output from looking generic.

  2. 02

    Art direction

    Picks one of seven presets, commits to a single concept and plans one signature moment before writing any code.

  3. 03

    Compose

    Maps each section to a Devsloka block or component and each feature to a Linework figure, with rules that stop the page from feeling templated.

  4. 04

    Install

    Adds every part through the shadcn CLI from ui.devsloka.in and linework.devsloka.in, then reads each installed file's props before using it.

  5. 05

    Build

    Themes once from a single brand file and fills every block through props with specific copy. Where props aren't enough, it edits the installed components to fit your brand and layout, and writes custom sections in the library's own style.

  6. 06

    SEO and responsive

    Metadata, an Open Graph image, JSON-LD, exactly one h1, a sitemap, fluid type and real mobile layouts.

  7. 07

    Verify

    Scans the code for slop patterns, screenshots every section at 375, 768, 1024 and 1440 pixels, scores them against an eight-point rubric and redesigns the ones that fail.

  8. 08

    Hand over

    Reports the direction, the section-by-section map, invented placeholder facts to replace and the final audit.

03

Ask for a page the way you'd brief a designer

The skill starts when you ask your agent for a landing page, a product page or a redesign. You don't need to name it. The more real facts you give (numbers, prices, customers, how the product works), the less the agent has to invent. Name a style or a reference site to pick a preset; if you don't, the agent asks or chooses one and explains why.

  • I'm launching Driftwire, an open-source feature flag service. Self-host free or $29/month cloud, SDKs for TypeScript, Go and Python, flags evaluate locally in under 1ms. Build the landing page and make it feel like Linear.
  • Build a landing page for Northbound, a six-person motion studio in Lisbon that makes launch films for fintech and climate startups. Awwwards energy, but fast and good for SEO.
  • Make a landing page for Margin, a note app for medical students that turns lecture slides into flashcards. Free for students, $6/month Pro. Warm and friendly, no purple AI gradients.

Every invented detail, such as a statistic, testimonial or link, is listed in the agent's final message so you can replace it before launch.

04

Seven art directions to start from

A preset sets the tokens, type, section recipe and motion budget. It names a quality, not a brand to copy: ask for “like Linear” and you get that level of precision with your own brand, words and layout.

Art-direction presets and how to ask for them
PresetQualityAsk with
precisionEngineered calm: dark, dense, exact“like Linear”, “clean dark SaaS”, devtools
editorialA well-designed magazine: serif type, rules and captions“editorial”, “magazine”, publishing, research
kineticType as image and scroll as narrative“Awwwards”, “bold”, agencies, launches
swissA visible grid, flush-left type and one loud colour“Swiss”, “poster”, design tools, events
paperWarm and friendly, illustrated with line art“like Notion”, “warm”, education, docs
brutalistExposed structure, heavy borders, mono type“brutalist”, “raw”, indie tools
tactilePremium product: the object is the hero“like Apple”, hardware, D2C products

05

It checks its own work with screenshots

Scan the code

slop-scan flags purple gradients, gradient text, blurred blobs, emoji icons, transition-all, leftover demo copy and about thirty stock marketing phrases that make a page read as machine-written.

Shoot every section

The audit captures each section at four widths and reports overflow, missing SEO, console errors, off-grid spacing, radius drift and small tap targets.

Score and redesign

The agent scores each screenshot on distinctiveness, type, spacing, colour, composition, copy, craft and mobile. Any section that scores below 4 on distinctiveness or composition is redesigned, not just polished.

You can run both scripts yourself on any project, for example after editing a page by hand:

node .claude/skills/devsloka-anti-slop/scripts/slop-scan.mjs src
node .claude/skills/devsloka-anti-slop/scripts/audit.mjs http://localhost:3000 --out /tmp/audit

06

What's in the folder

  • SKILL.mdThe workflow the agent follows
  • references/catalog.mdEvery Devsloka block and component, with its section slot, motion weight and props
  • references/customize.mdHow to adapt installed components safely, plus known fixes per component
  • references/presets.mdSeven art directions with tokens, fonts and section recipes
  • references/linework.mdAll 94 Linework figures, mapped from feature concepts
  • references/ascii.mdTurning a brand mark into an interactive particle hero
  • references/craft.mdSpacing, type, colour, density and responsive rules
  • references/motion.mdWhen to use Motion, GSAP or three.js, plus easing and budgets
  • references/seo.mdMetadata, structured data and Core Web Vitals
  • references/anti-slop.mdThe ban list, the screenshot rubric and fixes
  • scripts/slop-scan.mjsStatic scan for slop patterns in your code
  • scripts/audit.mjsSection screenshots and quality checks in a local headless browser

07

Built on the Devsloka toolkit

  • Devsloka UI

    Blocks and animated components for every section, from hero to footer, installed with the shadcn CLI.

  • Linework

    94 interactive line illustrations. The skill picks the figure whose metaphor matches each feature.

  • ASCII

    A studio that turns a brand mark into an interactive particle field for the hero.

08

Questions

Is the skill free?

Yes. It is MIT licensed like the rest of Devsloka UI, and you can edit your copy however you like.

Which AI agents does it work with?

It is a standard agent skill: a folder with a SKILL.md file. Claude Code loads it from .claude/skills in your project or ~/.claude/skills for every project, and the skills CLI can also install it for other agents that support skills. The bundled scripts need Node.js 22 or newer.

Do I need a Next.js project?

The workflow targets Next.js with the App Router, Tailwind CSS v4 and shadcn on Radix. If you start from an empty folder, the agent scaffolds that setup first. The audit script works against any URL.

Does it send my code anywhere?

No. Both scripts run on your machine, and the audit drives a headless Chrome, Brave, Edge or Chromium that is already installed. The only network requests are the component installs from ui.devsloka.in and linework.devsloka.in.

How long does a page take?

In our tests a complete page took 12 to 18 minutes, including two to four screenshot review rounds. The review rounds are where weak sections get redesigned, so they are worth the time.

Why do I export the ASCII particle mark myself?

ASCII is an interactive studio without a command-line export. The agent prepares your logo as a clean SVG, suggests settings and builds a static fallback, so the page looks finished before you paste the exported component in.

Will it change the Devsloka components in my project?

When it needs to, yes. Installed components are your code, so the agent edits them to fit your brand and layout: restyling, turning hard-coded content into props, adding slots, re-laying them out for mobile and fixing known bugs. It keeps accessibility, reduced motion and types intact, and lists every edited file in its final message, because running shadcn add again for that component would overwrite the changes.

Can I add my own presets or rules?

Yes. Presets live in references/presets.md and the ban list and rubric in references/anti-slop.md. Change them in your copy and the agent follows your version.

Is this the AI skill planned for Pro?

No. This free skill composes landing pages from the open library. The Pro skill is a separate tool for reshaping individual components to fit your design system.