More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsAward-Level Websites: Art Direction + Anti-Slop Design QA
Your agent designs websites that don't look AI-made, then proves it: 12 art directions, WCAG-verified tokens, original art, a motion kit and a 155-check design QA with screenshots.
$9.99
Award-Level Websites: Art Direction + Anti-Slop Design QA
Example session with this skill installed
Build a landing page for my coffee roastery, Saltbush in Cape Town. We sell subscriptions (that's the main goal) and run a small café. I don't want it to look like every other AI-made site. Facts and prices are in notes.md.
- Read your context and instructions
- Compiled the award-level websites
- Generated the UI component
Done: saltbush/site/ scores 100/100 (A) on the design QA, with 0 AI tells and 0 blockers, checked in a browser at 1440, 834 and 390 px.
Direction: Organic Handmade, re-cut to avoid the coffee cliché. For a roastery, the predictable AI look is cream paper, a serif headline with one italic word, terracotta and bean icons. I went the other way:
- a deep moss ground with one honey accent;
- Caprasimo, a chunky 70s display face that nods to your restored 1970s roaster, with Karla for text;
- saltbush-leaf silver as a second ground.
Organic was in the top three on board.html; I chose it over Swiss Poster because moss and honey carry warmth without cream.
The page (8 sections, chapters grammar)
1.
Hero: "Coffee roasted on Tuesday, posted by Thursday." Beside it, a drawn cooling tray of beans that turns slowly as you scroll, and a live "Next roast" date.
2. The four origins and Harbour, set huge as an index with process and tasting notes.
3. A quiet section: the founders and the 12 kg drum.
4.
The signature move (the peak): a green bean roasts to brown as you scroll, while a ring closes Farm → Drum → Post → Door.
5. Thandi's quote on a honey block.
6. Three plans with bags drawn to scale (R149 / R279 / R499).
7. The café menu, hours, Saturday cupping and the address.
8. Close: the next roast date and "Start a subscription".
Checks
Audit: 100/100 static and with the rendered checks merged in. Every text pair passes WCAG AA, CLS stays under 0.1, and there's no overflow at any width.
- No JavaScript or reduced motion: the bean rests roasted and all four steps are listed.
- Fingerprint gate: passed and logged in FINGERPRINTS.md, so your next site can't repeat it.
Before you launch, please confirm (from claims-to-confirm.md):
- Thandi's quote and permission;
- every price, time, date and contact detail on the page (28 more items, each with its line number);
- the domain and the phone number.
Files: site/ (index.html, assets, 3 drawn SVGs, og.jpg, favicon), design/ (direction.md, board.html, tokens.css/json, Tailwind, DESIGN.md), qa/ (report.html, fixes.md, contact sheet, screenshots), BRIEF.md.
Next steps:
- Confirm the claims.
- Point the plan buttons at your checkout.
- Deploy
site/to any static host.
board.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's websites look AI-made. This skill fixes that, and proves it with a score.
Agents build the average of every site they have seen. In 2024 that was Inter, a purple gradient and emoji cards. In 2026 it's cream paper, a serif headline with one italic word, mono "01 /" labels and pill buttons. Both read as generated, and most "award-winning design" prompts only fight the first one.
This skill gives your agent an art director's process and the tools to back it up. The scripts make the design system and the art, then measure the page. Your agent makes the decisions, writes the copy and builds.
What you get
- 12 art directions, ranked for your business. Swiss Poster, Organic Handmade, Architect Monograph, Pop Sticker, Cinematic Noir, Clinical Calm and six more, each with seeded font pools and palette variants. Directions that sit too close to your industry's AI cliché are held back, with the reason given.
board.htmlshows the top 3 as mini heroes set in your brand name before any code exists. - A verified design system. Every colour pair is repaired to WCAG (body 7:1, secondary 4.5:1, UI 3:1), with a fluid type and space scale. Exports to CSS variables, Tailwind v4
@theme(default palette removed), Tailwind v3 config, W3C DTCG tokens, Google DESIGN.md and WordPress theme.json. Bring your own brand with--existingor--palette. - Original art, no stock photos. Seeded SVG plates in your palette (topographic, flow-field, ridgeline, halftone, Bauhaus shapes, dither, layered depth for a parallax hero), plus a monogram, favicon and OG card.
- A zero-dependency motion kit. Pinned stages with cues, horizontal rails, clip wipes, split and fit-to-width headlines, colour drift, a magnetic CTA and counters. Every scroll act publishes a
--pprogress variable for the one signature move each site gets. It works with JavaScript off and with reduced motion. - A fingerprint gate. Each site is logged on 7 design dimensions, and a new plan must differ from every earlier build. A reworded copy still fails, so your client sites never come out looking alike.
- A 155-check design QA across craft and anti-slop, accessibility, responsive, performance, SEO & share, and conversion. It gives a 0–100 score with Gen-1 and Gen-2 AI tells named down to
file:line, plus a client-ready report, fixes ranked by points gained (with code), a critique sheet, a badge, and a claims-to-confirm list that catches invented stats and placeholder testimonials.--min 90turns it into a CI or Stop-hook gate. - Rendered QA (optional). Screenshots at 1440, 834 and 390 px in normal, no-JS and reduced-motion passes, checked for overflow culprits, clipped text, tap targets, pixel-sampled contrast, fonts that never loaded, CLS, dead scroll, and reveals that never fire.
- A one-second demo. One coffee roaster built three ways: the 2024 default (39/F), the 2026 default (64/D) and the art-directed rebuild (100/A), side by side.
Proof, not promises
Four complete sites were built by agents following SKILL.md: a coffee roaster, a SaaS, an architecture studio and a music festival. They use four different directions, each has one bespoke scroll moment, and all score 99–100 with zero AI tells. See the screenshots.
Why it beats a design prompt
| A "world-class designer" prompt | Award-Level Websites |
|---|---|
| "Be bold" | 12 ranked art directions with verified tokens |
| Catches the 2024 look at best | Scores 2024 and 2026 AI tells separately, with line numbers |
| Same agent, same taste, same site | A fingerprint gate enforces variety in code |
| Stock photos or empty boxes | Original palette-locked SVG art |
| "Looks good to me" | 155 checks, screenshots at 3 widths, a score and a gate |
| Made-up stats and testimonials | An honesty gate with a claims-to-confirm list |
Requirements
An agent that can run code with Python 3.8+. Standard library only: no installs, no API keys, offline. Screenshots use Playwright if you already have it.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed 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 scanned
Verified clean 7 days ago
- Passed all security checks, Safe to install
Requires
Node.js