Opus 5.5 em modo divino para frontend (+ opções grátis): sim, é melhor que 99% dos designers humanos!

Autoria: AICodeKing · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: Opus 5.5 FRONTEND GOD MODE (+Free Options): Yeah, THIS IS BETTER THAN 99% OF HUMAN DESIGNERS! · Canal: AICodeKing · 09:17 · Assistir no YouTube

Tópicos: Agentes de IA, Engenharia de software com IA, Modelos de IA

Resumo

O vídeo mostra como criar um site de retiro na montanha com Opus 5.5, usando referências visuais, um esboço e instruções específicas para orientar o design. O fluxo de trabalho inclui construir primeiro a seção principal, revisar o resultado no navegador e delegar componentes independentes a workers. Também apresenta uma alternativa com Gemini 3.8 Flash pela cota gratuita do Anti-Gravity e uma configuração mista com Opus como arquiteto. Por fim, recomenda verificar acessibilidade, responsividade, interações, erros no console e alterações no diff.

Pontos-chave

Defina o público, o objetivo do site e uma direção visual concreta antes de pedir a implementação.
Use referências visuais com legendas e um esboço para comunicar composição e posicionamento.
Construa e revise primeiro a seção principal antes de expandir o site.
Dê feedback específico com o navegador, capturas de tela ou referências aos arquivos relevantes.
Delegue componentes independentes a workers e evite que vários workers editem os mesmos arquivos.
Gemini 3.8 Flash pode ser usado pelo Anti-Gravity dentro dos limites da cota gratuita, que pode mudar.
Teste acessibilidade, responsividade, navegação por teclado, validação do formulário e fluxo de reserva.
Revise o diff, confirme a consistência dos design tokens e verifique as dependências adicionadas.

Capítulos

Início	Capítulo	Resumo
00:02	Configuração e direção visual	O vídeo apresenta o projeto, configura Opus 5.5 e reúne referências e um esboço para orientar o design.
02:36	Construção e revisão da seção principal	O modelo recebe o brief e implementa primeiro o hero, que é revisado em diferentes larguras de tela.
05:10	Workers e alternativa com Gemini Flash	O trabalho é dividido entre workers para a galeria e o painel de reservas, e o vídeo explica como usar Gemini 3.8 Flash pelo Anti-Gravity.
07:45	Testes, refinamento e revisão final	O vídeo recomenda testar os fluxos e layouts, experimentar outra direção visual e revisar o diff antes de concluir.

Citações

O esboço mostra ao Opus onde as coisas ficam. As referências mostram como elas devem parecer. — 02:36

Se algo estiver errado, faça uma correção específica. — 04:09

Aumentar o número de workers não ajuda se ambos precisam reescrever a mesma folha de estilos. — 05:41

Não trate o grátis como ilimitado. — 07:13

Dê ao Opus uma direção clara. Construa e inspecione a primeira seção. Delegue as partes independentes. Depois, teste as interações. — 08:46

Conceitos e entidades

Opus 5.5 (modelo): Modelo usado como arquiteto para orientar a criação do site e coordenar workers.
Gemini 3.8 Flash (modelo): Modelo apresentado como alternativa de menor custo por meio da cota gratuita do Anti-Gravity.
Bamboo (ferramenta): Ambiente usado para reunir referências, modelos, navegador e configuração de workers.
Antigravity (ferramenta): Ferramenta usada para acessar Gemini 3.8 Flash e, no exemplo, executar workers.
Claude Code (ferramenta): Harness selecionado para executar Opus 5.5 no fluxo de criação.
Impeccable (ferramenta): Skill usada para orientar o design e executar comandos de auditoria e refinamento visual.
web app testing (ferramenta): Skill que fornece um workflow de Playwright para verificar o resultado no navegador.
Jev (ferramenta): Complemento opcional mencionado para testar fluxos no navegador.
React (ferramenta): Biblioteca indicada para implementar o site.
TypeScript (ferramenta): Linguagem indicada para implementar o site junto com React e CSS.

Tradução completa (pt-BR)

