Opus 5.5 FRONTEND GOD MODE (+Free Options): Yeah, THIS IS BETTER THAN 99% OF HUMAN DESIGNERS!

Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.

Original language: English

Original video: Opus 5.5 FRONTEND GOD MODE (+Free Options): Yeah, THIS IS BETTER THAN 99% OF HUMAN DESIGNERS! · Channel: AICodeKing · 09:17 · Watch on YouTube

Topics: AI agents, Software engineering with AI, AI models

Summary

The video demonstrates a workflow for building a mountain-retreat website called Alto with Opus 5.5, using a clear brief, visual references, a sketch, and design files to guide the implementation. It shows how to review and refine the hero before delegating independent gallery and booking components to workers. The presenter also explains how to use Gemini 3.8 Flash through Anti-Gravity’s free plan, including the separate setup and provider limits. The final steps cover accessibility, responsive and interaction testing, reviewing code changes, and running the booking flow.

Key points

The Alto website brief calls for a cinematic mountain hero, a comparison of three cabins, and a booking inquiry that is easy to open.
Mood-board images and a rough sketch give the model specific visual and layout guidance.
The presenter uses Impeccable as the main design skill and Web App Testing for verification, while noting that Front-end Design is an alternative.
Build and review the hero first, checking readability and the booking button at narrow widths before adding more sections.
Delegate the cabin gallery and booking drawer as separate worker assignments, with shared design rules and distinct files.
The gallery should support cabin switching and keyboard controls; the booking drawer should include labeled fields, validation, Escape-to-close, and focus return.
Gemini 3.8 Flash can be used through Anti-Gravity’s free plan within provider limits, but it requires the official ACP connection and does not inherit another task’s conversation.
Finish with accessibility and responsive audits, interaction tests, screenshots, console checks, and a review of the changed-file diff.

Chapters

Start	Chapter	Summary

Quotes

That’s a brief the model can make decisions from. — 01:34

The sketch tells Opus where things belong. The references tell it how those things should feel. — 02:36

Resize the preview and check those things before asking for more sections. — 04:09

That separation matters. — 05:10

Give Opus a clear direction. Build and inspect the first section. Delegate the independent pieces. Then test the interactions. — 08:46

Concepts and entities

Opus 5.5, Gemini 3.8 Flash, Bamboo, Antigravity, Claude Code, Impeccable, web app testing, Jev, React, TypeScript

Full transcript (original language)

00:02 [music] Hi, welcome to another video. Today, let’s build a front end with Opus 5.5 that actually has some personality. We’re making a mountain retreat website with a cinematic opening, an interactive cabin gallery, and a booking drawer. I’ll also show the same workflow with Gemini 3.8 Flash through Anti-Gravity’s free quota. I’m using Bamboo because the references, models, browser, and worker setup are in one place. You can use these prompts in other coding tools as well. Bambood itself is $20 a month and

00:33 still in alpha. Your model account is separate, including when you’re using a provider’s free tier. So, let’s get into the actual build. Open your project in Bambood. Create a new task and choose claude code, then opus 5.5 from the model picker. Make sure claude code is updated and signed into an account with access. I’ll start with medium effort and increase it if the implementation needs more reasoning. Next, the skills. Anthropic’s front-end design is a good starting point for visual direction. Impeccable adds focused design commands and web app testing gives the agent a playright workflow for checking the

01:04 result. For this build, I’ll use impeccable as the main design skill with web app testing for verification. Front-end design is the lighter alternative if you prefer that. You don’t need both design skills arguing over the same page. Open the project terminal and run npx impeccable install. Choose the harness you’re using and a project install. I’ve put the exact commands for the testing skill in the description. After installation, start a fresh task and refresh the commands in bamboos/ menu. That menu reads what the harness exposes. It doesn’t install skills for you or transfer them between different agents. Before sending

01:34 anything, decide what this website needs to do. Mine is for a fictional retreat called Alto. Someone should understand the location. Compare three cabins and open a booking inquiry within a few clicks. The visual direction is a mountain panorama. Oversized typography, pale sky blue, and deep pine green. The opening should feel expansive. The cabin information should be easy to compare. That’s a brief the model can make decisions from. Now, open project mood boards and create a board called alto direction. Add a landscape reference, a

02:06 typography reference, and a reference for the booking interaction. Give each image a short caption. Use this one for the crop and depth. Use this one for headline proportions. Use this one for how the booking panel opens. We’re collecting specific decisions here. Rather than asking the model to copy somebody’s entire website for the Opus task, attach the selected reference images directly to the message as well. I’m using two images and keeping the important notes in the prompt so the model receives the visual context. Then click the plus button and choose sketch a mockup. Draw a large hero. Place the heading across the lower left and put

02:36 the booking button where someone can find it immediately. Under that, draw the cabin selector and an image gallery. This can be ugly. The sketch tells Opus where things belong. The references tell it how those things should feel. Attach the sketch to the message and we’ve given it something much more useful than make it premium. Now run /impeccable init and give it the alto brief. Keep the audience and required behavior in product.md and ask it to record the approved visual rules in design. These files give later edits something consistent to follow. Here’s the first build prompt. Build the Alto Mountain

