2026Live Demo

Edgecase - AI Edge Case Generator

An AI-powered SaaS tool that helps designers generate comprehensive edge cases, empty states, and error scenarios for user flows in seconds.

AI-Powered DesignHackathonProduct DesignGenerative AI
Tools & Technologies
Figma MakeClaude AIReactTailwind CSSVercel
Edgecase - AI Edge Case Generator landing page showing user flow input and generation interface

The Challenge

Designers often overlook critical edge cases, error states, and empty states when creating user flows, leading to incomplete designs that fail in real-world scenarios. Manually brainstorming every possible failure mode is time-consuming and error-prone. How might we help designers quickly generate comprehensive edge cases to create more resilient, production-ready experiences?

My Approach

Built during a one-week Claude hackathon in Portland, Oregon, I designed and developed Edgecase as a solo designer and developer. The tool uses Claude AI to analyze user flow descriptions and generate contextual edge cases across three tones: Professional (enterprise-ready), Playful (consumer apps), and Chaotic (stress-testing extremes). Users describe their flow in natural language, and the AI returns thoughtful scenarios like 'No active session', 'Invalid credentials', and 'Too many login attempts', complete with visual mockups and recommended UI patterns. The design emphasizes speed, clarity, and practical utility.

AI-Generated Edge Cases

Edgecase results page showing AI-generated edge cases including 'No active session', 'Invalid credentials', and 'Too many login attempts' with visual mockups

Results page displaying contextual edge cases generated by Claude AI for a login flow. Each state includes a visual mockup, descriptive title, and actionable guidance. Users can toggle between Professional, Playful, and Chaotic tones to match their product's voice.

Outcome & Impact

Successfully demonstrated at the Claude hackathon in Portland. Designers can generate 5-10 relevant edge cases in under 10 seconds, a task that traditionally takes 30+ minutes of manual brainstorming. The tool helps teams ship more complete designs by surfacing scenarios they hadn't considered. Early feedback praised the visual mockups and tone variety. The project showcases AI-augmented design tooling that enhances (not replaces) designer judgment.

Technical Details

AI Integration

Leverages Claude AI to analyze user flow descriptions and generate contextually relevant edge cases. The AI considers user intent, flow complexity, and selected tone to produce scenarios that feel human-written. Prompts are optimized for clarity, consistency, and practical utility, ensuring generated states are actionable for designers and developers.

Rapid Prototyping with Figma Make

Built using Figma Make, a code-based design tool that accelerates UI development. React + Tailwind CSS enabled fast iteration during the one-week hackathon timeline. The clean, minimal interface focuses on usability, reducing cognitive load so designers can focus on reviewing generated content rather than navigating complex UI.

Tone Customization

Three tone modes allow designers to match edge case language to their product's voice: Professional (formal, enterprise-friendly), Playful (friendly, consumer-facing), and Chaotic (extreme stress-testing scenarios). This flexibility ensures the tool adapts to different design contexts and team cultures.

Lessons Learned

AI excels at generating edge cases humans often miss, but human review remains critical

Visual mockups significantly increase perceived value and usability

Tone customization makes AI outputs feel more tailored and trustworthy

Designers want speed over perfection, good-enough suggestions beat slow precision

Clear, minimal UI allows users to focus on AI-generated content

One-week hackathons force ruthless prioritization and shipping discipline

Generative AI tools should augment designer judgment, not replace it

Key Features

  • Natural language user flow input
  • AI-powered edge case generation using Claude
  • Three tone options: Professional, Playful, Chaotic
  • Visual mockups for each generated edge case
  • Contextual states: Empty, Error, Loading, Permission
  • Copy-friendly output for handoff documentation
  • Fast iteration - generate new flows instantly
  • Built entirely in one week for hackathon

Want to Collaborate?

I'm always interested in new experiments, research collaborations, and pushing the boundaries of AI design.

More Experiments

Grow Along - Relationship Growth App
2024Archived

Grow Along - Relationship Growth App

Bringing the spark back to relationships

UX ResearchMobile AppGamification
Green Alert - Conscious Fashion Shopping
2022-2024Archived

Green Alert - Conscious Fashion Shopping

Designing ethical AI to combat fast fashion greenwashing

AI-Augmented UXSustainabilityUX Research
Internet Archive - Featured Articles
2023Archived

Internet Archive - Featured Articles

Adding context and meaning to millions of archival records

UX ResearchInformation ArchitectureContent Strategy