Show, Don’t Tell

Like a lot of people, I’m a visual learner. This is especially true when trying to grok a codebase, but why stop there? Visualizing a concept can help even if it’s not systems architecture related, so I decided to write a claude skill to return visual responses to prompts. The skill integrates with Figma’s mcp to generate diagrams in FigJam.

Prereqs:

  • A Figma account (you can use the free tier but the ability to create content will be really limited!)

  • A place to run the skill. I use claude.

  • Figma’s mcp:
    claude plugin install figma@claude-plugins-official

  • The skill! (still in beta in a private git repo. Let me know if you’d like to try it out)
    don’t forget to start a new session after you install the skill!

Rather than outputting an answer to your prompt, this skill will generate a FigJam diagram in response. See below for some examples.

There are two ways to use the skill

1. Explicit slash command

  • /diagram explain why the sky is blue

2. Natural language, auto-triggered

Ask normally, but include a trigger phrase that signals you want the answer itself to be visual rather than written. e.g.:
  • "Diagram this: why is the sky blue?
  • "Show me visually what it means to short a stock on the stock exchange”
  • “Show me the ideal product development lifecycle - answer as a flowchart instead of text"

The initial version output a fairly straightforward mermaid diagram, which wasn’t very useful - there’s not much difference between text in a console and text in a series of shapes connected by arrows - so I rewrote the skill to think about context and what “visual representation” actually needed to mean for the output to be useful. A static representation of the different layers of the earth’s crust, for example, is pretty useful and can be done with a simple cross-sectional diagram (see below); but concepts that have a narrative element, such as the example where I asked “what does it mean to short a stock” require a storyboard output. The skill needs to “know” when to present a description vs tell a story that unfolds over time.

Examples:

  • How does “shorting a stock” work? [click img to enlarge]













  • Describe the earth’s crust and core. Oh - and add the atmosphere and its subregions. [click img to enlarge]














  • What is the ideal product development life cycle? [click img to enlarge]























  • how do LLMs work?









  • Describe the Mandelbrot Set

















  • Why is the sky blue?