Trabalhando com IA

Design system 1DS · versão 2.5.0

Quem mais escreve código de interface hoje não é uma pessoa: é um agente de IA dirigido por uma pessoa. Esse agente não abre o Storybook — ele usa o que estiver no contexto dele na hora de gerar o código. Sem o 1DS ali, ele não trava: ele inventa, e o que inventa é Tailwind com shadcn/ui.

As três camadas abaixo colocam o 1DS nesse contexto. Comece pela primeira; as outras duas somam.

1. Agent Skills

A camada que muda o código gerado: diz qual componente usar e o que é proibido.

SkillPara quêInstalação
1berto Constrói e altera interface de produtos 1Doc com o design system 1DS, em React ou Vue 3. npx skills add https://1ds.1doc.com.br --skill 1berto
1ds-migrate-react-vue Converte a camada de UI de React para Vue 3 em projetos que usam o design system 1DS. npx skills add https://1ds.1doc.com.br --skill 1ds-migrate-react-vue
1ds-audit Audita a aderência de um projeto ao design system 1DS e devolve uma nota determinística de 0 a 100 com a lista de achados, em 1DS-AUDIT. npx skills add https://1ds.1doc.com.br --skill 1ds-audit

Índice: https://1ds.1doc.com.br/.well-known/skills/index.json

2. Servidor MCP

Responde props, tipos e tokens da versão instalada, ao vivo.

React — @1doc/1ds-react-mcp

Claude Code

claude mcp add 1ds-react -- npx -y @1doc/1ds-react-mcp@latest

VS Code

code --add-mcp '{"name":"1ds-react","command":"npx","args":["-y","@1doc/1ds-react-mcp@latest"]}'

Qualquer outro cliente — cole no config MCP

{
  "mcpServers": {
    "1ds-react": {
      "command": "npx",
      "args": [
        "-y",
        "@1doc/1ds-react-mcp@latest"
      ]
    }
  }
}

Adicionar ao Cursor · Adicionar ao VS Code

Vue 3 — @1doc/1ds-vue-mcp

Claude Code

claude mcp add 1ds-vue -- npx -y @1doc/1ds-vue-mcp@latest

VS Code

code --add-mcp '{"name":"1ds-vue","command":"npx","args":["-y","@1doc/1ds-vue-mcp@latest"]}'

Qualquer outro cliente — cole no config MCP

{
  "mcpServers": {
    "1ds-vue": {
      "command": "npx",
      "args": [
        "-y",
        "@1doc/1ds-vue-mcp@latest"
      ]
    }
  }
}

Adicionar ao Cursor · Adicionar ao VS Code

3. Markdown, sem instalar nada

Qualquer IA que abra uma URL alcança o 1DS.

ArquivoPara quê
/llms.txtraiz — manda a IA para o índice do framework certo
/react/latest/llms.txtíndice curado do React
/vue/latest/llms.txtíndice curado do Vue 3
/react/latest/llms-full.txttudo num arquivo só, para colar inteiro
/vue/latest/llms-full.txtidem, Vue

No Storybook, o botão Copiar para LLM na barra de ferramentas copia o markdown da página aberta.

Qual camada usar

SituaçãoUse
Construir ou alterar telaa skill do framework, com o MCP junto
Converter tela de React para Vue1ds-migrate-react-vue
Medir a aderência de um produto1ds-audit
Tirar uma dúvida num chatcole o llms.txt
Ferramenta sem suporte a nada dissollms-full.txt funciona em qualquer uma