03:07 Retreat website using the attached references and sketch. Use React, TypeScript, and CSS. Make the hero feel cinematic through the image composition and typography. Add one restrained opening animation and keep scrolling native. Build the hero and shared page structure first. Write the pallet, type scale, spacing, and component rules into design.md. Keep the booking button visible on mobile. Use the local image assets, respect reduced motion, and don’t invent

03:38 reviews or real booking availability. I also ask it to maintain the bamboo run script with the verified start command and preview address. Then open the result in Bambood’s browser. Let’s send that. We’re starting with the hero because it establishes the whole visual language. If that direction is wrong, I’d rather correct one section than redo the entire website. When it’s ready, use run in the header or beside the changed files summary. With the launch script in place, that starts the project in a terminal belonging to this task and opens the preview. You can also open the

04:09 browser panel and choose the running local server. Now review the actual page. Does the heading sit comfortably over the photograph? Can you read it? Does the booking button disappear at a narrow width? Resize the preview and check those things before asking for more sections. If something is wrong, use attach an element in the browser and select it. Add a screenshot when the problem depends on the surrounding layout. Then give a specific correction. For example, keep the current desktop composition, but move the mobile heading below the mountain ridge and keep the booking button above the fold. Fix only

04:39 the hero and check it again at phone width. You can also type at and pick the relevant component file that gives the agent a precise file reference. Use the file attachment option when you want to include its contents directly. Once the hero feels right, let’s finish the interactive sections with a team. Open team. Keep Opus 5.5 as the architect and add two workers. One owns the cabin gallery, the other owns the booking drawer. Set it once to two and save this as a front-end studio profile. The architect keeps ownership of the page

05:10 layout and shared design tokens. The gallery worker gets its component and styles. The booking worker gets a different component and styles. Both read the same design file. Here’s the instruction. Finish the page using two independent worker assignments. The gallery needs cabin switching, keyboard controls, and useful image descriptions. The booking drawer needs labeled fields. validation, escape to close, and focus returning to its trigger. Keep submissions local and show a clear demo confirmation. Give each worker separate files, then review and integrate their changes. That separation matters.

05:41 Increasing the parallel counter won’t help if both workers need to rewrite the same stylesheet. Shared edits can wait, so give the architect those files and let the workers handle independent components. Open Architect and workers to inspect each assignment and its progress. For anything spanning several rounds, ask workers to report what changed, what they tested, and what remains. The architect can use those checkpoints and team messages to coordinate the next step. Now, here’s the lowerc cost route. Google currently includes Gemini 3.8 flash in anti-gravity’s free plan within its weekly limits. To use it here, install

06:12 Google’s official anti-gravity ACP server and sign in through its supported Google login flow in bamboo open settings agents provider connections. then set up and point Antiggravity to that server executable. This is the official ACP connection. Installing the regular anti-gravity terminal command alone isn’t the same setup. Refresh agents and check the connection. For an all flash build, start a new task and select anti-gravity. Then, Gemini 3.8 flash from the models your account exposes. Give it the same brief direct

06:43 image attachments and design files. Install your chosen skills for anti-gravity, too. If you’ve already built part of the project with Opus, finish that run before handing the same files to another task. Ask Flash to read the current code and the design file first. The new harness doesn’t automatically inherit the previous conversation. You can also keep Opus as the architect and select anti-gravity with Flash for the workers. That’s a mixed cost setup. The Opus work still costs money and multiple Flash workers share your provider limits. I would start with two and watch usage rather than immediately selecting unlimited.

07:13 The agent usage button near settings shows limits where the provider makes them available. Google’s allowance can change, so don’t treat free as unlimited or assume an API cost estimate is your subscription bill. Let’s come back to the page and do the finishing pass. Run/impeccable audit for accessibility and responsive issues, then /impeccable polish for the remaining visual inconsistencies. Keep the approved direction. A polish pass shouldn’t randomly turn our mountain site into a different design. Ask the testing agent to open the page, switch all three cabins, use the gallery from the keyboard, and submit both valid and invalid booking details. Check a phone

07:45 layout as well as desktop. capture screenshots and report any console errors. Seeing a preview load is only the beginning of testing. If you already use the optional Jev add-on, test with Jev in the browser is another way to run that booking journey and watch its actions. It has its own setup and model credentials. It’s optional. The Playright workflow works without a Jev key. For a second visual direction, commit the current version and create a new task in a work tree from the branch menu. Try a different hero composition there that keeps the working design available while you experiment. Give

08:16 each preview server its own port so you know which version you’re looking at. For a larger project, put the remaining pages in pending on the board and start them when their brief is ready. Completed agent work goes to review where you can inspect it before marking the task complete. The quick overlay is useful for checking running tasks while you’re doing something else. Finally, open the changed files summary and review the diff. Check that the agent edited the expected components, kept the design tokens consistent, and didn’t add a huge dependency for a small animation. Run the project once more and walk through the booking flow yourself.

08:46 That’s the workflow I’d use. Give Opus a clear direction. Build and inspect the first section. Delegate the independent pieces. Then test the interactions. Flash gives you another model option without an extra model subscription within its free allowance. Keep the brief and feedback loop just as specific whichever one you choose. Overall, it’s pretty cool. Anyway, let me know your thoughts in the comments. [music] If you like this video, consider donating through the super thanks option or becoming a member by clicking the join button. Also, give this video [music] a thumbs up and subscribe to my channel. I’ll see

09:17 you in the next one. Until then, bye.