Um guia de configuração do Cloudscape com tokens reais de atualização visual, espaçamento adaptado à densidade, APIs controladas para formulários e um assistente funcional de recursos em duas etapas.
Cloudscape 3.0.1390 nativo com React 18.3.1; composição original de Wizard e estado apenas local. · Referência de implementação
02
Referência de design do sistema de design AWS Cloudscape
Componentes Cloudscape 3.0.1390 e design-tokens 3.0.114, tema visual-refresh. Os valores são lidos do JSON de tokens publicado. Os modos de cor e as densidades de conteúdo são dimensões separadas. Esta é uma referência de implementação selecionada, não a exportação completa dos tokens.
Arquitetura de configuração do sistema de design AWS Cloudscape
Adapte o fluxo de trabalho ao Wizard
O exemplo separa a configuração da revisão. Wizard fornece a navegação entre etapas e as ações; a aplicação controla o índice atual, os valores dos campos, a regra de validação e a confirmação final. O leitor pode voltar à configuração sem recriar o formulário nem perder a capacidade selecionada. Essa abordagem é mais adequada do que ocultar todo um fluxo de várias etapas dentro de um único Card genérico.
Crie com contêineres nativos
Container, Header e SpaceBetween definem a seção do formulário. O h1 apresenta a operação; o h2 identifica o grupo de configurações. O texto explicativo fica junto ao campo ou à etapa que descreve. A largura máxima de 1200px e o preenchimento da página ao redor são CSS explícitos da aplicação, não tokens de layout exportados do Cloudscape.
Tokens semânticos e modos visuais do sistema de design AWS Cloudscape
Escolha um papel antes de um valor
A referência diferencia o plano de fundo do layout, o conteúdo dos contêineres, o texto corrido, o texto interativo e os indicadores de status. Seus valores não formam uma paleta uniforme. Para interfaces personalizadas, importe o token nomeado de @cloudscape-design/design-tokens em vez de copiar um valor hexadecimal do modo claro para todos os estados. O token representa um propósito, enquanto seu valor pode evoluir.
Alterne entre modos pela biblioteca
A prévia chama applyMode com Mode.Light ou Mode.Dark de global-styles. Isso atualiza o modo usado pelos componentes, em vez de substituir cores CSS arbitrárias. Uma tela de revisão escura mantém os mesmos rótulos, a capacidade selecionada e o estado da navegação. O JSON de origem registra os valores dos modos claro e escuro, permitindo inspecionar essa distinção.
Tipografia e hierarquia de cabeçalhos do sistema de design AWS Cloudscape
Combine os papéis de fonte e line-height
A referência visual-refresh body-m corresponde a 14px com line-height de 20px. heading-xl corresponde a 24px com line-height de 30px; heading-l, a 20px com 24px; e heading-m, a 18px com 22px. Esses papéis definem a hierarquia compacta do formulário; não são tamanhos de exibição intercambiáveis para materiais de marketing.
Use variantes semânticas dos componentes
A variante h1 de Header identifica Create a workspace. Os cabeçalhos de Container usam h2, e a variante awsui-key-label de Box dá aos rótulos da revisão um tratamento secundário consistente. Os valores da revisão continuam sendo texto comum e legível. Não transforme todos os rótulos de campo em cabeçalhos apenas para aumentar o peso visual.
Campos controlados e composição da revisão no sistema de design AWS Cloudscape
Entenda o contrato de eventos detail
Input emite um evento cujo detail.value contém o novo texto. Select emite detail.selectedOption, que é um objeto de opção, não uma string simples. O exemplo completo armazena esse objeto e exibe seu label na revisão. Isso evita um erro comum de integração em que o select parece vazio porque selectedOption recebe apenas um identificador.
Mantenha as instruções junto ao campo
A política de formato do campo pertence a esta aplicação de exemplo.
As opções de capacidade não são afirmações sobre produtos nem preços.
Os componentes nativos cuidam da apresentação; o estado React mantém a configuração.
Densidade e layout responsivo do sistema de design AWS Cloudscape
Não trate o modo compacto como um nível de zoom
Os valores de espaçamento escalados publicados variam conforme a densidade. Por exemplo, space-scaled-m é 16px no modo confortável e 12px no compacto, enquanto space-scaled-l é 20px e 16px, respectivamente. Essas diferenças comprimem o ritmo vertical sem redefinir o conteúdo nem reduzir o texto arbitrariamente. Os componentes nativos aplicam suas próprias regras de densidade.
Permita que as estruturas de etapas e revisão se adaptem
O Wizard altera a apresentação da navegação conforme a largura disponível; o ColumnLayout organiza os metadados da revisão de forma responsiva. A aplicação CSS reduz o preenchimento externo abaixo de 600px. O exemplo não fixa a largura da navegação por etapas para desktop, e sua versão para dispositivos móveis mantém visíveis as ações locais Next, Previous e Confirm.
Validação e confirmação do Wizard do sistema de design AWS Cloudscape
Valide antes de aceitar a navegação
onNavigate recebe requestedStepIndex. A aplicação verifica o nome atual antes de avançar para a revisão e mantém a etapa atual se o nome for inválido. Ao editar, o erro é removido para que o próximo envio possa ser avaliado novamente. Ao voltar às configurações, o nome e a opção selecionada são preservados.
Envie um nome inválido e permaneça na etapa de configuração.
Corrija o nome e escolha outro perfil de capacidade.
Avance para a revisão e confirme os dois valores.
Use Edit settings para voltar sem perder nenhum dos valores.
Confirme localmente e reinicie o exemplo.
Diferencie uma configuração de receita do provisionamento
A ação final exibe um Alert local de sucesso e um resumo da configuração. Ela não dá a entender que um recurso real foi criado. Em uma aplicação real, mantenha a ação de envio pendente enquanto o provisionamento estiver em andamento, diferencie solicitações aceitas de recursos concluídos e permita recuperar-se de falhas sem descartar a configuração.
Acessibilidade de formulários do sistema de design AWS Cloudscape
Mantenha os rótulos e os nomes de navegação
O Wizard recebe navigationAriaLabel e strings de ação traduzidas. Cada Input e Select está dentro de um FormField com rótulo. O Alert comunica resultados inválidos ou bem-sucedidos por meio da semântica nativa do componente. As restrições visíveis complementam o rótulo do campo, em vez de substituí-lo.
Revise o percurso com teclado em toda a operação
Use o teclado para acessar o campo de nome, abrir o seletor de capacidade, avançar, voltar, editar e confirmar. O comportamento de foco nativo ajuda, mas a aplicação ainda é responsável pela regra de validação da etapa e pelo significado da confirmação. Uma biblioteca de componentes não consegue validar, por conta própria, uma regra de negócio ausente.
Instalação e limites de personalização do sistema de design AWS Cloudscape
Instale os pacotes relacionados em conjunto
A implementação importa componentes pelos subcaminhos de seus pacotes individuais e carrega global-styles uma vez. design-tokens fornece a referência para estilos personalizados. O arquivo de entrada React fornecido e o arquivo compacto CSS reproduzem o exemplo interativo em uma aplicação Vite React. Mantenha versões compatíveis dos pacotes Cloudscape em conjunto.
Use o exemplo fornecido como um ponto de partida real
Exemplos de componentes do sistema de design AWS Cloudscape
main.jsx — assistente de configuração completo
Wizard, FormField, Select e metadados de revisão nativos, com navegação controlada e confirmação local.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Wizard from "@cloudscape-design/components/wizard";
import Container from "@cloudscape-design/components/container";
import Header from "@cloudscape-design/components/header";
import FormField from "@cloudscape-design/components/form-field";
import Input from "@cloudscape-design/components/input";
import Select from "@cloudscape-design/components/select";
import SpaceBetween from "@cloudscape-design/components/space-between";
import ColumnLayout from "@cloudscape-design/components/column-layout";
import Box from "@cloudscape-design/components/box";
import Button from "@cloudscape-design/components/button";
import Alert from "@cloudscape-design/components/alert";
import Toggle from "@cloudscape-design/components/toggle";
import { applyMode, Mode } from "@cloudscape-design/global-styles";
import "@cloudscape-design/global-styles/index.css";
import "./cloudscape.css";
const sizes = [
{ label: "Development · 2 vCPU / 4 GiB", value: "dev" },
{ label: "Standard · 4 vCPU / 8 GiB", value: "standard" },
{ label: "Compute · 8 vCPU / 16 GiB", value: "compute" },
];
function App() {
const [name, setName] = useState("analytics-sandbox"),
[size, setSize] = useState(sizes[0]),
[step, setStep] = useState(0),
[error, setError] = useState(""),
[complete, setComplete] = useState(false),
[dark, setDark] = useState(false);
function next(index) {
if (index > 0 && !/^[a-z][a-z0-9-]{2,29}$/.test(name)) {
setError(
"Use 3–30 lowercase letters, numbers or hyphens, starting with a letter.",
);
return;
}
setError("");
setStep(index);
}
function reset() {
setStep(0);
setComplete(false);
setError("");
setName("analytics-sandbox");
setSize(sizes[0]);
}
return (
<main className="awsui-typography cloudscape-example">
<div className="appearance">
<span>CLOUDSCAPE · RESOURCE CONFIGURATION</span>
<Toggle
checked={dark}
onChange={({ detail }) => {
setDark(detail.checked);
applyMode(detail.checked ? Mode.Dark : Mode.Light);
}}
>
Dark mode
</Toggle>
</div>
<Header
variant="h1"
description="Configure a fictional compute workspace. This example does not create a cloud resource."
>
Create a workspace
</Header>
<div className="wizard-content">
{complete ? (
<SpaceBetween size="l">
<Alert type="success" header="Configuration confirmed locally">
The {name} recipe is ready for review. No cloud API was called and
no resource was provisioned.
</Alert>
<Container header={<Header variant="h2">Workspace recipe</Header>}>
<ColumnLayout columns={2} variant="text-grid">
<div>
<Box variant="awsui-key-label">Name</Box>
{name}
</div>
<div>
<Box variant="awsui-key-label">Capacity</Box>
{size.label}
</div>
</ColumnLayout>
</Container>
<Button onClick={reset}>Start another example</Button>
</SpaceBetween>
) : (
<Wizard
activeStepIndex={step}
onNavigate={({ detail }) => next(detail.requestedStepIndex)}
onCancel={reset}
onSubmit={() => setComplete(true)}
i18nStrings={{
stepNumberLabel: (stepNumber) => `Step ${stepNumber}`,
collapsedStepsLabel: (stepNumber, stepsCount) =>
`Step ${stepNumber} of ${stepsCount}`,
skipToButtonLabel: (step) => `Skip to ${step.title}`,
navigationAriaLabel: "Configuration steps",
cancelButton: "Reset",
previousButton: "Previous",
nextButton: "Next",
submitButton: "Confirm locally",
optional: "optional",
}}
steps={[
{
title: "Configure workspace",
description: "Choose the identity and capacity.",
content: (
<Container
header={<Header variant="h2">Workspace settings</Header>}
>
<SpaceBetween size="l">
<FormField
label="Workspace name"
constraintText="3–30 characters; lowercase letters, numbers and hyphens."
errorText={error}
>
<Input
value={name}
onChange={({ detail }) => {
setName(detail.value);
setError("");
}}
/>
</FormField>
<FormField
label="Capacity profile"
description="These profiles are sample application data, not real cloud products or prices."
>
<Select
selectedOption={size}
onChange={({ detail }) =>
setSize(detail.selectedOption)
}
options={sizes}
/>
</FormField>
</SpaceBetween>
</Container>
),
},
{
title: "Review configuration",
description:
"Check the values before confirming the local example.",
content: (
<SpaceBetween size="l">
<Container
header={
<Header
variant="h2"
actions={
<Button onClick={() => setStep(0)}>
Edit settings
</Button>
}
>
Workspace settings
</Header>
}
>
<ColumnLayout columns={2} variant="text-grid">
<div>
<Box variant="awsui-key-label">Workspace name</Box>
{name}
</div>
<div>
<Box variant="awsui-key-label">Capacity profile</Box>
{size.label}
</div>
</ColumnLayout>
</Container>
<Alert type="info">
Confirmation changes the preview only. Production
provisioning would require a real service, permissions and
a verified response.
</Alert>
</SpaceBetween>
),
},
]}
/>
)}
</div>
<footer>
Native Cloudscape components 3.0.1390 · configuration, validation,
review and local confirmation.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
Não substitua os nomes de classe dos componentes nativos por esta folha de estilos da aplicação.
04
Configuração de agente do sistema de design AWS Cloudscape
Ponto de partida para implementação
O exemplo nativo exibido foi compilado com React 18.3.1. Use uma versão do Node.js compatível com a versão do Vite que instalar; mantenha as versões usadas pelo arquivo de lock da aplicação.
sh
npm create vite@latest cloudscape-workspace -- --template react
cd cloudscape-workspace
npm install
npm install [email protected][email protected] @cloudscape-design/[email protected] @cloudscape-design/[email protected] @cloudscape-design/global-styles
# Replace src/main.jsx and add src/cloudscape.css from the full examples.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Crie um fluxo de configuração de recursos com Cloudscape. Use o código nativo fornecido de Wizard/Container/FormField/Input/Select e as funções dos tokens de visual refresh. Preserve os valores dos campos entre as etapas, valide antes de navegar e mostre uma revisão completa. Trate os perfis de capacidade de exemplo como espaços reservados para meu modelo de domínio, não como produtos reais de nuvem. Integre o provisionamento somente depois que um API for fornecido; diferencie resultados pendentes, com falha e confirmados.
05
Fontes e escopo do sistema de design AWS Cloudscape
Guia OpenDesign e exemplo original de configuração de espaço de trabalho local usando componentes nativos do Cloudscape 3.0.1390. Os perfis de capacidade são dados fictícios da aplicação. Não há conta de nuvem, API de provisionamento nem preços de serviços reais envolvidos.
