Ox Alpha · workflow
When using Ox Alpha for frontend UI, providing actionable browser, animation, and aesthetic tools first, then having the model read reference sites, is usually more reusable than simply asking it to “make a beautiful page.”
Extract observable layout, interaction, and motion patterns from {{REFERENCE_SITES}}, then build an original prototype with {{STACK}} without copying protected assets. Separate design facts from guesses; list page structure, states, motion triggers, and fallbacks; use {{DEVICE_BUDGET}} for loading, frame-rate, asset, and accessibility checks; output a file tree, start command, and manual checks, marking unrun work unverified.
Reference sites: {{REFERENCE_SITES}}
Stack: {{STACK}}
Device budget: {{DEVICE_BUDGET}}Replace before running: {{REFERENCE_SITES}}, {{STACK}}, {{DEVICE_BUDGET}}
Fix the inputs, variables, and runtime, and confirm that you may send the material.
Replace every required variable; the template does not read client state or execute code/tools automatically.
Retain raw output, errors, and manual edits; mark unrun results unverified.
Apply each acceptance check; narrow the failing variable before retrying and do not present the example as a measurement.
This is an original Tabbit editorial adaptation based on a public source. It does not reproduce undisclosed system prompts or restricted full text. The source supports this task direction, not a universal model-performance claim.
When using Ox Alpha for frontend UI, providing actionable browser, animation, and aesthetic tools first, then having the model read reference sites, is usually more reusable than simply asking it to “make a beautiful page.”
Suitable tasks: Marketing pages, Hero sections, animation prototypes, and frontend tasks that require browser-based review and verification.
Unsuitable tasks: Treating one visual result as proof of general design ability, or publishing generated code directly without review.
Applicable model version: Ox Alpha; the original post gives no version snapshot.
Applicable clients, agents, or APIs: OpenCode; the comments also mention Playwright CLI, GSAP, and reference sites.
Recommended reasoning levels and parameters: Not disclosed; fix the Harness, tool permissions, and timeouts first.
The original post does not publish a complete verbatim prompt. The following is a reusable workflow compiled from the post and comments and should not be cited as the original prompt:
1. Integrate Ox Alpha into a reversible frontend repository, and prepare Playwright CLI, GSAP, and the project's existing UI/animation tools.
2. First have the model read the project structure, existing components, and constraints; then have it use Playwright to open a public reference site and record its layout, copy, spacing, animation timeline, and interaction states.
3. Explicitly require that the reference site be used only to analyze information architecture and visual language, without copying brand assets, copy, or source code.
4. Implement a runnable Hero section first, then ask the model to check it in a browser on desktop and mobile, fixing overflow, interaction issues, and console errors.
5. Save screenshots, console errors, test results, and the diff for each change; add animations or details only after the previous round passes.
6. Finally, have a human review readability, keyboard operation, animation fallbacks, and differences from the reference site.The poster said they entered a prompt in OpenCode, the model stopped multiple times midway, and they eventually completed the Hero section after about 2–3 hours of repeatedly continuing the conversation. The commenter suggested adding GSAP, Playwright CLI, taste.md, and an accessible design reference. The original post does not publish the prompt text, repository, original screenshot files, or test logs.
“Better tools + reasoning” is the comment author's experience-based summary, not a controlled comparative experiment.
Whether the reference site can be viewed correctly by the model depends on the client's browser tools and permissions; providing only a link does not mean the model saw the page.
Visual quality, code correctness, and animation accessibility should be evaluated separately.
Reddit · Source date: 2026-08-23 · Edited: 2026-09-20
Read the original sourceOx Alpha
Run this guide in the environment listed above. Downloading does not transfer the template or establish model availability for your account.