00:02 [música] Oi, bem-vindos a mais um vídeo. Hoje, vamos criar um frontend com Opus 5.5 que realmente tenha personalidade. Vamos fazer um site para um refúgio nas montanhas, com uma abertura cinematográfica, uma galeria interativa de cabanas e um painel deslizante de reservas. Também vou mostrar o mesmo workflow com Gemini 3.8 Flash usando a cota gratuita do Anti-Gravity. Estou usando Bamboo porque as referências, os modelos, o navegador e a configuração dos workers ficam em um só lugar. Você também pode usar estes prompts em outras ferramentas de programação. O próprio Bamboo custa US$ 20 por mês e

00:33 ainda está em alfa. Sua conta do modelo é separada, inclusive quando você usa o nível gratuito de um provedor. Então, vamos começar a criação de verdade. Abra seu projeto no Bamboo. Crie uma nova tarefa e escolha Claude Code; depois, selecione Opus 5.5 no seletor de modelos. Confira se o Claude Code está atualizado e conectado a uma conta com acesso. Vou começar com esforço médio e aumentá-lo se a implementação precisar de mais raciocínio. Agora, as skills. A Front-End Design da Anthropic é um bom ponto de partida para a direção visual. Impeccable adiciona comandos de design específicos, e Web App Testing dá ao agent um workflow com Playwright para verificar o

01:04 resultado. Para esta criação, vou usar Impeccable como a principal skill de design e Web App Testing para verificação. Front-End Design é a alternativa mais simples, se você preferir. Você não precisa das duas skills de design disputando o controle da mesma página. Abra o terminal do projeto e execute npx impeccable install. Escolha o harness que está usando e uma instalação no projeto. Coloquei na descrição os comandos exatos para a skill de testes. Depois da instalação, inicie uma tarefa nova e atualize os comandos no menu /bamboo. Esse menu mostra o que o harness disponibiliza. Ele não instala skills para você nem as transfere entre agents diferentes. Antes de enviar

01:34 qualquer coisa, decida o que este site precisa fazer. O meu é para um refúgio fictício chamado Alto. A pessoa deve conseguir entender onde fica, comparar três cabanas e abrir uma solicitação de reserva em poucos cliques. A direção visual é um panorama de montanhas, tipografia de grandes dimensões, azul-claro pálido e verde-pinheiro profundo. A abertura deve dar uma sensação de amplitude. As informações das cabanas devem ser fáceis de comparar. Esse é um briefing com base no qual o modelo pode tomar decisões. Agora, abra os quadros de inspiração do projeto e crie um quadro chamado alto direction. Adicione uma referência de paisagem, uma

02:06 referência de tipografia e uma referência para a interação de reserva. Dê uma legenda curta a cada imagem. Use esta para o enquadramento e a profundidade. Use esta para as proporções do título. Use esta para mostrar como o painel de reservas se abre. Estamos reunindo aqui decisões específicas. Em vez de pedir ao modelo que copie o site inteiro de alguém para a tarefa com Opus, anexe as imagens de referência selecionadas diretamente à mensagem também. Estou usando duas imagens e mantendo as observações importantes no prompt para que o modelo receba o contexto visual. Depois, clique no botão de mais e escolha esboçar um mockup. Desenhe uma seção principal grande. Coloque o título na parte inferior esquerda e posicione

02:36 o botão de reserva onde as pessoas possam encontrá-lo imediatamente. Abaixo, desenhe o seletor de cabanas e uma galeria de imagens. Não precisa ficar bonito. O esboço mostra ao Opus onde cada coisa deve ficar. As referências mostram a sensação que cada elemento deve transmitir. Anexe o esboço à mensagem e teremos dado a ele algo muito mais útil do que “deixe com cara de premium”. Agora, execute /impeccable init e passe a ele o briefing do Alto. Mantenha o público e o comportamento necessário em product.md e peça que registre as regras visuais aprovadas em design. Esses arquivos dão às edições posteriores orientações consistentes. Aqui está o prompt da primeira versão. Crie o site do Alto Mountain

