Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.
Cada bloco no Canvas é um frame. Frames são o que você seleciona, arrasta e sobre o que age. Esta página cobre os tipos de frame, a barra de ações por frame que aparece na seleção e as capacidades que você aciona a partir dela: Build e Focus.
Os dois tipos principais são Artifacts (superfícies vivas, com um app por trás) e Designs (mockups). O cabeçalho no canto superior esquerdo do frame mostra qual tipo ele é.
Tipo
Rótulo do cabeçalho
Baseado em
Interage como um app ao vivo?
Converte em um app real?
Artifact
Website, Slides, etc.
Um artefato em execução
Sim
Já é um app.
Mobile artifact
Mobile app
Um artefato em execução
Sim (no simulador)
Já é um app.
Design
Design
Mockup estático / interativo
Apenas como frame interativo
Sim — através do menu Build… por frame. Veja Build.
Image
Image
PNG / JPG gerado
Não
Não — use como referência.
Video
Video
Vídeo gerado
Não
Não.
Vector graphic
Graphic
SVG gerado
Não
Não — incorpore em um app real.
Se um frame de Design se comporta como uma imagem estática ou como um protótipo interativo depende da capacidade Interactive frames. Quando está ativada, os frames de Design respondem a cliques e a entradas de formulário como uma página real; caso contrário, são renderizados como um instantâneo sobre o qual você pode iterar, mas não clicar.
Veja como um design fica em diferentes tamanhos de tela. Peça ao Agent para mostrar uma versão mobile, tablet ou desktop, por exemplo “Mostre a versão mobile desta página”, e ele renderiza um frame nesse tamanho:
Para frames de Artifact (Website, Slides, etc.) e de Design, a barra de ações fica na parte superior do frame.
A barra de ações de um frame de Design: Build…, Focus e mais opções.
O conjunto de ações se comprime em ícones em larguras estreitas e revela rótulos conforme o frame fica mais largo. O conjunto completo, em ordem da esquerda para a direita:
Abre um menu listando cada Artifact do projeto — escolha um para aplicar o design a ele, ou escolha Build this design para criar um novo Artifact. Apenas frames de Design. Veja Build.
Focus
Entra no modo de foco, expandindo o frame como a visão principal.
More (…)
Ações adicionais do frame. Copiar, duplicar, reordenar e exportar também estão disponíveis no menu de clique direito do quadro.
Frames de app (Website, Slides, Mobile app) mostram Focus e mais opções; frames de Design adicionam Build… antes deles. Para ramificar novas direções a partir de um frame selecionado, siga suas sugestões.Selecionar um frame também o anexa à próxima mensagem de chat do Agent como um instantâneo — veja O que existe no canvas.
A barra de ações respeita o modo somente leitura. Quando o Canvas está bloqueado dentro de um contexto de tarefa em segundo plano, as ações de iteração ficam ocultas e apenas Focus permanece.
Selecionar um frame exibe sugestões ao lado dele: direções de um clique baseadas no que você está vendo, como um layout diferente, uma nova vibe ou uma página que seu design sugere. Cada uma é gerada como um novo frame ao lado da fonte, então o original permanece intocado e você pode comparar.
O menu Build… em um frame de Design selecionado transforma o design em um app real e em execução. O mesmo menu também cobre a aplicação do design a um Artifact que já existe.
Escolher Build this design no menu inicia um novo Artifact a partir do frame de Design selecionado. O novo Artifact entra na lista de artefatos do projeto e se torna um app real e em execução. O Build requer Core ou Pro.
O menu Build… lista cada Artifact do projeto. Escolher um aplica as mudanças do Design selecionado a esse Artifact — o Agent reescreve o código do Artifact para corresponder ao design, deixando o frame de Design no Canvas como referência.
Toolbar — a barra de ferramentas flutuante; Generate cria novos frames.
Elements — as peças individuais dentro de um frame.
Visual Editor — edições no nível de elemento dentro de um frame em foco.
Esta página foi útil?
{"docsConfig":{"theme":"aspen","$schema":"https://mintlify.com/docs.json","name":"Replit","colors":{"primary":"#FF3C00","light":"#FF3C00","dark":"#FF3C00"},"logo":{"light":"https://mintcdn.com/replit/j4of5To8jzehz0JK/logo/light.svg?fit=max\u0026auto=format\u0026n=j4of5To8jzehz0JK\u0026q=85\u0026s=6209cb5927b56fd1781133af05428373","dark":"https://mintcdn.com/replit/j4of5To8jzehz0JK/logo/dark.svg?fit=max\u0026auto=format\u0026n=j4of5To8jzehz0JK\u0026q=85\u0026s=9cbba158300d48c49d8b888e71015495","href":"/welcome"},"favicon":"https://mintcdn.com/replit/CmOMKRnamiqG44eH/favicon.ico?fit=max\u0026auto=format\u0026n=CmOMKRnamiqG44eH\u0026q=85\u0026s=c89a6df6f537373c946c7a5f0ac65475","appearance":{"default":"light"},"background":{"color":{"light":"#F6F5F4","dark":"#1E1E1F"}},"navbar":{"links":[],"primary":{"type":"button","label":"Start Building","href":"https://replit.com?ref=docs"}},"footer":{"socials":{"x":"https://x.com/replit","linkedin":"https://www.linkedin.com/company/repl-it","youtube":"https://www.youtube.com/@replit"}},"seo":{"metatags":{"og:site_name":"Replit Docs","twitter:site":"@replit","twitter:creator":"@replit","author":"Replit"},"indexing":"all"},"fonts":{"heading":{"family":"ABC Diatype Plus","weight":400,"source":"https://cdn.replit.com/dotcom/fonts/ABCDiatypePlusVariable.woff2","format":"woff2"},"body":{"family":"ABC Diatype Plus","weight":400,"source":"https://cdn.replit.com/dotcom/fonts/ABCDiatypePlusVariable.woff2","format":"woff2"}},"integrations":{"segment":{"key":"dMePKGC4BqfBivpe0Hvl8IoPpzSHgjdX"}},"contextual":{"options":["copy","view"],"display":"header"},"thumbnails":{"appearance":"light","background":"https://mintcdn.com/replit/j4of5To8jzehz0JK/thumb.png?fit=max\u0026auto=format\u0026n=j4of5To8jzehz0JK\u0026q=85\u0026s=a7db7f0256b2fa06810fb4d378e63cc5","fonts":{"family":"ABC Diatype Plus"}},"styling":{"latex":true},"navigation":{"languages":[{"language":"en","href":"welcome"},{"language":"fr","navbar":{"links":[],"primary":{"type":"button","label":"Commencer à créer","href":"https://replit.com?ref=docs"}},"href":"fr/welcome"},{"language":"pt","hidden":false,"navbar":{"links":[],"primary":{"type":"button","label":"Comece a criar","href":"https://replit.com?ref=docs"}},"href":"pt/welcome"},{"language":"ja","hidden":false,"navbar":{"links":[],"primary":{"type":"button","label":"作成を開始","href":"https://replit.com?ref=docs"}},"href":"ja/welcome"},{"language":"ko","hidden":false,"navbar":{"links":[],"primary":{"type":"button","label":"빌드 시작하기","href":"https://replit.com?ref=docs"}},"href":"ko/welcome"}]}},"deployment":{"deploymentMetadataValue":{"subdomain":"replit","hasAudioNarration":false,"actualSubdomain":"replit","customDomains":["docs.replit.com","docs.repl.it"],"gitSource":{"type":"github","owner":"replit","repo":"replit-docs","deployBranch":"main","contentDirectory":"docs","isPrivate":true,"mountPath":"","label":""},"feedback":{"thumbs":true,"issues":true,"edits":false},"entitlements":{"AI_CHAT":{"status":"DISABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"CONTEXTUAL_FEEDBACK":{"status":"ENABLED"},"CODE_SNIPPET_FEEDBACK":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"DISABLED"}},"buildId":"6af05876198d4fbfea6de5df","clientVersion":"0.0.4088","searchFilterCounts":[{"language":"en","tag":"Features","count":360},{"language":"fr","tag":"Fonctionnalités","count":360},{"language":"ja","tag":"機能","count":360},{"language":"ko","tag":"기능","count":360},{"language":"pt","tag":"Funcionalidades","count":360},{"language":"en","tag":"Changelog","count":100},{"language":"fr","tag":"Journal des modifications","count":100},{"language":"ja","tag":"変更履歴","count":100},{"language":"ko","tag":"변경 내역","count":100},{"language":"pt","tag":"Registro de alterações","count":100},{"language":"en","tag":"Apps","count":41},{"language":"fr","tag":"Apps","count":41},{"language":"ja","tag":"Apps","count":41},{"language":"ko","tag":"Apps","count":41},{"language":"pt","tag":"Apps","count":41},{"language":"en","tag":"Enterprise","count":40},{"language":"fr","tag":"Entreprise","count":40},{"language":"ja","tag":"Enterprise","count":40},{"language":"ko","tag":"Enterprise","count":40},{"language":"pt","tag":"Enterprise","count":40},{"language":"en","tag":"Use cases","count":39},{"language":"fr","tag":"Use cases","count":39},{"language":"ja","tag":"Use cases","count":39},{"language":"ko","tag":"Use cases","count":39},{"language":"pt","tag":"Use cases","count":39},{"language":"en","tag":"Chats","count":25},{"language":"en","tag":"Designs","count":25},{"language":"fr","tag":"Chats","count":25},{"language":"fr","tag":"Designs","count":25},{"language":"ja","tag":"Chats","count":25},{"language":"ja","tag":"Designs","count":25},{"language":"ko","tag":"Chats","count":25},{"language":"ko","tag":"Designs","count":25},{"language":"pt","tag":"Chats","count":25},{"language":"pt","tag":"Designs","count":25},{"language":"en","tag":"Trust \u0026 Billing","count":23},{"language":"fr","tag":"Confiance et facturation","count":23},{"language":"ja","tag":"信頼と請求","count":23},{"language":"ko","tag":"신뢰 및 결제","count":23},{"language":"pt","tag":"Confiança e faturamento","count":23},{"language":"en","tag":"Web","count":22},{"language":"fr","tag":"Web","count":22},{"language":"ja","tag":"Web","count":22},{"language":"ko","tag":"Web","count":22},{"language":"pt","tag":"Web","count":22},{"language":"en","tag":"Help","count":20},{"language":"fr","tag":"Help","count":20},{"language":"ja","tag":"Help","count":20},{"language":"ko","tag":"Help","count":20},{"language":"pt","tag":"Help","count":20}]},"assistantConfig":{"deflection":{"enabled":true,"email":"support@replit.com"}},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"comment-mode","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"styles.css","href":"/_mintlify/custom/replit/795eee5cda55dee3/styles.css"}],"page":{"pagePath":"pt/design/frames","slug":"/pt/design/frames","pageMetadata":{"title":"Frames","sidebarTitle":"Frames","description":"Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.","icon":"square-dashed","href":"/pt/design/frames"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,li:`li`,p:`p`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{Frame,Heading,Note,OptimizedImage,Step,Steps,Table}=_components;if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Note)_missingMdxReference(`Note`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Step)_missingMdxReference(`Step`,true);if(!Steps)_missingMdxReference(`Steps`,true);if(!Table)_missingMdxReference(`Table`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`Cada bloco no Canvas é um `,_jsx(_components.strong,{children:`frame`}),`. Frames são o que você seleciona, arrasta e sobre o que age. Esta página cobre os tipos de frame, a barra de ações por frame que aparece na seleção e as capacidades que você aciona a partir dela: Build e Focus.`]}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=5cd2330c89bbdedfb249151ee582f070`,alt:`Canvas com três frames dispostos no quadro: um Website (Scroll Hero), um APEX X1 Design System e um mockup de Design do supercarro APEX X1, com a barra de ferramentas flutuante (Chat, Draw, Edit, Generate) na parte inferior`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1255`,height:`1255`,\"data-path\":`images/replitai/canvas-overview.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=d06d2d847a1e7825d9ed02721cb45ef4 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=d36061ea203905e997c06543df7f5e90 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=4b12d30a5272d12ddee82e069b8cf956 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=35ec06ddafe8185d048022c5ddb9b1c1 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=9603f817be4e8e6939f5fd602e758380 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=665321e78f3e12f9707654cde1969bcb 2500w`})}),`\n`,_jsx(Heading,{level:`2`,id:`tipos-de-frame`,children:`Tipos de frame`}),`\n`,_jsxs(_components.p,{children:[`Os dois tipos principais são `,_jsx(_components.strong,{children:`Artifacts`}),` (superfícies vivas, com um app por trás) e `,_jsx(_components.strong,{children:`Designs`}),` (mockups). O cabeçalho no canto superior esquerdo do frame mostra qual tipo ele é.`]}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Tipo`}),_jsx(_components.th,{children:`Rótulo do cabeçalho`}),_jsx(_components.th,{children:`Baseado em`}),_jsx(_components.th,{children:`Interage como um app ao vivo?`}),_jsx(_components.th,{children:`Converte em um app real?`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Artifact`}),_jsxs(_components.td,{children:[_jsx(_components.strong,{children:`Website`}),`, `,_jsx(_components.strong,{children:`Slides`}),`, etc.`]}),_jsx(_components.td,{children:`Um artefato em execução`}),_jsx(_components.td,{children:`Sim`}),_jsx(_components.td,{children:`Já é um app.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Mobile artifact`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Mobile app`})}),_jsx(_components.td,{children:`Um artefato em execução`}),_jsx(_components.td,{children:`Sim (no simulador)`}),_jsx(_components.td,{children:`Já é um app.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Design`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Design`})}),_jsx(_components.td,{children:`Mockup estático / interativo`}),_jsx(_components.td,{children:`Apenas como frame interativo`}),_jsxs(_components.td,{children:[`Sim — através do menu `,_jsx(_components.strong,{children:`Build…`}),` por frame. Veja `,_jsx(_components.a,{href:`#build`,children:`Build`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Image`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Image`})}),_jsx(_components.td,{children:`PNG / JPG gerado`}),_jsx(_components.td,{children:`Não`}),_jsx(_components.td,{children:`Não — use como referência.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Video`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Video`})}),_jsx(_components.td,{children:`Vídeo gerado`}),_jsx(_components.td,{children:`Não`}),_jsx(_components.td,{children:`Não.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Vector graphic`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Graphic`})}),_jsx(_components.td,{children:`SVG gerado`}),_jsx(_components.td,{children:`Não`}),_jsx(_components.td,{children:`Não — incorpore em um app real.`})]})]})]}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[`Se um frame de Design se comporta como uma imagem estática ou como um protótipo interativo depende da capacidade `,_jsx(_components.strong,{children:`Interactive frames`}),`. Quando está ativada, os frames de Design respondem a cliques e a entradas de formulário como uma página real; caso contrário, são renderizados como um instantâneo sobre o qual você pode iterar, mas não clicar.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`visualize-em-diferentes-dispositivos`,children:`Visualize em diferentes dispositivos`}),`\n`,_jsx(_components.p,{children:`Veja como um design fica em diferentes tamanhos de tela. Peça ao Agent para mostrar uma versão mobile, tablet ou desktop, por exemplo “Mostre a versão mobile desta página”, e ele renderiza um frame nesse tamanho:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Mobile`}),`: 390 × 844`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Tablet`}),`: 768 × 1024`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Desktop`}),`: 1280 × 720`]}),`\n`]}),`\n`,_jsx(Heading,{level:`2`,id:`barra-de-ações-por-frame`,children:`Barra de ações por frame`}),`\n`,_jsx(_components.p,{children:`Selecionar um frame exibe uma barra de ações. As ações dependem do tipo do frame.`}),`\n`,_jsx(Heading,{level:`3`,id:`frames-de-artifact-e-design`,children:`Frames de Artifact e Design`}),`\n`,_jsx(_components.p,{children:`Para frames de Artifact (Website, Slides, etc.) e de Design, a barra de ações fica na parte superior do frame.`}),`\n`,_jsx(Frame,{caption:`A barra de ações de um frame de Design: Build…, Focus e mais opções.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=c767372a08966097abccb48bf11591c7`,alt:`Canvas com um frame de Design APEX X1 selecionado, mostrando a barra de ações por frame na parte superior com o rótulo do tipo e as ações Build, Focus e mais opções, o frame anexado como um chip na caixa de prompt do chat`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1290`,height:`1290`,\"data-path\":`images/replitai/canvas-frame-action-bar.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=f78ad071f18fd801f51a093f1f8585c7 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=06ce7dfd524174f04bb975741ea8f56d 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=74891f932f9b9d52ea243e4fe13b16a5 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=408eeae9da878b22cee56a9970447ab0 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=ffec2489043c763cb85bab90804828a8 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=bf51528515e672cea2365f3de7517218 2500w`})}),`\n`,_jsx(_components.p,{children:`O conjunto de ações se comprime em ícones em larguras estreitas e revela rótulos conforme o frame fica mais largo. O conjunto completo, em ordem da esquerda para a direita:`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Ação`}),_jsx(_components.th,{children:`O que faz`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Export`}),_jsxs(_components.td,{children:[`Baixa o frame como um PNG. Veja `,_jsx(_components.a,{href:`/pt/design/canvas#export-a-frame-as-png`,children:`Exporte um frame como PNG`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Build…`}),_jsxs(_components.td,{children:[`Abre um menu listando cada Artifact do projeto — escolha um para aplicar o design a ele, ou escolha `,_jsx(_components.strong,{children:`Build this design`}),` para criar um novo Artifact. Apenas frames de Design. Veja `,_jsx(_components.a,{href:`#build`,children:`Build`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Focus`}),_jsx(_components.td,{children:`Entra no modo de foco, expandindo o frame como a visão principal.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`More (…)`}),_jsxs(_components.td,{children:[`Ações adicionais do frame. Copiar, duplicar, reordenar e exportar também estão disponíveis no `,_jsx(_components.a,{href:`/pt/design/canvas#right-click-menu`,children:`menu de clique direito`}),` do quadro.`]})]})]})]}),`\n`,_jsxs(_components.p,{children:[`Frames de app (Website, Slides, Mobile app) mostram Focus e mais opções; frames de Design adicionam Build… antes deles. Para ramificar novas direções a partir de um frame selecionado, siga suas `,_jsx(_components.a,{href:`/pt/design/explore-suggestions`,children:`sugestões`}),`.`]}),`\n`,_jsxs(_components.p,{children:[`Selecionar um frame também o anexa à próxima mensagem de chat do Agent como um instantâneo — veja `,_jsx(_components.a,{href:`/pt/design/canvas#what-lives-on-the-canvas`,children:`O que existe no canvas`}),`.`]}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[`A barra de ações respeita o `,_jsx(_components.strong,{children:`modo somente leitura`}),`. Quando o Canvas está bloqueado dentro de um contexto de tarefa em segundo plano, as ações de iteração ficam ocultas e apenas Focus permanece.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`frames-de-mídia`,children:`Frames de mídia`}),`\n`,_jsx(_components.p,{children:`Frames de Image, Video e Vector graphic mostram uma pequena barra de ações flutuante acima do frame. Os três tipos compartilham:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Replace media`}),`: envie um novo arquivo para trocar no frame, mantendo sua posição e tamanho no Canvas.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Download`}),`: salve o arquivo de mídia no seu computador.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Alt text`}),`: adicione texto alternativo para acessibilidade e para que o Agent tenha mais contexto quando o frame for referenciado.`]}),`\n`]}),`\n`,_jsx(Frame,{caption:`A barra de ações de um frame de vídeo: Replace media, Download e Alt text.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=dde933bc1e78e6cc413a9dd15f73fc2e`,alt:`Um frame de vídeo selecionado de um supercarro azul no Canvas com sua barra de ações flutuante acima, mostrando os controles Replace media, Download (com uma dica de ferramenta lendo 'Download original') e Alt text.`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1252`,height:`1252`,\"data-path\":`images/replitai/canvas-frame-video-actions.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=a6934949e42b5753b11ca6dbc6821140 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=7cce73da51e2bdda044990dff00ed309 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=6a4e93f1c3e962846a7d47e569befd10 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=f2ad4b15c0c550070f6cf40f0172ad1e 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=1182bb4b2b46f74c7596a1b914c61acb 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=b6cf3ec11c245b5780a5fa9054ad7c9b 2500w`})}),`\n`,_jsx(_components.p,{children:`Frames de imagem adicionam mais dois controles:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Crop`}),`: recorte a imagem diretamente no Canvas.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Generate video`}),`: gere um clipe de vídeo a partir da imagem.`]}),`\n`]}),`\n`,_jsx(Frame,{caption:`A barra de ações de um frame de imagem adiciona Crop e Generate video.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=95c35379724d57a518efa0578fe0183c`,alt:`Um frame de imagem selecionado de um supercarro amarelo no Canvas com sua barra de ações flutuante acima, mostrando os controles Replace media, Crop, Download, Alt text e Generate video.`,\"data-og-width\":`1600`,width:`1600`,\"data-og-height\":`1002`,height:`1002`,\"data-path\":`images/replitai/canvas-frame-image-actions.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=f5e91c28486e80fb1f1929cf08927229 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=e581a32796ebeb696c61750fa6da3929 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=66b533a1308bcf02380f3fd60420ba42 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=8210cb95c7591acc604a2da833ef30c0 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=c2e9a84035ae29f2676ba7b8a3a0bf51 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=7cc351ad3a04a5c19bce8e4aeca3c6be 2500w`})}),`\n`,_jsx(Heading,{level:`2`,id:`explore-novas-direções`,children:`Explore novas direções`}),`\n`,_jsxs(_components.p,{children:[`Selecionar um frame exibe `,_jsx(_components.a,{href:`/pt/design/explore-suggestions`,children:`sugestões`}),` ao lado dele: direções de um clique baseadas no que você está vendo, como um layout diferente, uma nova vibe ou uma página que seu design sugere. Cada uma é gerada como um novo frame ao lado da fonte, então o original permanece intocado e você pode comparar.`]}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=7f39fec76cde3f60e3a20e6c5a13d8db`,alt:`Um frame de Website selecionado mostrando um hero do supercarro APEX X1, com um painel de Próximos passos sugeridos ao lado oferecendo chips de sugestão como Explorar abordagens diferentes, Tentar layouts diferentes, Explorar vibes diferentes e Me surpreenda`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1254`,height:`1254`,\"data-path\":`images/design/replit-design/ambient-iq.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=280\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=6424e030ddfc68ec83dba132241c8312 280w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=560\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=3f696ff05b245116f4ca530e745a105a 560w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=840\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=64cdc56d1cad7bcc856fdf9ecb0c0cc4 840w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=1100\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=9d63a1c84bb235bc946fdd14677d43a9 1100w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=1650\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=89094c99cd81d120f2a96c01cc4ab7db 1650w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=2500\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=d016498f7219df192c44c01e5657c6fa 2500w`})}),`\n`,_jsx(Heading,{level:`2`,id:`build`,children:`Build`}),`\n`,_jsxs(_components.p,{children:[`O menu `,_jsx(_components.strong,{children:`Build…`}),` em um frame de Design selecionado transforma o design em um app real e em execução. O mesmo menu também cobre a aplicação do design a um Artifact que já existe.`]}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=494228a2a81e9f943376d78e77b96417`,alt:`O menu Build aberto em um frame de Design selecionado (APEX X1 Exact Replica) com o cabeçalho 'Build or apply your designs', mostrando 'Build this design', que cria um novo artefato, e 'Apply to an existing creation' listando o APEX X1 Design System do projeto e seu website Scroll Hero`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1153`,height:`1153`,\"data-path\":`images/replitai/canvas-build-menu.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=74596a4d587e510ab4e141d76d03475e 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=01c35e7f4a22a89a6b1964f3023bb05e 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=63813a879efefe9d8c44261c5e4c2e1f 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=b55dc31764f9b6b19e6363090da177e7 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=7d63b7d96ff58ff190aa47763a45a8b3 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=18d713163ef69eee37d34f4c04380bac 2500w`})}),`\n`,_jsx(Heading,{level:`3`,id:`build-this-design`,children:`Build this design`}),`\n`,_jsxs(_components.p,{children:[`Escolher `,_jsx(_components.strong,{children:`Build this design`}),` no menu inicia um novo Artifact a partir do frame de Design selecionado. O novo Artifact entra na lista de artefatos do projeto e se torna um app real e em execução. O Build requer Core ou Pro.`]}),`\n`,_jsx(Heading,{level:`3`,id:`apply-to-an-existing-artifact`,children:`Apply to an existing Artifact`}),`\n`,_jsx(_components.p,{children:`O menu Build… lista cada Artifact do projeto. Escolher um aplica as mudanças do Design selecionado a esse Artifact — o Agent reescreve o código do Artifact para corresponder ao design, deixando o frame de Design no Canvas como referência.`}),`\n`,_jsx(Heading,{level:`2`,id:`modo-de-foco`,children:`Modo de foco`}),`\n`,_jsx(_components.p,{children:`O modo de foco permite que você trabalhe com um frame selecionado em tamanho real enquanto permanece no Design.`}),`\n`,_jsxs(Steps,{children:[_jsxs(Step,{title:`Escolha Focus em um frame`,children:[_jsxs(_components.p,{children:[`Selecione um frame, depois escolha `,_jsx(_components.strong,{children:`Focus`}),` na sua barra de ações.`]}),_jsx(Frame,{caption:`A ação Focus na barra de ações de um frame selecionado.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=90cf0b08e2ca6d5db6a561daff8bde3a`,alt:`Um frame de Design selecionado no Canvas com a ação Focus destacada na barra de ações do frame.`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1254`,height:`1254`,\"data-path\":`images/design/replit-design/focus-before.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=280\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=744ee5edb7767dd6f4d3e82bce88b6e3 280w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=560\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=2f4ea7116edffec46313521f58e89756 560w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=840\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=0873c0df8d3261f518083916791e38f0 840w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=683449798e0a358e5a198322fbd9fac6 1100w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=7a86b1c67db34e8ac8e189323c988815 1650w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=4e7847885c5ee15017acb615c9fefb45 2500w`})})]}),_jsxs(Step,{title:`Trabalhe em tamanho real`,children:[_jsx(_components.p,{children:`O frame preenche a visualização, para que você possa trabalhar nele de perto sem o resto do quadro.`}),_jsx(Frame,{caption:`Modo de foco`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=045be2bf21cc136b73d93ff1c2d32513`,alt:`Modo de foco mostrando um frame de Design preenchendo a visualização e um botão Exit focus no topo do quadro.`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1254`,height:`1254`,\"data-path\":`images/design/replit-design/focus-mode.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=280\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=0480ae7bd972ea1896f8287a96d0bf62 280w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=560\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=c555b4cfe369895a0740cf097c216322 560w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=840\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=8e136f5fa7b6442d1039164536a1a2ee 840w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=4649aaae9e191990d6da9a74cdec9651 1100w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=6940b6f32d958c7a6442723180afe028 1650w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=ae717f5e13cf10258c15531c1f448cf2 2500w`})})]}),_jsx(Step,{title:`Volte ao canvas`,children:_jsxs(_components.p,{children:[`Selecione `,_jsx(_components.strong,{children:`Exit focus`}),` no topo do quadro para voltar ao canvas.`]})})]}),`\n`,_jsx(Heading,{level:`2`,id:`páginas-relacionadas`,children:`Páginas relacionadas`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/pt/design/canvas`,children:`Canvas`}),` — visão geral e anatomia.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/pt/design/toolbar`,children:`Toolbar`}),` — a barra de ferramentas flutuante; Generate cria novos frames.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/pt/design/elements`,children:`Elements`}),` — as peças individuais dentro de um frame.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/pt/design/visual-editor`,children:`Visual Editor`}),` — edições no nível de elemento dentro de um frame em foco.`]}),`\n`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Frames","sidebarTitle":"Frames","description":"Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.","icon":"square-dashed","href":"/pt/design/frames"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Tipos de frame","slug":"tipos-de-frame","depth":2,"children":[]},{"title":"Visualize em diferentes dispositivos","slug":"visualize-em-diferentes-dispositivos","depth":2,"children":[]},{"title":"Barra de ações por frame","slug":"barra-de-ações-por-frame","depth":2,"children":[{"title":"Frames de Artifact e Design","slug":"frames-de-artifact-e-design","depth":3,"children":[]},{"title":"Frames de mídia","slug":"frames-de-mídia","depth":3,"children":[]}]},{"title":"Explore novas direções","slug":"explore-novas-direções","depth":2,"children":[]},{"title":"Build","slug":"build","depth":2,"children":[{"title":"Build this design","slug":"build-this-design","depth":3,"children":[]},{"title":"Apply to an existing Artifact","slug":"apply-to-an-existing-artifact","depth":3,"children":[]}]},{"title":"Modo de foco","slug":"modo-de-foco","depth":2,"children":[]},{"title":"Páginas relacionadas","slug":"páginas-relacionadas","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"replit","siteName":"Replit","title":"Frames - Replit","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{"en":{"href":"/design/frames","matchLevel":1},"fr":{"href":"/fr/design/frames","matchLevel":1},"pt":{"href":"/pt/design/frames","matchLevel":0},"ja":{"href":"/ja/design/frames","matchLevel":1},"ko":{"href":"/ko/design/frames","matchLevel":1}}},"lastModified":"2026-07-31T13:06:43.229Z","originalFileLocation":"pt/design/frames.mdx","locale":"pt"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"light\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Replit\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Frames - Replit\">\u003cmeta data-mint-head property=\"og:description\" content=\"Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Replit Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.replit.com/pt/design/frames\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://replit.mintlify.site/_mintlify/api/og/v2?division=Core+components\u0026amp;title=Frames\u0026amp;description=Tipos+de+frame%2C+a+barra+de+a%C3%A7%C3%B5es+por+frame+e+as+a%C3%A7%C3%B5es+Build+e+Focus+no+Canvas.\u0026amp;theme=c1942b8f9ebd95f98c5c7c23\u0026amp;signature=20ea074dc6fa1f1a1a37256ec52d35167006102a7d28706aa0632d6eefaa9abc\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Frames - Replit\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://replit.mintlify.site/_mintlify/api/og/v2?division=Core+components\u0026amp;title=Frames\u0026amp;description=Tipos+de+frame%2C+a+barra+de+a%C3%A7%C3%B5es+por+frame+e+as+a%C3%A7%C3%B5es+Build+e+Focus+no+Canvas.\u0026amp;theme=c1942b8f9ebd95f98c5c7c23\u0026amp;signature=20ea074dc6fa1f1a1a37256ec52d35167006102a7d28706aa0632d6eefaa9abc\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Replit\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#FF3C00\">\u003cmeta data-mint-head name=\"twitter:creator\" content=\"@replit\">\u003cmeta data-mint-head name=\"author\" content=\"Replit\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.replit.com/pt/design/frames\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/pt/design/frames.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"pt\" href=\"https://docs.replit.com/pt/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://docs.replit.com/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"fr\" href=\"https://docs.replit.com/fr/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ja\" href=\"https://docs.replit.com/ja/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ko\" href=\"https://docs.replit.com/ko/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"x-default\" href=\"https://docs.replit.com/design/frames\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.replit.com/#organization\",\"name\":\"Replit\",\"url\":\"https://docs.replit.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/replit/j4of5To8jzehz0JK/logo/light.svg?fit=max\u0026auto=format\u0026n=j4of5To8jzehz0JK\u0026q=85\u0026s=6209cb5927b56fd1781133af05428373\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.replit.com#website\",\"name\":\"Replit\",\"url\":\"https://docs.replit.com\",\"publisher\":{\"@id\":\"https://docs.replit.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.replit.com/pt/design/frames#webpage\",\"url\":\"https://docs.replit.com/pt/design/frames\",\"name\":\"Frames\",\"description\":\"Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.\",\"dateModified\":\"2026-07-31T13:06:43.229Z\",\"isPartOf\":{\"@id\":\"https://docs.replit.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.replit.com/pt/design/frames#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.replit.com/pt/design/frames#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Core components\",\"item\":\"https://docs.replit.com/pt/design/core-components\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frames\",\"item\":\"https://docs.replit.com/pt/design/frames\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.replit.com/pt/design/frames#article\",\"headline\":\"Frames\",\"name\":\"Frames\",\"description\":\"Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.\",\"url\":\"https://docs.replit.com/pt/design/frames\",\"mainEntityOfPage\":{\"@id\":\"https://docs.replit.com/pt/design/frames#webpage\"},\"dateModified\":\"2026-07-31T13:06:43.229Z\",\"publisher\":{\"@id\":\"https://docs.replit.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.replit.com#website\"}}]}\u003c/script>","siteName":"Replit","nav":{"global":null,"languages":[{"language":"en","pages":[{"title":"en","href":"/design/frames"}]},{"language":"fr","navbar":{"links":[],"primary":{"type":"button","label":"Commencer à créer","href":"https://replit.com?ref=docs"}},"pages":[{"title":"fr","href":"/fr/design/frames"}]},{"language":"pt","navbar":{"links":[],"primary":{"type":"button","label":"Comece a criar","href":"https://replit.com?ref=docs"}},"hidden":false,"tabs":[{"tab":"Home","pages":[{"title":"Home","href":"/pt/welcome"}]},{"tab":"Chats","pages":[{"title":"Chats","href":"/pt/chat/overview"}]},{"tab":"Apps","dropdowns":[{"dropdown":"Web","icon":"globe","pages":[{"group":"Inícios rápidos","pages":[{"title":"Construa seu primeiro app","sidebarTitle":"Seu primeiro app","icon":"rocket","href":"/pt/build/your-first-app"},{"title":"Construir e publicar a partir de um template","sidebarTitle":"Construir a partir de um template","icon":"palette","href":"/pt/build/build-and-publish-from-template"},{"title":"Construa com o Modo Free","sidebarTitle":"Construa com o Modo Free","icon":"seedling","href":"/pt/build/build-with-free-mode"},{"title":"Publique seu app","sidebarTitle":"Publique seu app","icon":"cloud-arrow-up","href":"/pt/build/publish-your-app"}]},{"group":"Build paths","pages":[{"title":"Prototipe uma ideia de produto","sidebarTitle":"Prototipe uma ideia","icon":"lightbulb","href":"/pt/build/prototype-an-idea"},{"title":"Lance uma página inicial","sidebarTitle":"Lance uma página inicial","icon":"rectangle-list","href":"/pt/build/landing-page"},{"title":"Construa uma vitrine Shopify","sidebarTitle":"Construa uma vitrine Shopify","icon":"bag-shopping","href":"/pt/build/ecommerce-store"},{"title":"Crie um dashboard a partir de dados","sidebarTitle":"Crie um dashboard","icon":"chart-simple","href":"/pt/build/dashboard"},{"title":"Crie um app mobile","sidebarTitle":"Crie um app mobile","icon":"mobile-screen","href":"/pt/build/mobile-app"}]},{"group":"Grow your app","pages":[{"title":"Adicionar login","sidebarTitle":"Adicionar login","icon":"user-lock","href":"/pt/build/add-login"},{"title":"Adicionar um banco de dados","sidebarTitle":"Adicionar um banco de dados","icon":"database","href":"/pt/build/add-database"},{"title":"Adicionar integrações","sidebarTitle":"Adicionar integrações","icon":"plug","href":"/pt/build/add-integrations"},{"title":"Adicionar um domínio personalizado","sidebarTitle":"Adicionar um domínio personalizado","icon":"globe","href":"/pt/build/add-custom-domain"}]},{"group":"Publish and operate","pages":[{"title":"Comprar um domínio","sidebarTitle":"Comprar um domínio","icon":"cart-shopping","href":"/pt/build/domain-purchasing"},{"title":"Ativar Widget de Feedback","sidebarTitle":"Ativar Widget de Feedback","icon":"comment","href":"/pt/build/enable-feedback"},{"title":"Melhore o SEO do seu app","sidebarTitle":"Melhorar SEO","icon":"magnifying-glass-chart","href":"/pt/build/improve-seo"},{"title":"Solucionar problemas de publicação","icon":"triangle-exclamation","href":"/pt/build/troubleshooting"}]},{"group":"Connect \u0026 integrate","pages":[{"title":"Usar Agent Skills","sidebarTitle":"Usar Agent Skills","icon":"puzzle-piece","href":"/pt/build/use-agent-skills"},{"title":"Conectar via MCP","sidebarTitle":"Conectar via MCP","icon":"server","href":"/pt/build/connect-via-mcp"}]},{"group":"Collaborate","pages":[{"title":"Convidar colegas de equipe","sidebarTitle":"Convidar colegas de equipe","icon":"user-plus","href":"/pt/build/invite-teammates"},{"title":"Criar um workspace de equipe","sidebarTitle":"Criar um workspace de equipe","icon":"users-rectangle","href":"/pt/build/create-a-team-workspace"}]},{"group":"Importar","pages":[{"title":"Importar de um provedor","sidebarTitle":"Importar de um provedor","icon":"file-import","href":"/pt/build/import-from-providers"}]}]},{"dropdown":"Mobile","icon":"mobile","groups":[{"group":"Inícios rápidos","pages":[{"title":"Comece seu primeiro app mobile","sidebarTitle":"Comece seu app mobile","icon":"wand-magic-sparkles","href":"/pt/build/mobile-first-app"},{"title":"Pré-visualize e teste no seu celular","sidebarTitle":"Testar com o Expo Go","icon":"mobile","href":"/pt/build/mobile-preview-testing"}]},{"group":"Publish for iOS","pages":[{"title":"Configure sua conta de desenvolvedor Apple","sidebarTitle":"Configurar sua conta","icon":"apple","href":"/pt/build/mobile-apple-account"},{"title":"Envie seu app para o App Store Connect","sidebarTitle":"Enviar seu app","icon":"cloud-arrow-up","href":"/pt/build/mobile-upload-ios"},{"title":"Teste beta com o TestFlight","sidebarTitle":"Testar no TestFlight","icon":"flask","href":"/pt/build/mobile-testflight"},{"title":"Envie para a App Store","sidebarTitle":"Enviar para a App Store","icon":"paper-plane","href":"/pt/build/mobile-publish-ios"}]},{"group":"Add features and grow your app","pages":[{"title":"Adicione login","sidebarTitle":"Adicionar login","icon":"right-to-bracket","href":"/pt/build/mobile-login"},{"title":"Adicione pagamentos com o RevenueCat","sidebarTitle":"Adicionar pagamentos","icon":"credit-card","href":"/pt/build/mobile-payments"},{"title":"Armazene imagens no seu app mobile","sidebarTitle":"Salvar imagens de jogadores","icon":"image","href":"/pt/build/mobile-store-images"},{"title":"Adicione feedback tátil","sidebarTitle":"Adicionar feedback tátil","icon":"wave-square","href":"/pt/build/mobile-haptics"},{"title":"Use componentes nativos do iOS","sidebarTitle":"Usar UI nativa","icon":"apple","href":"/pt/build/mobile-native-components"},{"title":"Use a câmera","sidebarTitle":"Adicionar câmera","icon":"camera","href":"/pt/build/mobile-camera"},{"title":"Acesse contatos","sidebarTitle":"Adicionar contatos","icon":"address-book","href":"/pt/build/mobile-contacts"},{"title":"Envie notificações push","sidebarTitle":"Enviar notificações","icon":"bell","href":"/pt/build/mobile-push-notifications"},{"title":"Colete avaliações e classificações","sidebarTitle":"Coletar avaliações","icon":"star","href":"/pt/build/mobile-collect-reviews"}]},{"group":"Design","pages":[{"title":"Projete seu app","sidebarTitle":"Projete seu app","icon":"palette","href":"/pt/build/mobile-design"},{"title":"Gerar um ícone de app","sidebarTitle":"Gerar ícone do app","icon":"image","href":"/pt/build/mobile-app-icon"},{"title":"Gere capturas de tela da App Store","sidebarTitle":"Gerar ativos da loja","icon":"images","href":"/pt/build/mobile-store-screenshots"}]},{"group":"Collaborate","pages":[{"title":"Crie o PixelGames em equipe","sidebarTitle":"Convide sua equipe","icon":"users","href":"/pt/build/mobile-invite-team"}]}]}]},{"tab":"Code","pages":[{"title":"Code","href":"/pt/build/code/code-with-replit"}]},{"tab":"Designs","groups":[{"group":"Replit Design","pages":[{"title":"O que é o Replit Design","sidebarTitle":"O que é o Replit Design","icon":"palette","href":"/pt/design/what-is-replit-design"},{"title":"Design vs. Build","sidebarTitle":"Design vs. Build","icon":"code-compare","href":"/pt/design/design-vs-build"}]},{"group":"Quickstart","pages":[{"title":"Projete sua primeira tela","icon":"rocket","href":"/pt/design/design-your-first-screen"},{"title":"Comece a partir de um template","icon":"layer-group","href":"/pt/design/start-from-a-template"},{"title":"Importe designs do Figma para o Replit Design","sidebarTitle":"Importar do Figma","icon":"pen-ruler","href":"/pt/design/import-figma-designs-into-replit-design"},{"title":"Importe designs do Claude para o Replit Design","sidebarTitle":"Importar do Claude","icon":"file-import","href":"/pt/design/import-claude-designs-into-replit-design"},{"title":"Importe um website para o Replit Design","sidebarTitle":"Importar de URL","icon":"link","href":"/pt/design/import-a-website-into-replit-design"}]},{"group":"Core components","pages":[{"title":"Componentes do Replit Design","sidebarTitle":"Visão geral","icon":"layer-group","href":"/pt/design/core-components"},{"title":"Canvas","sidebarTitle":"Canvas","description":"Abra, navegue e adicione ao canvas, a superfície infinita onde o Replit Design exibe seus frames.","icon":"object-group","href":"/pt/design/canvas"},{"title":"Frames","sidebarTitle":"Frames","icon":"square-dashed","href":"/pt/design/frames"},{"title":"Elementos","sidebarTitle":"Elementos","description":"Selecione e edite as peças individuais dentro de um frame no Canvas.","icon":"object-ungroup","href":"/pt/design/elements"},{"title":"Barra de ferramentas","sidebarTitle":"Barra de ferramentas","icon":"toolbox","href":"/pt/design/toolbar"},{"title":"Painel de biblioteca","icon":"images","href":"/pt/design/library-panel"}]},{"group":"Explore","pages":[{"title":"Explore","sidebarTitle":"Visão geral","icon":"compass","href":"/pt/design/explore"},{"title":"Explorar sugestões","icon":"lightbulb","href":"/pt/design/explore-suggestions"},{"title":"Explore com modelos diferentes","sidebarTitle":"Explorar com modelos","icon":"microchip","href":"/pt/design/explore-with-different-models"},{"title":"Adicione templates e inspiração ao seu design","sidebarTitle":"Templates e inspiração","icon":"shapes","href":"/pt/design/add-templates-and-inspiration"}]},{"group":"Refine","pages":[{"title":"Refinar","sidebarTitle":"Visão geral","icon":"sliders","href":"/pt/design/refine"},{"title":"Converse sobre seu design","sidebarTitle":"Chat","icon":"comments","href":"/pt/design/chat-about-your-design"},{"title":"Visual Editor","sidebarTitle":"Visual Editor","icon":"pen-to-square","href":"/pt/design/visual-editor"}]},{"group":"Build","pages":[{"title":"Construa seu design","sidebarTitle":"Construa seu design","icon":"rocket","href":"/pt/design/build-your-design"}]},{"group":"Design systems","pages":[{"title":"Design systems, explicados","icon":"swatchbook","href":"/pt/design/design-systems-explained"},{"title":"Crie um design system","icon":"droplet","href":"/pt/design/create-a-design-system"},{"title":"Conteúdo do design system e DESIGN.md","icon":"file-lines","href":"/pt/design/design-md"},{"title":"Aplique um design system a um app existente","icon":"paint-roller","href":"/pt/design/apply-design-system"}]}]},{"tab":"Use cases","pages":[{"title":"Use cases","href":"/pt/use-cases"}]},{"tab":"Learn","pages":[{"title":"Learn","href":"/pt/learn/foundations/what-is-an-app"}]},{"tab":"Funcionalidades","pages":[{"title":"Funcionalidades","href":"/pt/features/collaboration/workspaces"}]},{"tab":"Confiança e faturamento","pages":[{"title":"Confiança e faturamento","href":"/pt/category/billing"}]},{"tab":"Enterprise","pages":[{"title":"Enterprise","href":"/pt/teams/welcome"}]}]},{"language":"ja","navbar":{"links":[],"primary":{"type":"button","label":"作成を開始","href":"https://replit.com?ref=docs"}},"hidden":false,"pages":[{"title":"ja","href":"/ja/design/frames"}]},{"language":"ko","navbar":{"links":[],"primary":{"type":"button","label":"빌드 시작하기","href":"https://replit.com?ref=docs"}},"hidden":false,"pages":[{"title":"ko","href":"/ko/design/frames"}]}]},"basePath":"","title":"Frames - Replit","buildId":"dpl_DTau1J5HqS9UTgVSDwGksstFWtPa","deploymentId":"dpl_DTau1J5HqS9UTgVSDwGksstFWtPa","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-DvzxQbD0.js","DynamicMarkdown-mQG_iQiE.js","zoom-image-lightbox-BFbLClTf.js","lightbox-handle-r17bVUz3.js"]}
