Interactive Design Solutions

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)

🧪 Daily UI Experiment: Eye Tracking Delightful Interaction 🕹️ Live demo: https://lnkd.in/g3wXkd56 🔍 Problem Branding often relies on static visuals. I wanted to explore how interaction itself can attract users and build memorability. 💡 Idea Build a playful login form where the eyes follow your mouse or typing, and look away when you focus on the password field. ✨ Takeaways • Small details like this bring personality without adding friction. • These behaviors could be abstracted into design system tokens for motion/interaction. • CSS variables + caret tracking can transform a routine form into a delightful micro-moment. ⚠️ Considerations • Respect prefers-reduced-motion for accessibility. • Performance should stay smooth across devices. • Playfulness should still align with brand voice. 🤔 Reflection What are the trade-offs of giving a digital product its own “character”? It can add warmth and memorability but may risk distraction from the core task. I’ll come back with a live demo soon, stay tuned 🧙♀️ #UI #UX #DesignSystem #InteractionDesign #Accessibility

Stop designing for clicks - start designing for everyone!! As an accessibility advocate, nothing frustrates me more than interactive elements that only respond to mouse clicks. If it works on onclick but not on keypress, it doesn’t work. Period. This is a critical failure under WCAG 2.1.1 (Keyboard) and a massive barrier for many users. Here’s what every designer and developer needs to remember: Use semantic elements: A <button> or <a> comes with built‑in keyboard and focus handling. Don’t substitute them with <div> tags and custom JavaScript without recreating that functionality. Make it focusable: Ensure any interactive element can receive focus via the Tab key. Use tabindex="0" thoughtfully when creating custom buttons with <div role="button"...>, and never trap focus. Bind keyboard events: If you must attach custom events, listen for Enter and Space keys (when appropriate) as well as clicks. The action should be identical regardless of the input method. Test without a mouse: Navigate your site using only the keyboard. If you can’t activate something or lose track of focus, neither can your users. “Click here” isn’t enough. Accessibility is about inclusion, and inclusive design means everyone can interact with your content... with a mouse, a keyboard, a switch device, or a voice command. Let’s raise the bar and build experiences that work for all. For more info, check the Understand doc: https://lnkd.in/gqTRixrB #A11y #Keyboard #Accessibility #MouseClicks

Respectfully, I've been doing this. This video from 13 years ago is proof of it. Here's the story... In 2010, I challenged the conventional music video formula with a simple question: "What if viewers could choose what happens next?" We shot "Attack of the Five Foot Hipster" in Brooklyn using DIY camera rigs made from PVC pipes and iPod Nanos (yes, those devices in the photos). No fancy equipment, just creative problem-solving. When we uploaded the standard version, the reception was brutal: • "Don't quit your day job" • "This is garbage"    One week later, we uploaded the EXACT SAME footage but added interactive elements—a choose-your-own-adventure interface letting viewers control the story. The transformation was immediate: • "This song is a hit!" • "When's the album dropping?" • Views increased 10X • People started BUYING the track they'd trashed days earlier    This wasn't just a cool experiment. YouTube had no interactive features back then, so we had to hack together a solution that made traditional content interactive. That's when I realized: We don't have a content problem. We have an engagement crisis. Passive content has a ceiling. Interactive content has a ladder. Soon after, Fortune 500 companies started calling: "How can we use this technology?" That experiment evolved (over years) into Adventr—now powering interactive experiences for major brands: • Personalized ancestry journeys for 23andMe • Choose-your-path storytelling for NBC • Gamified commercials for Paramount    The lesson wasn't about having fancy equipment (clearly, from our PVC pipe rigs). It was about reimagining the relationship between content and audience. Years before Netflix, HBO, and YouTube invested millions in interactive content, we were pioneering it with creativity and resourcefulness. I've been doing this for 10+ years, and I'm excited that the industry is finally catching up. -DH P.S. Check the comments if you want to see the video (keep in mind this was ~2012!)

🚀 What if a research paper came with a “Try It Yourself” button? That future might already be here — even for those of us who don’t write code — thanks to AI. I took a great design guide paper, “Rapid Design of Deployable Antennas for CubeSats” by Maria Sakovsky, Sergio Pellegrino, and Joseph Costantine, and asked Claude 3.5 to turn it into an interactive web tool using the equations and methodology described in the paper. 🛠️ The result? A simple browser-based tool that lets you: 1. Input your antenna design parameters 2. Visualize key trade-offs and feasibility limits 3. Get real-time feedback on what works and doesn't work based on the paper’s analytical design framework 👉 https://lnkd.in/g39UCH4h The original paper references a design tool, but no public version was available — so that's why I built one (with a little AI help). This is just a first experiment, and like all first drafts, it’s not perfect — Claude made a few missteps, so not all results are exact. But it’s a glimpse into how we might reimagine research dissemination: interactive, accessible, and instantly testable by anyone. #AIxEngineering #InteractiveResearch #AntennaDesign #CubeSats #DeployableStructures #OpenAccessDesign

