IA APLICADA · DESIGN SYSTEM · PRODUCT STRATEGY
Como um Design System AI-Ready reduziu um ciclo de ideação à implementação de 15 dias para 4 horas
Em uma startup focada em inovação rápida, o processo
tradicional de design-to-development estava criando gargalos.
Ao reestruturar nosso Design System com princípios de Atomic
Design e alinhá-lo às capacidades de LLMs, transformamos uma
esteira de trabalho demorada em um fluxo quase instantâneo.
Com o crescimento das demandas de produto, validar hipóteses rapidamente tornou-se um desafio. Ferramentas de IA aceleravam a criação de interfaces, mas geravam retrabalho porque não respeitavam o Design System. Estruturei um Design System AI-Ready baseado em Atomic Design, padronização e governança para que modelos de linguagem reutilizassem componentes de forma consistente, reduzindo um ciclo completo — da ideação à implementação inicial — de aproximadamente 15 dias para 4 horas.
PAPEL
Product Manager
Product Designer
Design System
LLM Workflow Design
Product Strategy
TIME
PMs
PDs
Desenvolvedores
STACK
Claude
Claude Code
MCP do Figma
Figma
GitHub
ENTREGÁVEIS
Design System AI-Ready
Atomic Design
Documentação para LLMs
Governança&Padronização Design ↔Front-end
IMPACTO
15 dias → 4 horas
Da Ideação à Implementação
O DESAFIO
A velocidade de validação havia se
tornado um gargalo
O processo tradicional funcionava, mas era linear e demorado. Cada nova feature exigia wireframes, protótipos, handoff e implementação meticulosa. Para uma equipe que precisava validar hipóteses semanalmente, os 15 dias de ciclo eram insustentáveis. Como Product Manager com background em Product Design, eu buscava reduzir a dependência entre Produto, Design e Engenharia para experimentar novas ideias com mais autonomia.
"Nós tínhamos ideias rápidas, mas o
processo de tangibilizá-las era lento
demais para o ritmo da startup."
PRIMEIRA HIPÓTESE
Usar IA para acelerar a
prototipação
Comecei utilizando Lovable e Stitch. Em poucos minutos era possível gerar jornadas completas e validar ideias com stakeholders. Mas, após a aprovação, surgia um novo problema: as interfaces não utilizavam o Design System oficial e precisavam ser reconstruídas antes do desenvolvimento. O ganho de velocidade durante o Discovery retornava em forma de retrabalho.
A IA acelerava o Discovery, mas criava umnovo gargalo antes da implementação.
Validação sem continuidade
O protótipo aprovado não podia seguir
diretamente para o produto, gerando
uma quebra no fluxo de entrega.
Reconstrução manual
O Product Designer precisava refazer a
solução usando o Design System oficial,
desperdiçando esforço criativo.
Retrabalho entre etapas
O tempo economizado no Discovery
reaparecia como dívida técnica antes do
início do desenvolvimento.
A DECISÃO QUE MUDOU O PROJETO
Minha segunda hipótese também falhou
Passei a utilizar Claude Code conectado ao MCP do Figma para acessar diretamente o Design System. A expectativa
era que, tendo acesso aos componentes oficiais, a IA deixasse de criar inconsistências. Mesmo assim, continuava
escolhendo componentes inadequados, ignorando estados e criando variações desnecessárias.
O problema não era acesso ao
Design System. Era a forma como
ele era interpretado pela IA.
Foi nesse momento que percebi que uma LLM interpreta linguagem, não intenção visual. O Design System havia sido
estruturado para designers, não para modelos de linguagem.
A DESCOBERTA
UMA LLM NÃO INTERPRETA UM DESIGN SYSTEM.
ELA INTERPRETA LINGUAGEM.
A SOLUÇÃO
Reestruturar o Design System usando Atomic Design
PROBLEMA
Componentes muito complexos dificultavam a reutilização pela IA.
DECISÃO
Redesenhei a arquitetura utilizando Atomic Design para permitir que a LLM reutilizasse estruturas menores.
TRADE-OFF
Maior esforço inicial de reorganização.
IMPACTO
Mais consistência, menos ambiguidades e maior reutilização.
Transformar o Design System em uma linguagem compartilhada
Em vez de trocar de ferramenta, redesenhei a arquitetura do Design System. Adotei Atomic Design para reduzir
ambiguidades, padronizei documentação e regras de uso, alinhei a nomenclatura entre Design System e Design Tokens
e estabeleci uma governança para aprovação de novos componentes. O objetivo era que prompts, Figma, Design
Tokens e Front-end compartilhassem a mesma linguagem.
Em vez de ensinar a IA a desenhar,
ensinei o Design System a
conversar com a IA.
COMO O SISTEMA FUNCIONAVA
Uma linguagem contínua entre prompt,
design e código
Atomic Design
Estruturas menores reduziram
ambiguidades e aumentaram a
flexibilidade de composição
para a LLM.
Documentação e
regras
Decisões implícitas de design
passaram a ser descritas de
forma explícita e interpretável.
Padronização
A nomenclatura passou a
permanecer consistente entre
Design System e Design
Tokens.
Governança
Novos componentes
passaram por revisão antes de
integrar o sistema.
O RACIOCÍNIO EM TRÊS ETAPAS
Mudamos o Design System, não a IA
HIPÓTESE 01
Lovable / Stitch
Resultado: não utilizavam o Design System.
ESTADO VISUAL: FALHOU
HIPÓTESE 02
Claude Code + MCP
Resultado: acessava o Design System, mas
não compreendia sua lógica.
ESTADO VISUAL: FALHOU
HIPÓTESE 03
Design System AI-Ready
Resultado: componentes, documentação,
tokens e governança passaram a
compartilhar a mesma linguagem.
ESTADO VISUAL: VALIDADA
RESULTADOS
Da ideação à implementação inicial em
aproximadamente 4 horas
Durante o experimento, um redesign completo passou de aproximadamente 15 dias para cerca de 4 horas:
aproximadamente 2 horas para prototipação no Figma;
aproximadamente 2 horas para implementação inicial em Front-end.
Além da redução de tempo, o projeto aumentou a consistência entre Design e Desenvolvimento, reduziu retrabalho,
ampliou a autonomia para experimentação e transformou o próprio Design System em uma base preparada para
modelos de linguagem.
2h
Prototipação no Figma
2h
Implementação inicial em Front-end
15 dias → 4 horas
Da ideação à implementação inicial
Menos retrabalho
Redução da reconstrução
manual após a validação.
Mais consistência
Design e Front-end passaram
a compartilhar padrões
compatíveis.
Maior reutilização
A LLM passou a compor
jornadas com estruturas
existentes.
Mais autonomia
Produto ganhou mais
velocidade para testar
hipóteses.
ANTES
15 dias
Ideação
↓
Protótipo externo
↓
Validação
↓
Reconstrução no Design System
↓
Front-end
APROXIMADAMENTE 15 DIAS
DEPOIS
4 horas
Ideação
↓
Prompt e contexto
↓
Figma com Design System AI-Ready
↓
Front-end com tokens compatíveis
APROXIMADAMENTE 4 HORAS
APRENDIZADOS
O Design System deixou de ser apenas uma
biblioteca
Antes deste projeto, eu via o Design System como uma biblioteca de componentes. Depois dele, passei a enxergá-lo
como uma camada de comunicação entre pessoas e modelos de linguagem.
Quando pessoas e modelos de
linguagem compartilham a mesma
linguagem, a IA deixa de apenas gerar
interfaces e passa a acelerar todo o
processo de construção de produto.
IA APLICADA · DESIGN SYSTEM · PRODUCT STRATEGY
Como um Design System AI-Ready reduziu um ciclo de ideação à implementação de 15 dias para 4 horas
Em uma startup focada em inovação rápida, o processo
tradicional de design-to-development estava criando gargalos.
Ao reestruturar nosso Design System com princípios de Atomic
Design e alinhá-lo às capacidades de LLMs, transformamos uma
esteira de trabalho demorada em um fluxo quase instantâneo.
Com o crescimento das demandas de produto, validar hipóteses rapidamente tornou-se um desafio. Ferramentas de IA aceleravam a criação de interfaces, mas geravam retrabalho porque não respeitavam o Design System. Estruturei um Design System AI-Ready baseado em Atomic Design, padronização e governança para que modelos de linguagem reutilizassem componentes de forma consistente, reduzindo um ciclo completo — da ideação à implementação inicial — de aproximadamente 15 dias para 4 horas.
PAPEL
Product Manager
Product Designer
Design System
LLM Workflow Design
Product Strategy
TIME
PMs
PDs
Desenvolvedores
STACK
Claude
Claude Code
MCP do Figma
Figma
GitHub
ENTREGÁVEIS
Design System AI-Ready
Atomic Design
Documentação para LLMs
Governança&Padronização Design ↔Front-end
IMPACTO
15 dias → 4 horas
Da Ideação à Implementação
O DESAFIO
A velocidade de validação havia se
tornado um gargalo
O processo tradicional funcionava, mas era linear e demorado. Cada nova feature exigia wireframes, protótipos, handoff e implementação meticulosa. Para uma equipe que precisava validar hipóteses semanalmente, os 15 dias de ciclo eram insustentáveis. Como Product Manager com background em Product Design, eu buscava reduzir a dependência entre Produto, Design e Engenharia para experimentar novas ideias com mais autonomia.
"Nós tínhamos ideias rápidas, mas o
processo de tangibilizá-las era lento
demais para o ritmo da startup."
PRIMEIRA HIPÓTESE
Usar IA para acelerar a
prototipação
Comecei utilizando Lovable e Stitch. Em poucos minutos era possível gerar jornadas completas e validar ideias com stakeholders. Mas, após a aprovação, surgia um novo problema: as interfaces não utilizavam o Design System oficial e precisavam ser reconstruídas antes do desenvolvimento. O ganho de velocidade durante o Discovery retornava em forma de retrabalho.
A IA acelerava o Discovery, mas criava umnovo gargalo antes da implementação.
Validação sem continuidade
O protótipo aprovado não podia seguir
diretamente para o produto, gerando
uma quebra no fluxo de entrega.
Reconstrução manual
O Product Designer precisava refazer a
solução usando o Design System oficial,
desperdiçando esforço criativo.
Retrabalho entre etapas
O tempo economizado no Discovery
reaparecia como dívida técnica antes do
início do desenvolvimento.
A DECISÃO QUE MUDOU O PROJETO
Minha segunda hipótese também falhou
Passei a utilizar Claude Code conectado ao MCP do Figma para acessar diretamente o Design System. A expectativa
era que, tendo acesso aos componentes oficiais, a IA deixasse de criar inconsistências. Mesmo assim, continuava
escolhendo componentes inadequados, ignorando estados e criando variações desnecessárias.
O problema não era acesso ao
Design System. Era a forma como
ele era interpretado pela IA.
Foi nesse momento que percebi que uma LLM interpreta linguagem, não intenção visual. O Design System havia sido
estruturado para designers, não para modelos de linguagem.
A DESCOBERTA
UMA LLM NÃO INTERPRETA UM DESIGN SYSTEM.
ELA INTERPRETA LINGUAGEM.
A SOLUÇÃO
Reestruturar o Design System usando Atomic Design
PROBLEMA
Componentes muito complexos dificultavam a reutilização pela IA.
DECISÃO
Redesenhei a arquitetura utilizando Atomic Design para permitir que a LLM reutilizasse estruturas menores.
TRADE-OFF
Maior esforço inicial de reorganização.
IMPACTO
Mais consistência, menos ambiguidades e maior reutilização.
Transformar o Design System em uma linguagem compartilhada
Em vez de trocar de ferramenta, redesenhei a arquitetura do Design System. Adotei Atomic Design para reduzir
ambiguidades, padronizei documentação e regras de uso, alinhei a nomenclatura entre Design System e Design Tokens
e estabeleci uma governança para aprovação de novos componentes. O objetivo era que prompts, Figma, Design
Tokens e Front-end compartilhassem a mesma linguagem.
Em vez de ensinar a IA a desenhar,
ensinei o Design System a
conversar com a IA.
COMO O SISTEMA FUNCIONAVA
Uma linguagem contínua entre prompt,
design e código
Atomic Design
Estruturas menores reduziram
ambiguidades e aumentaram a
flexibilidade de composição
para a LLM.
Documentação e
regras
Decisões implícitas de design
passaram a ser descritas de
forma explícita e interpretável.
Padronização
A nomenclatura passou a
permanecer consistente entre
Design System e Design
Tokens.
Governança
Novos componentes
passaram por revisão antes de
integrar o sistema.
O RACIOCÍNIO EM TRÊS ETAPAS
Mudamos o Design System, não a IA
HIPÓTESE 01
Lovable / Stitch
Resultado: não utilizavam o Design System.
ESTADO VISUAL: FALHOU
HIPÓTESE 02
Claude Code + MCP
Resultado: acessava o Design System, mas
não compreendia sua lógica.
ESTADO VISUAL: FALHOU
HIPÓTESE 03
Design System AI-Ready
Resultado: componentes, documentação,
tokens e governança passaram a
compartilhar a mesma linguagem.
ESTADO VISUAL: VALIDADA
RESULTADOS
Da ideação à implementação inicial em
aproximadamente 4 horas
Durante o experimento, um redesign completo passou de aproximadamente 15 dias para cerca de 4 horas:
aproximadamente 2 horas para prototipação no Figma;
aproximadamente 2 horas para implementação inicial em Front-end.
Além da redução de tempo, o projeto aumentou a consistência entre Design e Desenvolvimento, reduziu retrabalho,
ampliou a autonomia para experimentação e transformou o próprio Design System em uma base preparada para
modelos de linguagem.
2h
Prototipação no Figma
2h
Implementação inicial em Front-end
15 dias → 4 horas
Da ideação à implementação inicial
Menos retrabalho
Redução da reconstrução
manual após a validação.
Mais consistência
Design e Front-end passaram
a compartilhar padrões
compatíveis.
Maior reutilização
A LLM passou a compor
jornadas com estruturas
existentes.
Mais autonomia
Produto ganhou mais
velocidade para testar
hipóteses.
ANTES
15 dias
Ideação
↓
Protótipo externo
↓
Validação
↓
Reconstrução no Design System
↓
Front-end
APROXIMADAMENTE 15 DIAS
DEPOIS
4 horas
Ideação
↓
Prompt e contexto
↓
Figma com Design System AI-Ready
↓
Front-end com tokens compatíveis
APROXIMADAMENTE 4 HORAS
APRENDIZADOS
O Design System deixou de ser apenas uma
biblioteca
Antes deste projeto, eu via o Design System como uma biblioteca de componentes. Depois dele, passei a enxergá-lo
como uma camada de comunicação entre pessoas e modelos de linguagem.
Quando pessoas e modelos de
linguagem compartilham a mesma
linguagem, a IA deixa de apenas gerar
interfaces e passa a acelerar todo o
processo de construção de produto.
IA APLICADA · DESIGN SYSTEM · PRODUCT STRATEGY
Como um Design System AI-Ready reduziu um ciclo de ideação à implementação de 15 dias para 4 horas
Em uma startup focada em inovação rápida, o processo
tradicional de design-to-development estava criando gargalos.
Ao reestruturar nosso Design System com princípios de Atomic
Design e alinhá-lo às capacidades de LLMs, transformamos uma
esteira de trabalho demorada em um fluxo quase instantâneo.
Com o crescimento das demandas de produto, validar hipóteses rapidamente tornou-se um desafio. Ferramentas de IA aceleravam a criação de interfaces, mas geravam retrabalho porque não respeitavam o Design System. Estruturei um Design System AI-Ready baseado em Atomic Design, padronização e governança para que modelos de linguagem reutilizassem componentes de forma consistente, reduzindo um ciclo completo — da ideação à implementação inicial — de aproximadamente 15 dias para 4 horas.
PAPEL
Product Manager
Product Designer
Design System
LLM Workflow Design
Product Strategy
TIME
PMs
PDs
Desenvolvedores
STACK
Claude
Claude Code
MCP do Figma
Figma
GitHub
ENTREGÁVEIS
Design System AI-Ready
Atomic Design
Documentação para LLMs
Governança&Padronização Design ↔Front-end
IMPACTO
15 dias → 4 horas
Da Ideação à Implementação
O DESAFIO
A velocidade de validação havia se
tornado um gargalo
O processo tradicional funcionava, mas era linear e demorado. Cada nova feature exigia wireframes, protótipos, handoff e implementação meticulosa. Para uma equipe que precisava validar hipóteses semanalmente, os 15 dias de ciclo eram insustentáveis. Como Product Manager com background em Product Design, eu buscava reduzir a dependência entre Produto, Design e Engenharia para experimentar novas ideias com mais autonomia.
“Nós tínhamos ideias rápidas, mas o
processo de tangibilizá-las era lento
demais para o ritmo da startup.”
PRIMEIRA HIPÓTESE
Usar IA para acelerar a
prototipação
Comecei utilizando Lovable e Stitch. Em poucos minutos era possível gerar jornadas completas e validar ideias com stakeholders. Mas, após a aprovação, surgia um novo problema: as interfaces não utilizavam o Design System oficial e precisavam ser reconstruídas antes do desenvolvimento. O ganho de velocidade durante o Discovery retornava em forma de retrabalho.
A IA acelerava o Discovery, mas criava umnovo gargalo antes da implementação.
Validação sem continuidade
O protótipo aprovado não podia seguir
diretamente para o produto, gerando
uma quebra no fluxo de entrega.
Reconstrução manual
O Product Designer precisava refazer a
solução usando o Design System oficial,
desperdiçando esforço criativo.
Retrabalho entre etapas
O tempo economizado no Discovery
reaparecia como dívida técnica antes do
início do desenvolvimento.
A DECISÃO QUE MUDOU O PROJETO
Minha segunda hipótese também falhou
Passei a utilizar Claude Code conectado ao MCP do Figma para acessar diretamente o Design System. A expectativa
era que, tendo acesso aos componentes oficiais, a IA deixasse de criar inconsistências. Mesmo assim, continuava
escolhendo componentes inadequados, ignorando estados e criando variações desnecessárias.
O problema não era acesso ao
Design System. Era a forma como
ele era interpretado pela IA.
Foi nesse momento que percebi que uma LLM interpreta linguagem, não intenção visual. O Design System havia sido
estruturado para designers, não para modelos de linguagem.
A DESCOBERTA
UMA LLM NÃO INTERPRETA UM DESIGN SYSTEM.
ELA INTERPRETA LINGUAGEM.
A SOLUÇÃO
Reestruturar o Design System usando Atomic Design
PROBLEMA
Componentes muito complexos dificultavam a reutilização pela IA.
DECISÃO
Redesenhei a arquitetura utilizando Atomic Design para permitir que a LLM reutilizasse estruturas menores.
TRADE-OFF
Maior esforço inicial de reorganização.
IMPACTO
Mais consistência, menos ambiguidades e maior reutilização.
Transformar o Design System em uma linguagem compartilhada
Em vez de trocar de ferramenta, redesenhei a arquitetura do Design System. Adotei Atomic Design para reduzir
ambiguidades, padronizei documentação e regras de uso, alinhei a nomenclatura entre Design System e Design Tokens
e estabeleci uma governança para aprovação de novos componentes. O objetivo era que prompts, Figma, Design
Tokens e Front-end compartilhassem a mesma linguagem.
Em vez de ensinar a IA a desenhar,
ensinei o Design System a
conversar com a IA.
COMO O SISTEMA FUNCIONAVA
Uma linguagem contínua entre prompt,
design e código
Atomic Design
Estruturas menores reduziram
ambiguidades e aumentaram a
flexibilidade de composição
para a LLM.
Documentação e
regras
Decisões implícitas de design
passaram a ser descritas de
forma explícita e interpretável.
Padronização
A nomenclatura passou a
permanecer consistente entre
Design System e Design
Tokens.
Governança
Novos componentes
passaram por revisão antes de
integrar o sistema.
O RACIOCÍNIO EM TRÊS ETAPAS
Mudamos o Design System, não a IA
HIPÓTESE 01
Lovable / Stitch
Resultado: não utilizavam o Design System.
ESTADO VISUAL: FALHOU
HIPÓTESE 02
Claude Code + MCP
Resultado: acessava o Design System, mas
não compreendia sua lógica.
ESTADO VISUAL: FALHOU
HIPÓTESE 03
Design System AI-Ready
Resultado: componentes, documentação,
tokens e governança passaram a
compartilhar a mesma linguagem.
ESTADO VISUAL: VALIDADA
RESULTADOS
Da ideação à implementação inicial em
aproximadamente 4 horas
Durante o experimento, um redesign completo passou de aproximadamente 15 dias para cerca de 4 horas:
aproximadamente 2 horas para prototipação no Figma;
aproximadamente 2 horas para implementação inicial em Front-end.
Além da redução de tempo, o projeto aumentou a consistência entre Design e Desenvolvimento, reduziu retrabalho,
ampliou a autonomia para experimentação e transformou o próprio Design System em uma base preparada para
modelos de linguagem.
2h
Prototipação no Figma
2h
Implementação inicial em Front-end
15 dias → 4 horas
Da ideação à implementação inicial
Menos retrabalho
Redução da reconstrução
manual após a validação.
Mais consistência
Design e Front-end passaram
a compartilhar padrões
compatíveis.
Maior reutilização
A LLM passou a compor
jornadas com estruturas
existentes.
Mais autonomia
Produto ganhou mais
velocidade para testar
hipóteses.
ANTES
15 dias
Ideação
↓
Protótipo externo
↓
Validação
↓
Reconstrução no Design System
↓
Front-end
APROXIMADAMENTE 15 DIAS
DEPOIS
4 horas
Ideação
↓
Prompt e contexto
↓
Figma com Design System AI-Ready
↓
Front-end com tokens compatíveis
APROXIMADAMENTE 4 HORAS
APRENDIZADOS
O Design System deixou de ser apenas uma
biblioteca
Antes deste projeto, eu via o Design System como uma biblioteca de componentes. Depois dele, passei a enxergá-lo
como uma camada de comunicação entre pessoas e modelos de linguagem.
Quando pessoas e modelos de
linguagem compartilham a mesma
linguagem, a IA deixa de apenas gerar
interfaces e passa a acelerar todo o
processo de construção de produto.