Same prompt. Different designer.

Your coding agent ships the same page as everyone else's. Super-Webdesigner makes it ask you a brief, research the niche, show three directions and wait for your pick before it writes a line.

npx skills add JouberthAlves/super-webdesigner

Made for

  • Claude Code
  • Codex

Works with

  • Cursor
  • Windsurf
  • Antigravity
Other agents: see Install

The comparison

PromptBuild a landing page for an AI meeting-notes app.

Steno, made through Super-Webdesigner: a yellow legal pad with a red margin line, the title 'Stop typing in meetings.' and a notes card writing itself Super-Webdesigner
Other agents, a labeled caricature: dark purple page with a grid, a glowing serif italic title, emoji and three numbered cards Other agents · caricature

The red pencil

Ten things it crosses out.

Each one alone looks like a choice. Three together and the page reads as made by AI. The skill checks all ten on the full page before anything ships.

  1. Purple-to-blue gradients
  2. A serif title by default
  3. Grid and dot backgrounds
  4. Three generic benefit cards
  5. Emoji in the copy
  6. Glow on everything
  7. Hero, cards, testimonials, FAQ
  8. Thin generic icons
  9. Nothing moving
  10. 01 / 02 / 03 on things with no order

How it works

It asks before it draws.

A fixed flow with three stops. At each one the agent waits for you.

  1. Discover the tools

    Lists the skills, MCP servers and browser it has, and what's missing, with the install command. Nothing gets installed without a yes.

  2. The brief

    Four questions, with options to click: a real object for the palette, one feeling, two influences to collide, what it must never look like. The cost of the mockups comes in the same message.

    Stop · you answer

  3. Research the niche

    Real sites, split into what visitors expect (kept) and what everyone repeats (avoided).

  4. Three directions

    Gray skeletons for phone and desktop, and a colored mockup each: the best of the niche, one that breaks it, one from outside it. Each with its logo, favicon and motion.

  5. You choose

    One question: which of the three, or what to mix.

    Stop · you choose

  6. Write it down

    The direction becomes a file: palette, fonts, the wildcard element, the motion. It is the contract for the build.

  7. Build

    Half the effort on the first screen, with the motion the direction asked for.

  8. Review, then you judge

    Full-page screenshots at 1440 and 390 px, the ten tells, a design critique, forms, contrast. Nothing is published before you say so.

    Stop · you judge

The proof sheet

From the prompt to Steno.

Three gray skeletons for Steno: Reporter's Notebook, Live Captions and Steno Tape
No. 2 · Three directions in gray. Composition first, color only in the swatches.
Mockup A, Reporter's Notebook: a yellow legal pad with a notes card
A · Reporter's Notebook · chosen
Mockup B, Live Captions: a video call with a caption bar
B · Live Captions
Mockup C, Steno Tape: a stenotype tape running down the page
C · Steno Tape

Every file, from the brief to the mockups, is in examples/, including the untouched normal-agent output for comparison.

The vault

Why an Obsidian vault.

An agent forgets everything when a session ends. The vault is where it keeps what it learned, so the next session starts from there.

Without a memory, the agent makes the same mistakes again, ships the same look again and asks the same questions. The vault is a folder of plain Markdown: the agent reads it at the start of each session, and writes to it when something goes wrong or right.

Obsidian is recommended, not required, for three reasons:

  • You can read and edit the rules by hand. Every rule is one line in a note you can open, change and search.
  • The links show the history. A mistake points to the rule it became, and the rule points to the project where it was learned.
  • It is plain Markdown. Any agent can read it, and it goes into git like any other folder.

Claude Code can also re-inject the rules after the context is compacted, so a long session doesn't lose them (optional hook).

  • 90 System/Agent rules.mdEvery rule in force, one per line. The only file read every session.
  • 90 System/Mistakes.mdWhat went wrong, with the one-line rule it became.
  • 90 System/Wins.mdWhat you praised, turned into a pattern for the next project.
  • 10 Notes/The brief, research, skeletons, anti-patterns and design rules.
  • 20 Projects/One note per project, so the same style is never shipped twice.

Setup: copy vault/, open it in Obsidian with "Open folder as vault", and run your agent inside that folder. Details in vault/README.md.

Install

Two skills. Pick your agent.

Claude Code

npx skills add JouberthAlves/super-webdesigner -g -a claude-code

Codex

npx skills add JouberthAlves/super-webdesigner -a codex

Cursor

npx skills add JouberthAlves/super-webdesigner -a cursor

Windsurf

npx skills add JouberthAlves/super-webdesigner -a windsurf

Kiro

npx skills add JouberthAlves/super-webdesigner -a kiro-cli

Qoder

npx skills add JouberthAlves/super-webdesigner -a qoder

Antigravity

npx skills add JouberthAlves/super-webdesigner -a antigravity

GitHub Copilot

npx skills add JouberthAlves/super-webdesigner -a github-copilot

Any other agent

No skill support? Add one rule: "for any site or UI, read skills/super-webdesigner/SKILL.md and follow it."

With Claude Code, ask for a site the way you always do. The skill takes it from there.