Interactive Design Visualization

Built 8 interactive UI prototypes with Claude Code in about a week to experiment with different ideas for small HTML apps as problem solving tools. Each one is just a single HTML file. No build tools, no frameworks, no npm install. The lineup: 1. Cable Configurator (39KB) — A* pathfinding algorithm for routing cables through a visual editor. You draw obstacles, set start/end points, and it finds the optimal cable path. Real pathfinding, not fake lines. 2. 3D Configurator (30KB) — general-purpose product configurator with parameter controls and live preview. 3. Side Table Designer (17KB) — furniture design tool where you tweak dimensions, materials, and proportions interactively. 4. Draw-Refine — multi-file system where you sketch rough ideas and an AI refines them into cleaner versions. 5. Inline-Draw-Chat — chat interface that lets you draw diagrams mid-conversation. 6. Thinkboard — collaborative thinking tool, basically a freeform canvas for organizing ideas spatially. 7. Tldraw-Chat — chat interface integrated with the tldraw drawing library. 8. Side Table Grid (7.5KB) — grid-based variant of the furniture designer. The pattern across all of them: single HTML file, vanilla JS, canvas-based rendering, no dependencies. The cable configurator implements real A* pathfinding in 39KB of self-contained code. The furniture designer does real-time 3D-ish projection in 17KB. I think there's something underappreciated about single-file prototypes (Simon WIllison was one of the first I saw point this out in his amazing blog). No build step means you can iterate in seconds. No dependencies means it works everywhere forever. The constraint of one file forces you to keep things simple — and simple often means better UX. The cable configurator is probably the most technically interesting one for me. Implementing A* in a visual editor where users can paint obstacles in real-time was a fun evening project. → Single-file prototypes: no build, no deps, no excuses. Cheers! B)

Explore the design space of notebook visualization tools with SuperNOVA! Our interactive browser showcases 160+ notebook vis tools surveyed from 8M+ open-source notebooks, highlighting key design implications and trade-offs. 👉 https://lnkd.in/etiMEW2K We present a four-dimensional framework for designing notebook visualization tools. 1️⃣ Notebook-vis data communication (none, one-way, bidirectional) 2️⃣ Data source (runtime, code, external) 3️⃣ Sensemaking context (on-demand, always-on) 4️⃣ Modularity (modular, monolithic) Big thanks to fantastic collaborators Seongmin Lee, David Munechika, and Duen Horng "Polo" Chau! ❤️ Add your notebook visualization tools into the SuperNOVA collection! 📖 Paper: https://lnkd.in/eMPi9-vH 💻 Code: https://lnkd.in/eBWiRwdw 🔍  Survey: https://lnkd.in/etiMEW2K #CHI2024

Visualization has shifted from being strictly a means of communicating design to an integral part of the design process. In many cases, design preceded visualization. Today, the design process is a continuous feedback loop where design is informing visualization, and the visualizations provide immediate and vital feedback to our design. Input is nearly immediately assimilated into the output, and vise versa. Virtual sketching, real-time rendering, shared documents, virtual meetings, etc. have all contributed to our ability to test and retest in a hyper-collaborative environment. This loop informs our internal design team, and also communicates with the external audiences we are presenting to. Three mainstays in my virtual collaborations are Zoom (or any other screen sharing app), Sketchup, and Procreate/Photoshop for live sketching. During a zoom call, we will fly around our model, choose a view, and live sketch to establish the direction. The 3d model is effective in assessing spatial relationships and scale, while the live sketch helps establish composition, character, and narrative. This collaboration makes for a more effective final product while augmenting the design process.

Build your own interactive geographic data visual. Here is how. VisQuill Lens lets you place interactive lenses over a map and explore how your data is distributed across geography. Load your own data, assign categories to lenses, drag them across the map and adjust the radius. The visual updates in real time. It runs in the browser and is also available as a Power BI custom visual. Once configured, the visual can be exported as a self-contained web page and hosted on any static server, ready to embed in a dashboard or share as a link. Find it at visquill.com/visuals In this short video I sketch how to build one using OpenStreetMap POI data for London covering groceries, cafés and fast food: starting with a single lens for groceries, then assigning fast food to a second lens, and finally loading a finished example with all three categories in place. Source: OpenStreetMap contributors, via Overpass API. #DataVisualization #Geospatial #London #PowerBI #VisQuill #LocationAnalytics #RetailAnalytics #InteractiveVisualization #OpenStreetMap