Our team analysed over 1 MILLION proposals and found something significant for sales leaders. We discovered that proposals with interactive elements had acceptance rates up to 2x higher than static ones. That’s a massive difference. Here’s why this didn’t surprise me. Interactivity helps your proposal deliver on things that actually move buyers forward. You can… - Make it easy for buyers to discover the right plan by adjusting user counts, toggling items, and exploring add-ons through interactive pricing - Stand out from the competition with dynamic content that blows static PDFs out of the water - Tailor the experience for every stakeholder by using expandable sections that reveal the right level of detail, without overwhelming anyone. - Reduce back-and-forth with self-serve exploration, letting buyers dive deeper into demos, feature breakdowns, timelines, and FAQs directly inside the proposal - Showcase value through interactive ROI calculators So while a 2X increase in acceptance rate FEELS huge, there’s so much value in interactivity that I’m frankly surprised this figure isn’t higher.

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.

I've been exploring how design impacts usability, especially Don Norman's book on Design of Everyday Things really does make an impact. On the same light, HubSpot's onboarding process stands out as a prime example. HubSpot's Onboarding Excellence: - Personalized Setup: Right after sign-up, HubSpot guides users through a tailored setup process, asking about their business needs to customize the dashboard accordingly. - Interactive Tutorials: The platform offers step-by-step tutorials that walk users through key features, ensuring they can navigate the tools effectively. - Resource Accessibility: HubSpot provides easily accessible resources, like help documents and videos, directly within the interface, allowing users to find answers without leaving the platform. Aligning with Don Norman's Principles: - Visibility: Essential functions are prominently displayed, reducing the learning curve for new users. - Feedback: Immediate responses to user actions, such as confirmation messages after completing a task, keep users informed and engaged. - Consistency: Uniform design elements and terminology throughout the platform help users build familiarity and confidence. HubSpot's approach demonstrates that thoughtful design enhances usability, leading to a more intuitive and satisfying user experience. How have you seen design and usability balanced in products you've used or developed?

Most teams still treat design systems like component libraries. 🫠 But components alone don’t create experiences. Context does. 🙌 🥹 The old way: -Fixed component with 20 variants -Boring documentation -"One size fits all" patterns -Patching components from other design systems ✨ The new reality: -Components that reshape based on user behavior -Systems that learn from every interaction -Patterns that emerge from actual usage -Automatic adaptation without manual updates The modern stack isn't just visual. It's behavioral: ↪️ Intent → What are they trying to do? ↪️ Context → Who are they and where? ↪️ Platform → What device/environment? ↪️ Personalization → What have they done before? ↪️ Agentic Orchestration → How do all these layers work together autonomously? Each layer influences how components render. A pricing card isn't just a pricing card. It's a dynamic element that shifts based on whether you're a returning user, power user, or first-time visitor. Or, if you're driving and need voice mode. The system doesn't just store patterns. It generates them based on conditions. ✨ So, I would rather call this the EXPERIENCE SYSTEM because it: ↪️ Responds to context without being told ↪️ Evolves through usage, not committees ↪️ Ships improvements automatically ↪️ Makes decisions so users don't have to Components become smarter. Experiences become fluid. 🙌 #designsystem #AI #productdesign #userexperience #productmanagament

How to 10x your design with Figma Make (GUIDE ⭐️). I spent 40+ hours testing Figma Make prompts. Most designers waste time with vague prompts and get garbage outputs. Here are the exact prompts and proven workflow that actually work: 1️⃣. Prompt formula that works: Bad: "Create a dashboard" Good: "Create a SaaS analytics dashboard with: → Left sidebar navigation (240px wide) → Top bar with user profile → 4 metric cards in a grid → Line chart showing revenue trend → Use blue (#2563EB) as primary color" The more you specify = higher quality. 2️⃣ Workflow: Import your Design System first Before your first prompt: → Go to your main Figma file → Export your component library → Import it into Make → Add this to every prompt: "Use components from [Your Library Name]" Now everything matches your brand automatically. 3️⃣. Prompt for Interactive States: "Create a login form with: → Email and password inputs → Show error state when fields are empty → Disabled button state when form is incomplete → Success message after submission → Add smooth transitions between states" Gets you working prototypes, not static screens. 4️⃣. Advanced Prompts: Data States "Create a user list screen with three states: → Loading (skeleton screens) → Success (populated table with 10 users) → Empty (illustration + 'No users yet' message + 'Add User' CTA)" One prompt = complete UX coverage. 5️⃣. The "Design System Drift” Fix: Notice Make using wrong colors? → Try this Prompt: "Analyze my imported library and list all color tokens, then regenerate using only those exact values" It'll self-correct and stick to your system. 6️⃣. Responsive Design Prompt: "Create a pricing page with 3 tiers. Make it responsive: → Desktop: 3 columns side-by-side → Tablet: 2 columns with 3rd below → Mobile: Stacked vertically → Use Auto Layout for fluid scaling" This gets you mobile + desktop in one shot. 7️⃣. Magic Troubleshoot Prompts: Output looks off? → Try: "Redesign this following Material Design principles" → Or: "Make this follow iOS Human Interface Guidelines" → Or: "Apply Gestalt principles for better visual hierarchy" Give it design frameworks to follow. It works magic. Designers who master prompt engineering in 2026 will ship 10x more than everyone else. Bookmark this. 🔖 It will make you a superhuman, go try it (sponsored by Figma): https://lnkd.in/gEvjTSbr *** If you found this useful, consider reposting ♻️ to your network and follow Felix Lee. #FigmaPartner