Fray

May 2026

OVERVIEW

Inspired by Agentation, I wanted to make a similar tool that designers or developers could use to improve their designs with AI coding agents. Fray utilizes a similar selection and output mechanism, but is centered around stress testing designs for edge cases.

This entire tool was built from the ground up with the help of the Claude Agent within VS Code. Additionally, the demo videos were created with Claude Code.

HOW IT WORKS

Here's how it works. 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…

INSTALLING FRAY

Fray is a React component that can be installed with a simple npm package.

To install Fray:

In your project root, run:

npm install fray-chaos

Create a file called FrayWrapper.tsx (or .jsx) anywhere in your project and paste (Skip the "use client" line if you're not using Next.js App Router):

"use client";

import { FrayChaosDashboard } from "fray-chaos";

export default function FrayWrapper() {

return <FrayChaosDashboard />;

}

In your root layout file (e.g. layout.tsx, App.tsx, index.tsx), add the import at the top:

import FrayWrapper from "./FrayWrapper";

Render it inside your JSX, at the bottom of your body/root element:

<body>

{children}

<FrayWrapper />

</body>

Start your dev server (if not already running) to see Fray:

npm run dev

If you have issues with adding Fray to your layout, simply ask your AI agent for help. I had to do this several times during testing.

REFLECTIONS

Thanks to the wonderful designers that worked on Agentation, I started this project with a vision of how I wanted the tool to behave. However, I had to deeply explore the underlying logic and structure to build those mechanics from scratch into a fresh, differentiated product.

It was challenging stepping into a realm with seemingly endless possibilities, 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.

↓