Skip to content
Get packs

Explain Interface

Explains how a website, visual effect or animation was built, from a live URL or screenshot

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
6 files

What it does

When you ask how something on a website was made, such as a gradient, glow or animation, the agent works out the layers and techniques behind it and explains each one in plain terms. It can read a live page through a browser or the page's source, or estimate a reconstruction from a screenshot, and it says which method it used and how confident each claim is. It explains rather than grading the design.

Great for

  • Designers who want to understand how a visual effect on a site was achieved
  • Front-end developers reverse-engineering a particular animation or layered style
  • Students learning how modern web interfaces are constructed

Skip it if

  • Judging whether a site's design is good: the skill explicitly declines to give verdicts, so use a review skill instead
  • Producing an exact copy of someone else's site, since the output is described as a lookalike and the skill avoids code that rebuilds the effect
  • Screenshots when you need the real code: an image only supports an estimate of how something could be built

Try asking

  • “How was the gradient on example.com built?”
  • “Explain the layers behind the blurred glow in this screenshot”
  • “How is the text fade-in animation on this landing page made?”
  • “Read the frontend stack of this website: framework, styling and fonts”
Step-by-step guide: how to use Explain InterfaceInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    explain-interface.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip explain-interface.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip explain-interface.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give a specific question and a specific element or effect, such as one gradient, rather than asking about a whole site, so the answer stays focused
  • Provide the live URL instead of a screenshot whenever possible, because the page source gives measured values rather than estimates
  • Ask for the browser route when the effect depends on hover, scrolling, canvas or runtime-injected styles

What's inside

  • agents/openai.yaml
  • find-the-effect.md
  • from-an-image.md
  • no-browser.md
  • read-the-system.md
  • SKILL.md

Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.