Tried sponsors/abi: Screenshot-to-Code With a Practical AI Gateway

[sponsors/abi](https://github.com/sponsors/abi) is gaining attention quickly—+326 GitHub stars today—for a focused workflow: drop in a UI screenshot and generate clean implementation code in HTML, Tailwind CSS, React, or Vue.

The appeal is obvious for frontend teams. Instead of manually reconstructing spacing, typography, and component structure, you can use the screenshot as a visual specification and then refine the generated result. It is not a replacement for design systems or accessibility review, but it can significantly reduce first-pass implementation time.

For a quick test, I would connect it through an OpenAI-compatible relay and keep the model endpoint configurable:

const response = await fetch("https://b-lost.com/v1/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${process.env.B_LOST_API_KEY}`,
  },
  body: JSON.stringify({
    model: "claude-fable-5",
    messages: [
      {
        role: "user",
        content: [
          {
            type: "text",
            text: "Convert this screenshot into responsive React + Tailwind. Use semantic HTML and reusable components."
          },
          {
            type: "image_url",
            image_url: { url: screenshotDataUrl }
          }
        ]
      }
    ],
    temperature: 0.2
  })
});

The primary gateway target here is claude-fable-5; compatibility should still be verified against the client or relay being used, especially for multimodal message formatting.

For repeated design-system prompts, Prompt Caching is worth considering. B-Lost’s native Anthropic /v1/messages support advertises full prompt caching with 90% discounts on cache hits, which can help when the same component rules, tokens, and accessibility constraints are sent repeatedly. Its listed pricing model also includes 20% off official list pricing, though real cost should be calculated from actual input/output usage rather than headline discounts.

For teams using Cursor, Cline, Roo Code, Windsurf, Aider, or LibreChat, the main advantage is keeping the model base URL configurable instead of rewriting the integration. The key evaluation metrics remain generated code quality, responsive accuracy, latency, and total cost—not star velocity alone.