Refyn

Inspiration

I have been building websites for many years, and now with advancement of AI, it became super easy to spin up a new landing page. But I am always spending so much more time on tiny nitpicks improving the design. Make some text a little bigger, move a box a little to the right, change styling somewhere else. The major problem was the back and forth between the browser and coding agent, capturing and pasting screenshots, and explaining so much about simple changes. I also spent so much time just going changing styles repeatedly until something meets my expectation. This always costed me so much of my time as well tokens. I have also seen founders recording one long loom video and giving it to AI to fix the tiny issues in the webpage their engineer has created.

There weren't alternatives to this either. Something like Claude design doesn't work with existing git repository (it just creates html pages, pretty much useless), or you have to use completely different platform that stores your code into their server and uses their AI API usage which, as we all know, becomes quite costly for a user as compared to subscription pricing. That's why we built Refyn.

What it does

Refyn lets you use your existing Codex Subscription with Codex App server and gives it the eyes it always needed. User can comment and interact on the webpages, simply point at what needs to be changed, one-click attach screenshot of relevant part only, collaborate with other teammates so feedback becomes easier, and edit stuff directly in place to get the feel on how the webpage looks even before coding agents actually changes it.

User can add teammates to their organization and review a page together using our collaboration feature. They can leave comments together, see how the page looks live, and ship it all without leaving the app.

User can edit the page inline without asking AI to edit it. This is particularly useful to try out different UI layout and test different styles before committing to one. User don't need to add any new code in their codebase, or install any plugin or migrate to our system to make this work.

How we built it

We used Codex App server (instead of directly running codex CLI since it's against ToS) to drive the user comments to Codex. The project consists of mainly 7 packages -- RefynMac, inject, cli, backend, sidecar, web, and contract. They coordinate with each other to create final product. We used Fastify server for backend, PostgreSQL as database, Typescript everywhere, pnpm workspace monorepo, NextJS webpage, and Clerk authentication.

We used GPT 5.6 sol and Terra to create most of the working product in Codex CLI and ChatGpt App. We spent a lot of time crafting the best AGENTS.md possible for typescript code so that Codex writes production ready code. To enforce this, we created a Stop hook that asks codex to verify and fix any rules that are violated in a particular turn. We also found out that codex writes too much text when asked to explain something and thus we used Caveman skill as a UserPromptSubmit hook, so it saves token as well as explains in simple words. We also extensively used Gpt-5.6-Terra because of how good the model is for it's price and it just was useful for 80% of the tasks, and switched to Gpt-5.6-sol whenever we worked on a new feature that requires larger context and future thinking.

Challenges we ran into

The biggest challenge was to enforce user authentication and separation in Mac App. We had never created Native App previously and it proved to be a challenge relying on AI tools for 100% of it's implementation. Specifically, making sure multiple user can create accounts on same mac app and their keychain access stores credentials correctly. We also struggled with allowing multiple different user to work on same git project as well as allowing same user with multiple account to work on same project.

We also faced a lot of challenge on implementing the interact mode. Specifically, letting user edit the text, change width/height, weight, style, etc. inline without asking AI. This surfaced so many bugs, edge cases to handle in the HTML body, making sure the boxes are selected and changed appropriately while maintaining quality codebase.

Accomplishments that we're proud of

We are specifically proud of how easy it is now to make changes in a webpage. User can get onboard and start using the product in < 3 minutes and see the value in the product immediately. We have also made sure that we don't reinvent the wheel and focused on one core product feature that is to reduce the friction that existing teams had while making changes to their webpages.

We are also quite proud of our inject/ layer that changes the HTML layout in place without asking AI. User can do almost anything just by dragging and clicking on the toolbar. This is particularly hard to implement when you consider that we have to support any kind of codebase, and we shouldn't ask user to migrate their codebase to our system or use any of our custom plugin. It just works as soon as user opens our app.

What we learned

When we started the project, we had never created a native app even though we have been shipping web apps for half a decade now. What we realized quite early during the hackathon is that asking AI for architectural decision is a bad advice. It will definitely not think of your product future and give half baked answers. The only way forward is to learn the baseline technology and create a strong foundational codebase / architecture with strong coding principles so that AI can act on it in rigid settings.

What's next for Refyn

The next feature is to add billing support and then a way to create new web pages based on the existing design. This is not going to be just a prompt wrapper, but we will be creating a design guidelines, a taste guidelines, example quirks and eventually create an end to end loop that not just creates a page but verify end to end and stop only after it one shots the entire page with production ready design.