More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsNex Design: UI That Doesn't Look AI-Generated
Makes your agent design landing pages and app UI like a studio with an opinion: brief card, 12 themes, 14 structures, 56 slop gates.
$19
Nex Design: UI That Doesn't Look AI-Generated
Example session with this skill installed
nex audit ./index.html — it's the landing page for Kilnworks, our pottery studio in Ghent (wheel classes + a small shop). It feels generic. Tell me what to fix first.
- Read your context and instructions
- Compiled the nex design
- Generated the UI component
Summary
Audited index.html (Kilnworks pottery studio) against the Nex slop gates.
29 / 50 applicable gates pass. The page is technically sound but reads as a generic SaaS template: the swap test fails, because a yoga studio could reuse it by changing the logo. No files were changed.
Top 5 fixes, ranked by visual impact
| # | Gate | Finding | Fix |
|---|---|---|---|
| 1 | S1 / S3 | Hero is a centred headline + two buttons on an indigo→violet gradient, followed by the hero-features-testimonials-pricing stack | Switch to a menu-card structure: the class schedule is the hero, with dates, spots left and price per class |
| 2 | C1 / C5 | Purple gradient and pure grey neutrals have nothing to do with clay | Custom theme from the artefact "a kiln log book": raw clay #B5835A, glaze teal #2F6F6A, ash neutrals tinted warm |
| 3 | S2 | Three identical icon cards ("Expert teachers / Small groups / All levels") | One lead block for the beginner course at double width, two supporting rows; replace icons with real photos of hands on the wheel |
| 4 | W1 / W2 | Headline "Unlock your creativity" + "seamless booking experience" | "Six evenings, one wheel, your own mug at the end." Button: "See this month's classes" |
| 5 | W4 | "Loved by 2,000+ students" with no source | Remove, or replace with [student count from studio] until you have the real number |
Full gate table (excerpt)
| Gate | Result | Note |
|---|---|---|
| T1 | FAIL | Inter only, no typographic character |
| T2 | FAIL | Display only 1.9× body |
| D1 | FAIL | 16px radius on every element |
| D3 | FAIL | Two blurred colour blobs behind the hero |
| M1 | FAIL | Fade-up on 28 elements |
| K1 | PASS | Semantic landmarks present |
| K4 | PASS | No horizontal scroll at 375px |
| K5 | PASS | Focus ring visible, targets ≥ 44px |
| C6 | PASS | Body text contrast 9.8:1 |
Next steps
Run nex redesign ./index.html to keep all your copy, navigation and logo while rebuilding the structure and theme with the fixes above. Expect the brief card first:
Subject: Pottery studio in Ghent: wheel classes + small shop
Audience: Locals booking a first class, mostly on mobile
One feeling: Earthy
Signature: Class schedule styled as a kiln log, with firing dates
Structure: menu-card
Theme: Custom — artefact: kiln log book
index.html
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Your agent designs the average of every landing page it has seen. Nex Design stops that.
Ask any coding agent for a landing page and you get the same thing: purple gradient hero, three identical icon cards, "Supercharge your workflow", fade-up on every element. Nex Design is a SKILL.md that makes your agent decide for this brief before it writes a line of CSS, and then check its own work against 56 concrete anti-slop gates.
Four verbs
| Command | What it does |
|---|---|
| (default) build | Design Brief Card → page structure → theme → build → slop gates → 4-line rationale |
nex audit <file/URL> | Scored punch list against the gates, top fixes ranked by visual impact. No edits. |
nex redesign <file/URL> | Keeps your copy, navigation and brand colour; replaces structure, type, colour and rhythm |
nex study <screenshot/URL> | Extracts the design DNA of a reference (structure, type pairing, colour anchor, signature move). Never a pixel clone. |
What's inside
- Design Brief Card: subject, audience, one feeling, signature move, structure and theme, written before any code
- 14 macrostructures (editorial longread, menu card, product tour, broadsheet, index catalogue, poster…). The hero-features-pricing stack is never the default.
- 12 coherent themes (Ink, Workshop, Signal, Garden, Riso, Gallery, Carnival, Ledger, Atmospheric, Brutal, Soft-Tech, Nocturne), each a full set of palette, type pairing, surfaces and signature moves
- Custom theme protocol for briefs no theme fits: pick a real-world artefact, translate it into tokens, write three "never" rules
- 56 slop gates across structure, typography, colour, surfaces, copy, imagery, motion, code and self-critique
- Craft reference: token skeleton, type scale, tinted neutrals, layout rhythm, motion rules, copy formulas
Built-in honesty and accessibility
No fake testimonials, invented stats or "Trusted by" logo walls; it uses clearly marked placeholders instead. WCAG AA contrast, visible focus states, semantic HTML, prefers-reduced-motion and 375px mobile layouts are non-negotiable.
Works with
Claude Code, Codex CLI, Cursor, Gemini CLI, VS Code Copilot and any agent that reads the SKILL.md standard. No scripts, no network access, no dependencies: pure instructions and reference files.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.
Cannot clone pixels or copy paid templates. Refuses to generate fake social proof (logos/testimonials). Requires specific briefs to avoid falling back on inferred design assumptions.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 16 days ago
- Software
Node.js
Permissions
Reads the files you point it at (for audit, redesign and study) and writes the HTML/CSS it builds into your project. No shell commands, no network access, no environment variables, no external services.