03:07 Retreat usando as referências e o esboço anexados. Use React, TypeScript e CSS. Dê à seção principal um ar cinematográfico por meio da composição da imagem e da tipografia. Adicione uma animação inicial discreta e mantenha a rolagem nativa. Primeiro, crie a seção principal e a estrutura compartilhada da página. Registre a paleta, a escala tipográfica, os espaçamentos e as regras dos componentes em design.md. Mantenha o botão de reserva visível em dispositivos móveis. Use os recursos de imagem locais, respeite a preferência por movimento reduzido e não invente

03:38 avaliações nem disponibilidade real para reservas. Também peço que mantenha o script de execução do Bamboo com o comando de inicialização verificado e o endereço de pré-visualização. Depois, abra o resultado no navegador do Bamboo. Vamos enviar. Estamos começando pela seção principal porque ela estabelece toda a linguagem visual. Se essa direção estiver errada, prefiro corrigir uma seção a refazer o site inteiro. Quando estiver pronto, use Executar no cabeçalho ou ao lado do resumo dos arquivos alterados. Com o script de inicialização pronto, isso inicia o projeto em um terminal pertencente a esta tarefa e abre a pré-visualização. Você também pode abrir o painel do

04:09 navegador e escolher o servidor local em execução. Agora, confira a página de verdade. O título fica bem posicionado sobre a fotografia? Dá para ler? O botão de reserva desaparece em uma tela estreita? Redimensione a pré-visualização e verifique esses pontos antes de pedir mais seções. Se algo estiver errado, use Anexar elemento no navegador e selecione-o. Adicione uma captura de tela quando o problema depender do layout ao redor. Depois, indique uma correção específica. Por exemplo: mantenha a composição atual para desktop, mas mova o título para baixo da crista da montanha em dispositivos móveis e mantenha o botão de reserva acima da dobra. Corrija apenas

04:39 a seção principal e confira novamente na largura de um celular. Você também pode digitar @ e escolher o arquivo do componente relevante para dar ao agent uma referência precisa de arquivo. Use a opção de anexar arquivo quando quiser incluir o conteúdo dele diretamente. Quando a seção principal estiver boa, vamos terminar as seções interativas com uma equipe. Abra Equipe. Mantenha Opus 5.5 como arquiteto e adicione dois workers. Um será responsável pela galeria de cabanas; o outro, pelo painel deslizante de reservas. Defina esse número como dois e salve como um perfil de estúdio de frontend. O arquiteto continua responsável pelo layout da página

05:10 e pelos tokens de design compartilhados. O worker da galeria recebe o componente e os estilos dele. O worker de reservas recebe outro componente e outros estilos. Ambos leem o mesmo arquivo de design. Aqui estão as instruções. Termine a página com duas tarefas independentes para os workers. A galeria precisa permitir a troca de cabanas, ter controles pelo teclado e descrições úteis das imagens. O painel deslizante de reservas precisa de campos com rótulos, validação, fechamento com Escape e retorno do foco ao elemento que o acionou. Mantenha os envios locais e mostre uma confirmação de demonstração clara. Atribua arquivos separados a cada worker e, depois, revise e integre as alterações. Essa separação é importante.

05:41 Aumentar o contador de tarefas paralelas não vai ajudar se os dois workers precisarem reescrever a mesma folha de estilos. As edições compartilhadas podem esperar; atribua esses arquivos ao arquiteto e deixe os workers cuidarem de componentes independentes. Abra Arquiteto e workers para inspecionar cada tarefa e seu progresso. Para qualquer trabalho que se estenda por várias rodadas, peça aos workers que informem o que mudou, o que testaram e o que ainda falta. O arquiteto pode usar esses pontos de verificação e as mensagens da equipe para coordenar a próxima etapa. Agora, aqui está a opção mais econômica. Atualmente, o Google inclui Gemini 3.8 Flash no plano gratuito do Anti-Gravity, sujeito aos limites semanais. Para usá-lo aqui, instale

