Fray
May 2026
Role: Design Engineer
Overview
Fray is an AI-powered tool that helps developers stress test interfaces by generating and testing edge cases against their implementations.
I built Fray as an exploration of how AI coding agents can support the design and development process. I designed the experience, defined how it should evaluate interfaces, and built the tool using AI-assisted coding workflows.
Problem
Designers often think beyond the happy path when creating an interface. They consider what happens when content is unusually long, values fall outside the expected range, or a user does something unexpected.
The problem is that these edge cases can get lost when a design moves into development. A designer might notice that a component needs to accommodate longer text, for example, but there isn't always an easy way for a developer to systematically test those scenarios against the code they've built.
I wanted to explore whether there was a better way to bring this kind of design thinking into the development process. Fray was my attempt to make it easier for developers to identify and test the edge cases designers are already thinking about.
How it works
To see how it works, I'll walk through a demonstration on a sample interface. Start by selecting an element or dragging to select multiple…
Select a stress test preset option to quickly get a prompt to paste into your AI coding agent…
The structure of Fray ensures the generated prompt gives your AI coding agent enough context about the content selected as well as the desired stress test outcome.
Here is an example of what a copied prompt looks like:
You are Fray, an AI UX auditing agent. The user wants to stress-test a specific component in their code. Please find the component matching these details and mutate its text/content based on their instructions:
- **Element Tag:** `<span>`
- **Classes:** `text-xl font-bold tracking-tight text-gray-900`
- **Current Text:** "$249.00"
- **User Stress-Test Request:** "Replace with an extreme multi-digit price like $99,999,999.99 to test number formatting and layout"
## Parent Component Context
- **Nearest Section Heading:** "Ergonomic Mesh Office Chair"
- **Parent Container:** `<div>` with classes `mt-3 flex items-baseline gap-2`
## Execution Instructions
Find the source file containing this component, overwrite it directly with the mutated content, and save the file. Do not explain or summarize — just edit the file. The local dev server will hot-reload automatically.
In a nutshell, that's how it works, but let's run through the rest of Fray's features.
Feature walkthrough
If the current presets don't capture the stress test you desire, describe your own…
Create your own presets for repeat use…
Group presets together…
Drag and drop to rearrange…
And adjust color schemes for a bit of fun…
Reflections
I started this project with nothing but a rough vision of how I wanted the tool to behave. It took a while to begin understanding the underlying logic and structures necessary to build the mechanics you see within Fray.
Stepping into a realm with seemingly endless possibilities was daunting, but I had a ton of fun going back and forth with Claude (and some help from Gemini) to bring Fray to life.
This project has inspired me to keep learning with AI coding agents to help improve my workflows and see what I can create.
Excited for what's to come.
Next Project (Recharge)
↓