{
  "markdown": "<p align=\"center\"><img src=\"logo.png\" width=\"120\" alt=\"logo\" /></p>\n\n**English** | [한국어](README.ko.md)\n\n# superdesign\n\nA master web/mobile designer as a Claude Code skill. Read the intent, pulse current trends, route to the aesthetic that fits, and ship elegant UI that passes a deterministic anti-slop gate and a rendered-verification gate. Asset and trend tooling is self-contained and portable - works without Stitch, gpt-image-2, or web search, degrading gracefully. Rendered verification is the one hard dependency: build modes render the surface with `playwright-cli` (the only render driver); if it cannot be installed, the skill stops and asks rather than faking a check.\n\nLanding page: https://cskwork.github.io/superdesign-skill\n\n## What it adds over a plain design prompt\n\n- **Intent-driven routing.** Classifies the design job into one of six modes and picks the medium + aesthetic family that fit, instead of one default house style.\n- **Trend-aware, not trend-chasing.** A live `WebSearch` trend pulse (with a dated offline snapshot fallback) keeps output current, but only trends that serve the brief are applied. The trend read is recorded with its date.\n- **Anti-slop is enforced, not eyeballed.** A deterministic detector (`templates/anti-slop-gate.mjs`) plus a WCAG contrast gate scan the built source, and a render gate (`templates/render-gate.sh`) proves the surface was actually rendered with `playwright-cli` (hero fit, no overflow, console clean) - not eyeballed from a code block. The designer never self-approves.\n- **Engaging by intent.** When the brief names a primary action (sign up / buy / book), `reference/engagement.md` applies mechanism-backed 2026 conversion craft - useful loading/empty/error states, real-data social proof, outcome-led CTA copy - while editorial and portfolio briefs are left alone.\n- **Built for data-dense apps too.** When the brief is an admin panel / dashboard / console / internal tool, `reference/dashboard.md` flips the defaults to density-first (no marketing hero, app shell + command palette, KPI cards with deltas, headless data tables, tabular numerals, colorblind-safe status, dark-first elevation), grounded in how Linear, Stripe, Vercel, Datadog and the shadcn/Carbon ecosystems are built.\n- **Graceful fallback.** Missing asset/trend tools degrade to documented placeholders and the baked snapshot, never faked assets or invented data.\n\n## Principles\n\n- Elegance is the baseline, not padding.\n- Read the intent first; design to the brief, never a default template.\n- Trend-aware is not trend-chasing; record the trend read, dated.\n- Anti-slop is enforced by gates; the surface is rendered with playwright-cli, never eyeballed; the designer never self-approves.\n- Asset/trend tooling is self-contained with graceful fallback; rendered verification hard-requires playwright-cli (stop and ask, never fake it); never fake assets or data.\n- Hard stops: external publish or destructive steps need explicit consent.\n\n## Modes\n\n| Mode | For |\n|---|---|\n| CREATE | a new UI / landing / app / screen from scratch |\n| REDESIGN | modernize / improve an existing UI (audit-first) |\n| SYSTEM | design tokens / palette / type / theme only |\n| CRITIQUE | review / audit a design (runs the detectors, no build) |\n| EXPLORE | divergent directions / moodboard, commit to none |\n| ASSET | one image / icon / illustration / SVG / logo via the fallback chain |\n\nMedium (web vs mobile/native) is decided in the loop: `reference/web.md` or `reference/mobile.md`.\n\n## Default loop (CREATE / REDESIGN)\n\n1. **Read** the brief; state it in one line.\n2. **Trend pulse** - search current trends (snapshot fallback), record dated.\n3. **Direction** - set dials, pick one system / family / lane, pick the medium.\n4. **Build** to `reference/taste-core.md` + the chosen family/medium; source assets via the chain.\n5. **Critique** (independent) - run `templates/preflight-gate.sh` on the source, render the surface with `playwright-cli` and run `templates/render-gate.sh`; log every violation.\n6. **Verify** - fix, re-run both gates until green, report with output.\n\n## Examples\n\n```\n/superdesign a calm landing page for a developer-tools startup\n/superdesign redesign this admin dashboard to feel less generic\n/superdesign a design system: tokens for a fintech app, light + dark\n/superdesign critique this page  (paste code / URL / screenshot)\n/superdesign explore 3 directions for a portfolio\n/superdesign a hero illustration for an AI note-taking app\n```\n\n## The gates\n\n```bash\n# scan any built UI source for the machine-checkable AI tells\nnode templates/anti-slop-gate.mjs path/to/index.html\n\n# WCAG contrast on the enumerated text/bg pairs\nnode templates/contrast-gate.mjs contrast-pairs.json\n\n# full static pre-flight on a surface vault (claims + anti-slop + contrast)\nbash templates/preflight-gate.sh <vault-dir> path/to/index.html\n\n# rendered-verification gate: the surface was rendered with playwright-cli (Tool line + screenshot + clean console)\nbash templates/render-gate.sh <vault-dir>\n```\n\nA vault is the per-surface work dir (default `.superdesign/<surface>/`) holding `claims.md`, `contrast-pairs.json`, and a `render/` dir of screenshots; start `claims.md` + `contrast-pairs.json` from `templates/`. The static gate scans source; the render gate confirms the Critic actually painted the page with `playwright-cli` - the only sanctioned render driver, no fallback.\n\nPer-line escape hatch: a line containing `taste-ok` suppresses the detector for a deliberate, justified choice (e.g. a neutral Inter read).\n\n## Install\n\n```bash\ngit clone <superdesign-skill-repo> ~/skills/superdesign-skill\nln -s ~/skills/superdesign-skill ~/.claude/skills/superdesign\n```\n\nThen `/superdesign <design intent>` in Claude Code.\n\n## Test\n\n```bash\nbash tests/gate-scenarios.test.sh\nbash tests/reference-links-contract.test.sh\nbash tests/mode-routing-contract.test.sh\nbash tests/asset-fallback-contract.test.sh\n```\n\n## Credits\n\nBuilds on the sibling [supergoal-skill](https://github.com/cskwork/supergoal-skill) (structure, contrast gate). Anti-slop rules adapt [taste-skill](https://github.com/leonxlnx/taste-skill) (MIT); anti-pattern concepts distill [impeccable](https://github.com/pbakaus/impeccable) (Apache-2.0, no code copied); asset/landing flow draws on [stitch-landing-skill](https://github.com/cskwork/stitch-landing-skill) (MIT). Full attribution in `reference/sources.md`. License: MIT.\n",
  "bytes": 6427,
  "sha": "032d03ee324123bb4aa409360f595bf7c5ae9677ec015c2408618728f94d27d7",
  "repo_slug": "cskwork/superdesign-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_cskwork_superdesign_skill_61ad5588/readme"
}