Dataland Design System
Dataland Design System
Com o Claude
Você pede a tela com as suas palavras, e o Claude devolve com as cores, os componentes e as regras da Dataland. Não precisa programar nem ter GitHub.
Escolha o que você quer fazer. Cada caso leva aos passos certos, com as telas de onde clicar.
Com a skill: um pacote de instruções que você instala uma vez no Claude.
Por quê: depois de instalada, você não explica mais nada.
Pede “monta a tela de resultado do terreno” e o Claude já segue o padrão da Dataland sozinho, em toda conversa.
Instalar · só na primeira vez
No portal, na seção Com o Claude, clique em Baixar a skill. O arquivo dataland-design-system.skill vai para a pasta Downloads.
Em claude.ai ou no app, clique no seu nome, embaixo à esquerda, e depois em Configurações.
Em Recursos (Capabilities), deixe ligada a chave Execução de código e criação de arquivos. Sem ela a skill não funciona.
Não aparece? Peça para quem administra o Claude na empresa liberar.
Na mesma página, em Skills, clique em Enviar skill (Upload skill) e escolha o arquivo do passo 1.
dataland-design-system aparece na lista com a chave ligada. Pronto: não precisa repetir.
Usar · sempre que precisar
Numa conversa nova, descreva a tela como falaria com um designer. Não precisa citar a skill:
Monta a tela de resultado do terreno com o VGV dos três cenários.
O Claude avisa que está usando a skill e devolve a tela no padrão. Para mudar algo, peça na mesma conversa: “põe o preço pedido”.
Com o DESIGN.md: um arquivo de texto com as cores, as letras e as regras.
Por quê: funciona em qualquer conta e em qualquer assistente de IA, sem instalar nada.
Em troca, vem com menos detalhe que a skill e vale só para a conversa em que foi anexado.
No portal, na seção Com o Claude, clique em Baixar DESIGN.md.
Numa conversa nova, clique no clipe (ou arraste o arquivo para a janela) e escreva:
Siga este DESIGN.md e monte a fila de estudos de terreno.
Para não anexar toda vez, crie um Projeto no Claude e coloque o DESIGN.md nos arquivos dele. Toda conversa ali já começa sabendo o padrão.
Sem instalar nada.
Por quê: para conferir uma cor, ver como um componente se comporta ou mostrar o padrão para alguém.
Em dataland-design-system.pages.dev estão as cores, a tipografia, os componentes e as telas de referência do Landbank.
Há uma versão do design system no próprio Claude, com os componentes ao vivo. Ela é interna: peça acesso ao Alessandro Ribeiro.
Com a mesma skill do caso 02.
Por quê: o Claude Code lê skills de uma pasta do seu computador, então o mesmo arquivo serve.
O .skill é um zip. Baixe no portal e rode:
unzip ~/Downloads/dataland-design-system.skill -d ~/.claude/skills/
Numa sessão nova, a skill entra sozinha em pedido de tela da Dataland. Para produção, o que vale são os componentes do pacote matrix-bridge.
Copie um e cole numa conversa nova.
Faz um protótipo da fila de estudos de terreno.
Cria um card de viabilidade com margem e VGV.
Monta um slide com o VGV do cenário recomendado.
Escreva no pedido: “use a skill dataland-design-system”. Se continuar, confira se a chave dela está ligada (passo 5).
Ligue antes a execução de código (passo 3). Se mesmo assim não aparecer, a empresa ainda não liberou skills. Enquanto isso, use o caso 03, sem skill.
Baixe a skill de novo e envie outra vez (passo 4). A nova substitui a antiga.
Não. Ela serve para mostrar a ideia e testar. O time de desenvolvimento constrói a versão do produto com os componentes oficiais.
Não. Use endereços e números de exemplo.
As telas do Claude nesta página são ilustrações, não prints: os nomes dos menus podem mudar um pouco com a versão e o idioma. Os VGVs do exemplo vêm do estudo de demonstração do Hermano Marchetti, no próprio design system. Dúvida ou acesso: Alessandro Ribeiro. Voltar ao portal.