Hoot Spotter
Hoot Spotter is a Figma plugin I created to help designers spot inconsistencies by comparing their work against a design system. Built as a solo side project, it showcases my ability to plan, scope, and build an end-to-end product with AI-assisted development grounded in a clear and iterative design process.
Empowering Design Teams
Designers often overlook subtle inconsistencies, such as mismatched fonts, hidden overrides, and off-spec colors. Design systems offer guidance, but not enforcement. This plugin addresses that gap by embedding lightweight validation directly into the design environment.
Hoot Spotter was designed with smaller design teams in mind, especially those working across enterprise-scale products where a single designer often shoulders system oversight. The plugin supports designers who are less familiar with the system or tools by providing a lightweight compliance layer. It enables pre-submission validation for teams contributing to a shared design system or creating custom components for specific applications.
AI Tools 🔧
Built and shipped a functional, scalable Figma plugin w/ AI tools
Full Stack 🚚
scope, design, and deliver an end-to-end product
Building a Roadmap with Design Thinking and AI Tools
I began with a detailed product brief outlining the problem, goals, and target audience for the tool. From there, I mapped out a phased plan that focused on delivering the most value early. Throughout the process, I leaned on AI to pressure test ideas, stress scenarios, and adjust based on scope feasibility. That combination helped me keep the roadmap grounded in reality while leaving room to explore.
Using ChatGPT to Evaluate Scope and Guide Code
I treated ChatGPT like a collaborator in translating product thinking into executable code. It helped me understand what might be out of scope, where complexity could creep in, and what clean, maintainable code might look like for each idea. It wasn’t just about writing code—it was about shaping the right version of a feature before building it.
Building Hoot Spotter inside Cursor
Cursor became my workspace for shaping Hoot Spotter into something real. It gave me a flexible way to organize my code, track iterations, and get AI support right where I needed it. I cleaned up the repository, modularized the logic, and structured the plugin for future growth and additions
The hardest part wasn't technical, it was mental. As a designer with access to AI and dev tools, I saw how many features could be built. But I had to learn when to stop. This project taught me to draw the line for the sake of clarity, experience, and purpose. Product discipline is about knowing what not to build.
Overview of Plugin Functionality
Hoot Spotter evaluates design consistency by comparing selected components in Figma to a reference style library.
Compliance Mode:
Identifies visual mismatches in color, text, and effects.
Logic Mapping:
Ensures even deeply nested or hidden layer styles are accounted for.
Scoring & Feedback:
Real-time alerts and suggestions for improvement.
The plugin runs lightweight, context-aware checks for helping teams identify drift without disrupting design flow. It’s built for extension, allowing future logic to be added as systems grow.
Validation & Team Learning
I tested Hoot Spotter both personally and with peers on live projects. These sessions highlighted how subjective "compliance" can feel, especially when working with unfamiliar systems. The tool helped teams align on what matters, turning fuzzy standards into concrete guidance and creating a shared understanding of design systems rules.
What Didn't Make the Cut
I initially explored advanced scoring models, including weighted matches, percentages, and confidence scores. But these added complexity without real clarity. Instead, I focused the plugin on binary signals (pass/fail) to offer quick insights while maintaining usability. Depth belongs in critique, not first-touch tooling.
Hoot Spotter reminded me that design systems aren't just patterns but about processes. In organizations without mature operations or clear guidelines, a simple tool can elevate quality. This plugin helps turn consistency into a shared, repeatable behavior for cross-team use.
Design Thinking and Ownership
The plugin acts as a silent reviewer, helping teams ensure consistency even when working independently. It supports both junior and senior designers by integrating system alignment into the everyday workflow.
AI isn't just a tool - it's a collaborator. It accelerated development, but my product and design process kept it aligned. Hoot Spotter reflects how a designer can take ownership from concept to code, balancing usability, logic, and system rigor to ship real tools that solve real problems.
