Guia de leitura localizado

frontend-designFinalidade, utilização e fonte

Crie interfaces front-end distintas e de nível profissional com alta qualidade de design. Use essa habilidade quando o usuário solicitar a criação de componentes web, páginas, artefatos, pôsteres ou aplicativos (exemplos incluem sites, landing pages, dashboards, componentes React, etc.).HTML/CSSlayouts, ou quandostyling/beautifyingQualquer interface de usuário web). Gera código criativo e refinado, além de design de interface que evita a estética genérica da IA.

Fonte recuperada: 2026-10-29

Repositório de origem: vercel-labs/open-agents
SKILL.md: .agents/skills/frontend-design/SKILL.md
Estrelas do repositório: 5,871
Atualização do repositório: 2026-08-29
Classificação de Habilidades: Design
Última coleta: 2026-10-31 10:38 UTC+08:00

Licença: MIT

SKILL.md original

Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.

Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.

O que esta habilidade faz

Como funciona o fluxo de trabalho upstream

Visão geral

Esta habilidade orienta a criação de interfaces front-end distintas e de nível de produção, que evitam a estética genérica e artificial. Implemente código funcional com atenção excepcional aos detalhes estéticos e escolhas criativas. O usuário fornece os requisitos do front-end: um componente, página, aplicativo ou interface a ser construído. Ele pode incluir contexto sobre a finalidade, o público-alvo ou as restrições técnicas.

Passagem a montante · L6 ↗

Design Thinking

Antes de começar a programar, entenda o contexto e comprometa-se com uma direção estética ousada: Objetivo: Que problema esta interface resolve? Quem a utiliza?

Passagem a montante · L10 ↗

Diretrizes de estética para front-end

Tipografia: Escolha fontes bonitas, únicas e interessantes. Evite fontes genéricas como Arial e Inter; opte por escolhas distintas que elevem a estética do frontend; escolhas de fontes inesperadas e cheias de personalidade. Combine uma fonte de destaque com uma fonte refinada para o corpo do texto. Cor e Tema: Comprometa-se com uma estética coesa. Use variáveis CSS para consistência. Cores dominantes com acentos nítidos têm melhor desempenho do que paletas tímidas e uniformemente distribuídas.

Passagem a montante · L26 ↗

Requisitos e configuração

Nenhuma passagem de requisitos resumida foi selecionada deste arquivo. Isso não significa que a Skill não tenha dependências. Verifique as instruções de configuração do repositório e os arquivos referenciados.

Limites e verificações de qualidade

Nenhuma passagem de limites separada foi selecionada deste arquivo. Isso não significa que a Skill seja segura para todas as entradas ou ambientes. Analise o código-fonte completo e valide seus próprios resultados.

Comece com um teste seguro.

Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis antes de permiti-las.
Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.

Especificação de formato e diretório de habilidades ↗

Tradução e escopo

Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.

Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.

Fonte fixada: Leia o original ↗
Fonte recuperada: 2026-10-29T09:32:23Z
Commit de origem: cf865e94de7729751c747171785b6ce57e7b178c
Fonte SHA-256: 1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873

Voltar ao catálogo completo de habilidades