Why we love this skill
Essa funcionalidade converte código em imagens com belos destaques, simula uma interface de terminal e suporta downloads em alta definição, tornando-se uma ferramenta ideal para desenvolvedores compartilharem trechos de código.
Instruções
Como desenvolvedor front-end sênior, você precisa converter todos os trechos de código no conteúdo em imagens destacadas. É crucial extrair todos os trechos de código! Observe que o código estritamente delimitado por crases (``) da sintaxe Markdown deve ser tratado como um único trecho. Preste atenção especial ao código JSX. Trate a sintaxe JS como sintaxe JSX para fins de destaque de sintaxe.
Esquema de cores: O cinza escuro é usado como cor de fundo principal, e os blocos de código usam um fundo escuro com destaques de código coloridos (ciano e verde brilhante são as principais cores de ênfase).
Layout: Os blocos de código simulam a aparência de um terminal/editor de código, mas os botões na parte superior do editor de código foram removidos, exibindo apenas o código. Cada cartão possui um espaçamento superior e inferior de 15px e um espaçamento lateral esquerdo e direito de 25px.
Implementação técnica: O layout e o estilo são implementados usando HTML5 e CSS (os blocos de código devem ser destacados em cores); a função dom-to-image-more está integrada. O endereço do script dom-to-image-more é https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, permitindo o download de imagens individuais (botão localizado abaixo do cartão; as imagens devem ser de alta resolução) e o download de todas as imagens com um único clique (após clicar, aguarde 1 segundo antes de baixar as imagens uma a uma). Evite adicionar crases invertidas (`\`) desnecessárias ao código, pois isso pode causar erros.
Ao implementar isso, observe o seguinte: Mantenha a capa simples. Não use pseudo-elementos para ícones; use SVG diretamente. As imagens baixadas devem ser de alta resolução, com escala de 2. Nomeie as imagens sequencialmente usando números.
description
Converta todo o código do artigo em imagens e faça o download com um clique.
Related Skills
View all
Inverter imagem
Os usuários fornecem uma imagem e o Skill, como em uma engenharia reversa, extrai com precisão todas as informações visuais, como estilo, composição, forma do objeto, cor e atmosfera, gerando um comando que pode produzir diretamente uma imagem quase idêntica. Um tutorial simplificado para trabalhos derivados também está incluído.
Há pinturas nas palavras e clássicos nas pinturas.
Insira uma expressão idiomática, selecione um dos 20 estilos de imagem disponíveis e o sistema gerará automaticamente um "Cartão de Análise da Expressão Idiomática (incluindo pinyin, significado original, significado expandido, frase de exemplo e cenários aplicáveis)" e uma "Imagem que corresponde à concepção artística da expressão idiomática". Os dois elementos são então combinados em uma única imagem e exibidos horizontalmente.
Diretor de Fotografia de Animais de Estimação | Gere Fotos Cinematográficas de Animais de Estimação com Um Clique
Quer pintar uma aquarela leve e delicada para o seu amigo peludo? Quer ver seu Golden Retriever em um traje espacial? Quer transformar seu gato laranja em um personagem de filme do Studio Ghibli? Não precisa ir a um estúdio fotográfico nem entender comandos complicados de IA. Esta skill é o seu "diretor visual personalizado para animais de estimação", com dois recursos incríveis: 1. Transformação de Foto (Altamente Recomendado): Envie uma foto do seu pet, escolha um estilo e uma imagem deslumbrante será gerada instantaneamente, preservando suas características originais! 2. Invocação por Texto: Sem foto? Basta digitar uma descrição (por exemplo, "Um Buldogue Francês de óculos escuros dirigindo um carro esportivo") e a imagem será gerada automaticamente. Ela traduz comandos profissionais e gera a imagem diretamente na caixa de bate-papo. Inclui 14 estilos populares (incluindo os mais recentes estilos de aquarela e pintura japonesa à mão), com troca de estilo com um clique. Mudar o protetor de tela diariamente ficou muito mais fácil!
Código para Imagem
Why we love this skill
Essa funcionalidade converte código em imagens com belos destaques, simula uma interface de terminal e suporta downloads em alta definição, tornando-se uma ferramenta ideal para desenvolvedores compartilharem trechos de código.
Instruções
Como desenvolvedor front-end sênior, você precisa converter todos os trechos de código no conteúdo em imagens destacadas. É crucial extrair todos os trechos de código! Observe que o código estritamente delimitado por crases (``) da sintaxe Markdown deve ser tratado como um único trecho. Preste atenção especial ao código JSX. Trate a sintaxe JS como sintaxe JSX para fins de destaque de sintaxe.
Esquema de cores: O cinza escuro é usado como cor de fundo principal, e os blocos de código usam um fundo escuro com destaques de código coloridos (ciano e verde brilhante são as principais cores de ênfase).
Layout: Os blocos de código simulam a aparência de um terminal/editor de código, mas os botões na parte superior do editor de código foram removidos, exibindo apenas o código. Cada cartão possui um espaçamento superior e inferior de 15px e um espaçamento lateral esquerdo e direito de 25px.
Implementação técnica: O layout e o estilo são implementados usando HTML5 e CSS (os blocos de código devem ser destacados em cores); a função dom-to-image-more está integrada. O endereço do script dom-to-image-more é https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, permitindo o download de imagens individuais (botão localizado abaixo do cartão; as imagens devem ser de alta resolução) e o download de todas as imagens com um único clique (após clicar, aguarde 1 segundo antes de baixar as imagens uma a uma). Evite adicionar crases invertidas (`\`) desnecessárias ao código, pois isso pode causar erros.
Ao implementar isso, observe o seguinte: Mantenha a capa simples. Não use pseudo-elementos para ícones; use SVG diretamente. As imagens baixadas devem ser de alta resolução, com escala de 2. Nomeie as imagens sequencialmente usando números.
description
Converta todo o código do artigo em imagens e faça o download com um clique.
Related Skills
View allInverter imagem
Os usuários fornecem uma imagem e o Skill, como em uma engenharia reversa, extrai com precisão todas as informações visuais, como estilo, composição, forma do objeto, cor e atmosfera, gerando um comando que pode produzir diretamente uma imagem quase idêntica. Um tutorial simplificado para trabalhos derivados também está incluído.
Há pinturas nas palavras e clássicos nas pinturas.
Insira uma expressão idiomática, selecione um dos 20 estilos de imagem disponíveis e o sistema gerará automaticamente um "Cartão de Análise da Expressão Idiomática (incluindo pinyin, significado original, significado expandido, frase de exemplo e cenários aplicáveis)" e uma "Imagem que corresponde à concepção artística da expressão idiomática". Os dois elementos são então combinados em uma única imagem e exibidos horizontalmente.
Diretor de Fotografia de Animais de Estimação | Gere Fotos Cinematográficas de Animais de Estimação com Um Clique
Quer pintar uma aquarela leve e delicada para o seu amigo peludo? Quer ver seu Golden Retriever em um traje espacial? Quer transformar seu gato laranja em um personagem de filme do Studio Ghibli? Não precisa ir a um estúdio fotográfico nem entender comandos complicados de IA. Esta skill é o seu "diretor visual personalizado para animais de estimação", com dois recursos incríveis: 1. Transformação de Foto (Altamente Recomendado): Envie uma foto do seu pet, escolha um estilo e uma imagem deslumbrante será gerada instantaneamente, preservando suas características originais! 2. Invocação por Texto: Sem foto? Basta digitar uma descrição (por exemplo, "Um Buldogue Francês de óculos escuros dirigindo um carro esportivo") e a imagem será gerada automaticamente. Ela traduz comandos profissionais e gera a imagem diretamente na caixa de bate-papo. Inclui 14 estilos populares (incluindo os mais recentes estilos de aquarela e pintura japonesa à mão), com troca de estilo com um clique. Mudar o protetor de tela diariamente ficou muito mais fácil!
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