06:12 o servidor ACP oficial do Anti-Gravity do Google e entre usando o fluxo de login do Google compatível, em Bamboo > abrir configurações > agents > conexões de provedores. Em seguida, configure o Anti-Gravity para apontar para o executável desse servidor. Esta é a conexão ACP oficial. Instalar apenas o comando de terminal padrão do Anti-Gravity não é a mesma configuração. Atualize a lista de agents e confira a conexão. Para criar tudo com Flash, inicie uma nova tarefa e selecione Anti-Gravity. Depois, escolha Gemini 3.8 Flash entre os modelos disponibilizados pela sua conta. Forneça a ele o mesmo briefing, os anexos de imagem diretamente

06:43 e os arquivos de design. Instale também as skills escolhidas para o Anti-Gravity. Se você já criou parte do projeto com Opus, termine essa execução antes de entregar os mesmos arquivos a outra tarefa. Peça ao Flash que leia primeiro o código atual e o arquivo de design. O novo harness não herda automaticamente a conversa anterior. Você também pode manter Opus como arquiteto e selecionar Anti-Gravity com Flash para os workers. Essa é uma configuração de custos mistos. O trabalho com Opus ainda custa dinheiro, e vários workers com Flash compartilham os limites do seu provedor. Eu começaria com dois e acompanharia o uso, em vez de selecionar um número ilimitado logo de cara.

07:13 O botão de uso do agent, perto das configurações, mostra os limites quando o provedor os disponibiliza. A franquia do Google pode mudar, então não trate o nível gratuito como ilimitado nem presuma que uma estimativa de custo de API corresponde à fatura da sua assinatura. Vamos voltar à página e fazer o acabamento. Execute /impeccable audit para encontrar problemas de acessibilidade e de adaptação a diferentes telas; depois, use /impeccable polish para corrigir as inconsistências visuais restantes. Mantenha a direção aprovada. Uma etapa de acabamento não deve transformar aleatoriamente nosso site de montanha em outro design. Peça ao agent de testes que abra a página, alterne entre as três cabanas, use a galeria pelo teclado e envie dados de reserva válidos e inválidos. Confira em um celular

07:45 layout, assim como no desktop. Capture screenshots e informe quaisquer erros no console. Ver um preview carregar é só o começo dos testes. Se você já usa o complemento opcional Jev, testar com Jev no navegador é outra maneira de percorrer essa jornada de reserva e acompanhar as ações dele. Ele tem sua própria configuração e credenciais de modelo. É opcional. O workflow do Playwright funciona sem uma chave do Jev. Para uma segunda direção visual, faça commit da versão atual e crie uma nova tarefa em uma árvore de trabalho pelo menu da branch. Experimente ali uma composição diferente para o hero, mantendo o design funcional disponível enquanto você experimenta. Dê

08:16 a cada servidor de preview sua própria porta, para saber qual versão está vendo. Em um projeto maior, coloque as páginas restantes como pendentes no quadro e comece a trabalhar nelas quando o briefing estiver pronto. O trabalho concluído do agent vai para revisão, onde você pode inspecioná-lo antes de marcar a tarefa como concluída. A sobreposição rápida é útil para verificar tarefas em andamento enquanto você faz outra coisa. Por fim, abra o resumo dos arquivos alterados e revise o diff. Confira se o agent editou os componentes esperados, manteve a consistência dos tokens de design e não adicionou uma dependência enorme para uma animação pequena. Execute o projeto mais uma vez e percorra você mesmo o fluxo de reserva.

08:46 Esse é o workflow que eu usaria. Dê ao Opus uma direção clara. Construa e inspecione a primeira seção. Delegue as partes independentes. Depois, teste as interações. O Flash oferece outra opção de modelo sem uma assinatura adicional de modelo, dentro do limite gratuito. Seja específico no briefing e no ciclo de feedback, qualquer que seja a opção escolhida. No geral, é bem legal. Enfim, me conte o que acha nos comentários. [música] Se você gostou deste vídeo, considere fazer uma doação pela opção Super Thanks ou se tornar membro clicando no botão Participar. Além disso, dê um joinha neste vídeo [música] e inscreva-se no meu canal. Vejo

09:17 você no próximo vídeo. Até lá, tchau.

Transcrição original

[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.