Como transformar referências em design system

Autoria: Asimov Academy · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: Como Tranformar Referências em Design System · Canal: Asimov Academy · 01:01 · Assistir no YouTube

Tópicos: Engenharia de prompts e contexto, Engenharia de software com IA, Ferramentas de desenvolvimento com IA

Resumo

O vídeo apresenta Extract System, uma skill criada para montar uma biblioteca pessoal de componentes de design a partir de sites de referência. O processo começa baixando o código-fonte do site e preservando elementos como animações, planos de fundo e efeitos. Em seguida, a skill organiza os arquivos e separa os elementos visuais, como tipografia, cores, cards, ícones e transições. Esses design systems podem ser recombinados para ajudar IAs a criar designs mais precisos usando menos tokens.

Pontos-chave

Extract System transforma sites de referência em uma biblioteca de componentes de design.
Uma ferramenta de download captura o código-fonte preservando animações, planos de fundo e efeitos.
A skill reorganiza os arquivos para que o site possa ser acessado offline.
O site é decomposto em elementos como regras tipográficas, cores, cards, imagens e ícones.
Os elementos separados podem ser recombinados em novos design systems.
O uso desses sistemas pode ajudar IAs a produzir designs com mais precisão e menos tokens.

Capítulos

Início	Capítulo	Resumo
00:00	A biblioteca de componentes e Extract System	O apresentador explica como a skill ajuda a criar uma biblioteca pessoal de referências de design e introduz o processo.
00:31	Download e decomposição dos sites	O código-fonte de um site é baixado e organizado para que a skill identifique seus elementos visuais.
01:01	Recombinar design systems e acessar a skill	Os elementos extraídos podem ser recombinados para gerar designs mais precisos com menos tokens, e o apresentador indica o link da skill.

Citações

Criei uma skill que me ajudou a montar minha biblioteca pessoal de componentes de design para IA. — 00:00

Vamos baixar o código-fonte e usar esta skill. — 00:31

Tudo o que, separadamente, compunha aquele site. — 01:01

Com muito menos tokens e muito mais precisão. — 01:01

Conceitos e entidades

Extract System (ferramenta): Skill apresentada no vídeo que organiza e decompõe sites de referência em elementos de design reutilizáveis.
design system (conceito): Conjunto organizado de elementos e regras visuais, como tipografia, cores, componentes e efeitos.
Asimov Academy (empresa): Canal e instituição mencionados no contexto do curso de AI designer.
AI designer course (conceito): Curso citado como forma de acesso à ferramenta de download de código-fonte.

Tradução completa (pt-BR)

00:00 Criei uma skill que me ajudou a montar minha biblioteca pessoal de componentes de design com IA, dando-me um catálogo enorme que uso ao criar designs para sites, aplicativos melhores, dashboards e até apresentações. Ela se chama Extract System, e a lógica funciona mais ou menos assim. Primeiro, vamos precisar de uma ferramenta para baixar o código-fonte de sites. Existem muitas opções gratuitas na internet, mas nem todas são muito boas. Desenvolvi esta, que me permite baixar o código-fonte de qualquer site, preservando animações, planos de fundo e

00:31 efeitos. Ela também está disponível para os alunos do curso de designer de IA da Zemov Academy. A lógica é a seguinte: sempre que você encontrar um site com um design impressionante e um efeito fora do comum, vamos baixar o código-fonte dele e usar esta skill, que fará o seguinte. Primeiro passo: ela vai reorganizar os arquivos para que o site inteiro fique disponível offline e possa ser acessado apenas por este arquivo aqui. Em seguida, vai decompor o site inteiro em elementos separados, incluindo as regras de tipografia, as cores e quando usar cada uma,

01:01 cards, efeitos de plano de fundo, animações, transições, imagens, ícones; em outras palavras, tudo o que, separadamente, compunha aquele site. Isso é importante porque, no futuro, poderemos recombinar esses design systems, permitindo que qualquer inteligência artificial, até mesmo as mais fracas, gere designs impressionantes como estes, gastando muito menos tokens e com muito mais precisão. E, se você quiser acessar esta skill, deixei o link aqui na descrição.

Transcrição original

[00:00] I created a skill that helped me build my personal library of AI design components, giving me a massive catalog that I use when creating designs for websites, better apps, dashboards, and even presentations. Its name is Extract System and the logic works more or less like this. First of all, we’re going to need a tool to download website source code. There are many free ones out there on the internet, but not all of them are very good. I developed this one, which allows me to download the source code of any site while preserving animations, backgrounds, and

[00:31] effects, and it’s even available to students of the AI designer course at Zemov Academy. And the logic is, whenever you come across a site that has some impressive design with an out-of-the-box effect, we’ll download its source code and use this skill, which will do the following. First step : it will reorganize the files so the entire site is available offline and just through this file here, to then decompose the whole site into separate elements, containing the typography rules, colors and when to use each one,

[01:01] cards, background effects, animations, transitions, images, icons; in other words, everything that, separately, made up that site. This is important because in the future we can recombine these design systems, allowing any artificial intelligence, even the weaker ones, to generate impressive designs like these, spending far fewer tokens and with much more precision. And if you want to get access to this skill, I left the link here in the description.