frontend-design
Crear interfaces frontend distintivas
El trabajo de frontend puede parecer genérico cuando las decisiones de diseño son vagas. Esta skill guía a Claude, Codex y Claude Code para crear interfaces pulidas con tipografía, maquetación, color y movimiento más sólidos.
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/anthropics-frontend-design.md and its manifest at https://skillstore.io/api/skills/anthropics-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Recursos legibles por agentes
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Pruébalo
Usando "frontend-design". Crea un dashboard para un equipo de logística que rastrea envíos retrasados.
Resultado esperado:
Un concepto de dashboard funcional con tablas de estado densas, estados de alerta, colores sobrios y pulido de interacción para operaciones diarias.
Usando "frontend-design". Crea una página de lanzamiento para una nueva herramienta de edición de audio.
Resultado esperado:
Una página de lanzamiento distintiva con tipografía potente, ritmo visual inspirado en audio, llamadas a la acción claras y movimiento refinado.
Usando "frontend-design". Rediseña una tarjeta de precios para una herramienta de desarrolladores.
Resultado esperado:
Un componente de precios más definido con jerarquía mejorada, mayor claridad en la comparación de planes, estados hover y un tono de producto más específico.
Auditoría de seguridad
SeguroAll three static findings are false positives caused by ordinary frontend design guidance. The skill contains no system reconnaissance, prompt injection, data exfiltration, or other malicious intent.
Compartir y citar este informe
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
Copiar enlace del informe
https://skillstore.io/skills/anthropics-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/anthropics-frontend-design?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/anthropics-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/anthropics-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/anthropics-frontend-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citas académicas (APA · BibTeX · CFF)
Cita APA
anthropics. (2026). frontend-design security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/anthropics-frontend-design/audits/9Cita BibTeX
@techreport{anthropics-anthropics-frontend-design-2026,
author = {anthropics},
title = {frontend-design security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/anthropics-frontend-design/audits/9},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-design security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "anthropics"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/anthropics-frontend-design/audits/9"
identifiers:
- type: other
value: "skillstore:anthropics-frontend-design:audit:9"
description: "Skillstore immutable audit report identifier"
Comparar variantes
18 variantes instalablesCada autor sigue siendo un skill instalable independiente. La variante recomendada se ordena según la evidencia de Skillstore.
Por qué esta variante es la primera
atman36-frontend-design
2026-09-09
frontend-design
2026-09-09
zhanlincui-frontend-design
2026-09-09
yyh211-frontend-design
2026-09-09
1bertogit-frontend-design
2026-09-09
92bilal26-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-09-09
am-will-frontend-design
2026-09-09
azeem-2-frontend-design
2026-09-09
cesaraugustusgrob-frontend-design
2026-09-09
davila7-frontend-design
2026-09-09
anthropics-frontend-design
2026-09-09
pbakaus-frontend-design
2026-09-09
7spade-frontend-design
2026-09-09
sickn33-frontend-design
2026-09-09
agentworkforce-frontend-design
2026-09-09
ajv009-frontend-design
2026-09-09
dennisliuck-frontend-design
2026-09-09
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: AltoLo que puedes crear
Dirección para página de producto
Crear una página de producto memorable con un punto de vista visual claro y detalles de interacción pulidos.
Construcción de interfaz de aplicación
Guiar la implementación de una pantalla funcional de app con decisiones cohesivas de maquetación, tema y movimiento.
Diferenciación de prototipo
Convertir una idea inicial en un prototipo distintivo que evite patrones de página genéricos.
Prueba estos prompts
Crea una página web pulida para este producto: [describe product]. Elige una dirección estética clara e implementa la pantalla principal.
Rediseña este componente para [audience]. Mantén la misma función, pero mejora la tipografía, el espaciado, el color, el movimiento y la jerarquía visual.
Diseña e implementa una vista de app para [workflow]. Incluye estados realistas, información densa cuando sea necesario y detalles de interacción cohesivos.
Crea un concepto frontend para [brand or product]. Define la dirección estética y luego implementa una interfaz funcional que demuestre esa dirección.
Mejores prácticas
- Proporciona la audiencia, el propósito del producto y el stack técnico antes de pedir la implementación.
- Pide estados de interacción reales, incluidos carga, vacío, error, hover y comportamiento responsive.
- Revisa la accesibilidad, el rendimiento y la compatibilidad con navegadores después de implementar la dirección visual.
Evitar
- No solicites una landing page moderna genérica sin contexto del producto.
- No dependas de efectos decorativos cuando el flujo de trabajo principal no está claro.
- No omitas las pruebas de maquetación móvil, contraste y acceso con teclado.
Preguntas frecuentes
¿Qué ayuda a crear esta skill?
¿Qué herramientas pueden usar esta skill?
¿Genera código funcional?
¿Elige un estilo de diseño?
¿Está limitada a un solo framework?
¿Qué deben proporcionar los usuarios para obtener los mejores resultados?
Detalles del desarrollador
Autor
anthropicsLicencia
Complete terms in LICENSE.txt
Revisión de Skillstore
r2
Aviso de versión
El autor no declaró una versión.
Ref.
89edfdc710d0846129dcee6a929477b04f08052c
Actualidad del mantenimiento
25/7/2026
Uso
120 descargas · 254 vistas
Estructura de archivos
📄 SKILL.md