Guía de lectura localizada
frontend-designFinalidad, uso y origen
Crea interfaces frontend distintivas y de nivel de producción con alta calidad de diseño. Usa esta habilidad cuando el usuario te pida que construyas componentes web, páginas, artefactos, carteles o aplicaciones (ejemplos incluyen sitios web, páginas de destino, paneles, componentes React,HTML/CSSdiseños, o cuandostyling/beautifyingcualquier interfaz de usuario web). Genera código creativo y pulido, así como un diseño de interfaz de usuario que evita la estética genérica de la IA.
Fuente recuperada:
- Repositorio de origen
- vercel-labs/open-agents
- SKILL.md
.agents/skills/frontend-design/SKILL.md- Estrellas del repositorio
- 5,871
- Actualización del repositorio
- 2026-08-29
- Clasificación de habilidades
- Diseño
- Última recopilación
Licencia: MIT
Los extractos del flujo de trabajo son guías de lectura, no instrucciones ejecutables de Codez. No se utilizó ninguna habilidad de terceros para generar esta página.
Los siguientes fragmentos sobre el propósito y el flujo de trabajo son material preliminar, organizado y traducido para su lectura. Son distintos del análisis editorial de Codez, que se presenta por separado.
Lo que hace esta habilidad
Crea interfaces frontend distintivas y de nivel de producción con alta calidad de diseño. Usa esta habilidad cuando el usuario te pida que construyas componentes web, páginas, artefactos, carteles o aplicaciones (ejemplos incluyen sitios web, páginas de destino, paneles, componentes React,HTML/CSSdiseños, o cuandostyling/beautifyingcualquier interfaz de usuario web). Genera código creativo y pulido, así como un diseño de interfaz de usuario que evita la estética genérica de la IA.
Cómo funciona el flujo de trabajo ascendente
Descripción general
Esta habilidad guía la creación de interfaces frontend distintivas y de calidad profesional que evitan la estética genérica y superficial propia de la IA. Implementa código funcional con una atención excepcional a los detalles estéticos y a las decisiones creativas. El usuario proporciona los requisitos frontend: un componente, página, aplicación o interfaz para desarrollar. Estos requisitos pueden incluir información sobre el propósito, el público objetivo o las limitaciones técnicas.
Paso río arriba · L6 ↗Pensamiento de diseño
Antes de programar, comprenda el contexto y comprométase con una dirección estética audaz: Propósito: ¿Qué problema resuelve esta interfaz? ¿Quién la usa?
Paso río arriba · L10 ↗Directrices de estética para el frontend
Tipografía: Elige fuentes que sean bellas, únicas e interesantes. Evita las fuentes genéricas como Arial e Inter; opta por opciones distintivas que realcen la estética del frontend; fuentes inesperadas y con carácter. Combina una fuente de visualización distintiva con una fuente de cuerpo refinada. Color y tema: Comprométete con una estética coherente. Usa variables CSS para mayor consistencia. Los colores dominantes con acentos marcados funcionan mejor que las paletas tímidas y uniformemente distribuidas.
Paso río arriba · L26 ↗Requisitos y configuración
No se seleccionó ningún fragmento de requisitos breves de este archivo. Esto no significa que la habilidad no tenga dependencias. Consulte las instrucciones de configuración del repositorio y los archivos de referencia.
Límites y controles de calidad
No se seleccionó ningún pasaje con límites específicos en este archivo. Esto no significa que la habilidad sea segura para cualquier entrada o entorno. Revise el código fuente completo y valide su propio resultado.
Comience con una prueba segura.
- Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
- Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
- Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
- Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.
Lea más en la fuente
Habilidades relacionadas
Traducción y alcance
Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.
Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.
- Fuente fijada
- Lee el original ↗
- Fuente recuperada
- Confirmación de origen
cf865e94de7729751c747171785b6ce57e7b178c- Fuente SHA-256
1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873