Claude

100%

✓ Published0🌍 Public

Last edited Dec 1, 2025

Created on Dec 11, 2025

This interactive explainer demonstrates three distinct AI prompting strategies—prompt crafting, financial stock analysis, and research-driven coding—within a single glassmorphism-styled interface. Users trigger scenarios through buttons to compare system-prompt variations and observe real-time behavioral outputs. The visualization combines custom CSS gradient overlays with frosted-glass panel effects, while JavaScript handles scenario switching and dynamic feedback logs. Code snippets are rendered as formatted markdown blocks, showing users practical prompt structures they can adapt for their own AI workflows.

AI-generated description

Similar vizzes

Loading thumbnail…

Lyra - AI Prompt Optimization Specialist

A visualization of Lyra, an AI prompt optimization specialist, shows a flow diagram of its four-stage methodology and decision paths. The gist renders Lyra’s decision tree using a force-directed network layout via `d3.forceSimulation`, with nodes for modes, techniques, and response formats. Edges highlight the transition from deconstruction to delivery, while the imported `lyra.txt` text provides the content for tooltips and node labels. The interactive graph allows users to explore how different request types map to specific optimization strategies.

JJastor11

66% match

Loading thumbnail…

CLAUDE.md — Universal ASCII / Terminal Dashboard Generator: guidance file for Claude Code to create beautiful, production-quality ASCII, ANSI, Unicode, and TUI dashboards from simple user objectives. Includes design system, composition rules, primitives, anti-patterns, library selection, and domain templates.

This example showcases a system prompt for generating terminal-native dashboards, demonstrating how a single user objective like "Monitor my Kubernetes cluster" is translated into polished ASCII, ANSI, and Unicode mockups. The guidance file defines design principles prioritizing clarity, dense layout, and meaningful status visualization, with layout intelligence rules that infer domain-specific metrics. It defaults to Python with the Rich library for implementation, and references specific primitives and anti-patterns to guide code generation. The description covers both the conceptual design system and the practical code generation approach.

IIoTeacher

65% match

Loading thumbnail…

Gist 01500f8ab6e9b7d98dd0aeea50347b9f

This example shows how a classroom activity integrates generative AI tools to design community micro-campaigns. It demonstrates a structured session where learners use ChatGPT, Adobe Firefly, and Adobe Express for ideation, visual production, and operational strategy. The visualization relies on text-based prompts and workflow steps rather than code libraries. It displays the pedagogical flow, including phases for guided activity, critical reflection, and optional mini-challenges, without using data-driven rendering or computational graphics.

IIoTeacher

65% match

Loading thumbnail…

prompt text for AI train guy

This visualization is a network graph of a scripted conversation between two characters, "Col" and "Jeff," rendered as a force-directed layout. The data comes from a text file containing the dialogue, which is parsed to extract characters and their speaking turns. It shows how conversational topics and tone shift across different locations and situations. The graph uses D3.js’s `d3.forceSimulation` to position nodes, with links representing dialogue edges. Node colors encode the comment topic, while node size reflects message frequency. The rendering relies on SVG paths and `d3.forceLink` for edge bundling.

CColinEberhardt

65% match

Loading thumbnail…

Gist 897f4d908b88b38b8e6507100ec3cd3f

This example shows a cybersecurity prompt for ChatGPT, configuring an AI assistant named "ChavaSSH" to advise teenagers and young adults on digital safety. The text-based file demonstrates how to structure a detailed system prompt without visual encoding. It specifies the assistant's empathetic tone, core topics like phishing and deepfakes, and instruction to cite resources from INCIBE and UNICEF. The file is plain Markdown, with no libraries or rendering APIs involved, serving as a reference for crafting educational AI conversations.

IIoTeacher

64% match

Loading thumbnail…

rohit @krishnanrohit · Feb 6 The system prompt for ChatGPT is absurd! h/t @dylan522p , and I independently verified across a couple devices.

This example visualizes a text-based system prompt as a circular, node-link diagram using D3’s force simulation. It shows the hierarchical structure of tools, namespaces, and policies embedded in the prompt, with each text block rendered as a labeled circle. The code uses `d3.forceSimulation` for layout and SVG elements for rendering, drawing from the raw `Chatgptsystem.txt` file to map the prompt’s nested sections into a network of interconnected nodes.

IIoTeacher

62% match

Loading thumbnail…

Gist e0350d5c472d4ca8006746e6446886ac

This WebGL-powered visualization demonstrates how reusable "skills" can be packaged as discrete, context-aware units for agentic coding with Claude Code. The rendering shows a network graph of skill components—including SKILL.md files, reference scripts, and constraint sets—using custom shaders to animate the relationships between repository metadata and skill load behavior. Built with Vue and Three.js, the scene maps the flow from persistent context files like CLAUDE.md to on-demand skill invocation, with color-coded nodes representing different skill anatomy parts. The visualization directly encodes the comparison table from the workshop, translating markdown structure into an interactive 3D topological map where edge thickness represents context-window footprint and script interpolation points appear as pulsing geometry.

IIoTeacher

61% match

Loading thumbnail…

Manus tools and prompts

This visualization maps the structure of Manus, an AI agent, by displaying its system prompt, tool definitions, and configuration files as interconnected nodes in a network graph. Built with React, it uses a force-directed layout to position elements and color-coding to distinguish between files, message tools, and programming utilities. The interface allows viewers to explore how the agent’s core instructions relate to its available functions, with tooltips revealing the underlying JSON schema for each node.

JJastor11

61% match