This is what a Figma Make prototype looks like with over 1000 prompts. 450: Designing interaction behaviour 350: Fixing bugs/Make errors 100: Making it functional 30: Pull and render data proof of concept I wanted to test pulling in data from Smartsheet's sheets API to see how we can get our teams closer to designing against real data. Through Make I was able to pull a file list, use an OpenAI assistant to interpret the data and generate a dashboard using chart.js rendering based on the sheet contents. Design is what takes this from "a grid with widgets" to a beautifully sophisticated interaction model. Every animation and interaction is designed with intention. This is something you simply can't do with static design screens. Because the design was happening in an interactive surface with real data, I could quickly identify an exhaustive list of interaction behaviours and implement changes within minutes. This is a part of the SDLC that takes weeks or even months. Waiting with anticipation to see how the product design industry evolves to design interaction-first.

Real-Time UI: https://lnkd.in/dNbmGcX8 "A prototype is worth 1000 meetings." But what if the meeting _is_ the prototype? That’s the spirit of an idea I’m calling “Real-time UI” (the name of which I gave next-to-no thought, so forgive me). The tools and technologies now exist to generate UI in realtime, making it possible to convert a conversation into a working digital thing. In this video, I introduce the concept to TJ Pitre and Ian Frost , and we talk about the possibilities and ramifications of generating UI in realtime, as well as speaking to the infinite creative potential of using AI & design systems together, as we are covering in our course: https://lnkd.in/eG5h8uaP https://lnkd.in/dubfHuCn As I see it, real-time UI can help accomplish a number of things: ◉ Visualize UI components in real-time – surfacing design system components immediately as they’re referenced in conversation (design systems are a shared language!) ◉ Visualize product design in real-time. Make abstract ideas real as soon as the words exit your mouth, and use the working prototype as a wet ball of clay the team can sculpt together over the course of a conversation. ◉ Wield your design system’s infrastructure to make realistic things. The spirit is to have the conversation and infrastructure tuned to your specific team’s context. Create prototypes that are built using your organization’s best practices rather than whatever AI decides to randomly generate. ◉ Minimize the friction involved in making prototypes ◉ A visual accompaniment to a conversation can help teams unlock new ideas, expose weak spots, explore opportunities, and iterate collaboratively ◉ Open the door to a more participatory design process. Diversity is critical to success, and it’s so important to make sure that digital products represent the best thinking from different disciplines & perspectives at a company. Historically, the design process was prohibitive to people who weren’t skilled in the mechanical aspects of creating designs & code. This is no longer the case. Of course professional designers or developers are still necessary (now more than ever!) to produce great results, but there’s now an opportunity to create more democratic, collaborative, participatory design workflows. If you're interested in exploring the future of using design systems and AI together, we'd love it if you joined our community by preordering our AI & Design Systems course! #ai #designsystems #ux #uxdesign #frontend #prototyping #design #process #workflow #collaboration

Data visualization used to require three things: Technical skills. Expensive software. Hours of your time. Claude just eliminated all three. Interactive charts and diagrams. Built directly in chat. Available today in beta. On all plans. Including free. I've built 50+ production agents and watched AI tools evolve fast. This is different. A marketing manager can now visualize campaign data without waiting on the analytics team. A founder can turn messy spreadsheet numbers into investor-ready charts in minutes. A teacher can create interactive diagrams without learning new software. No Tableau license. No Python scripts. No "let me schedule time with the data team." Just describe what you want to see. The gap between "I have data" and "I understand my data" just got a lot smaller. The people who figure this out first will make faster decisions than those still waiting for reports. What's the first chart you're building? Anthropic