frontend-design
Crear interfaces frontend distintivas
Las interfaces genéricas generadas por IA hacen que los productos parezcan intercambiables. Esta skill guía a Claude, Codex y Claude Code hacia una dirección de UI cuidada, sistemas de diseño y código frontend funcional.
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/sickn33-frontend-design.md and its manifest at https://skillstore.io/api/skills/sickn33-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 operaciones que deba sentirse preciso, rápido y serio.
Resultado esperado:
La respuesta definiría una dirección utilitaria industrial, especificaría reglas de tipografía y layout, y luego proporcionaría una implementación funcional del dashboard.
Usando "frontend-design". Rediseña una homepage SaaS genérica para que se sienta memorable y premium.
Resultado esperado:
La respuesta sustituiría los patrones predeterminados por una tesis visual enfocada, elecciones tipográficas refinadas, color contenido y movimiento intencionado.
Usando "frontend-design". Elige un estilo visual para una app lúdica de educación financiera.
Resultado esperado:
La respuesta compararía varias direcciones, las puntuaría con DFII y recomendaría el diseño más adecuado antes de la implementación.
Auditoría de seguridad
SeguroAll seven static findings are false positives. Lines 63 and 65 are Markdown fences around an arithmetic formula, while the remaining matches are ordinary design guidance. No prompt injection, command execution, reconnaissance, or malicious intent was found.
Factores de riesgo
⚙️ Comandos externos (2)
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/sickn33-frontend-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/sickn33-frontend-design?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/sickn33-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/sickn33-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
sickn33. (2026). frontend-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-design/audits/5Cita BibTeX
@techreport{sickn33-sickn33-frontend-design-2026,
author = {sickn33},
title = {frontend-design security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-frontend-design/audits/5},
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 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/sickn33-frontend-design/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-design:audit:5"
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
Crear una interfaz de producto
Convierte una idea aproximada de aplicación web en una primera pantalla distintiva con una dirección visual clara y una estructura frontend funcional.
Renovar una UI genérica
Sustituye diseños, fuentes y colores predeterminados por un sistema de diseño cohesivo que se ajuste al público del producto.
Dar forma a un brief de diseño
Compara direcciones estéticas, evalúa la viabilidad y define reglas de implementación antes de crear componentes.
Prueba estos prompts
Crea una landing page lista para producción para [product]. Elige una dirección estética clara, define el sistema de diseño e implementa la primera pantalla.
Rediseña esta interfaz para evitar patrones genéricos de UI de IA. Mantén el flujo de trabajo principal, pero mejora la tipografía, el color, el layout y el movimiento.
Crea un sistema de diseño frontend para [application type]. Incluye dirección estética, reglas de componentes reutilizables, expectativas de accesibilidad y guía de implementación.
Compara tres direcciones visuales para [product], puntúa cada una con DFII, elige la opción más sólida y luego crea la interfaz usando esa dirección.
Mejores prácticas
- Proporciona el público, el objetivo del producto y el tono emocional deseado antes de pedir la implementación.
- Pide la puntuación DFII al comparar varias direcciones visuales.
- Valida la interfaz generada en cuanto a accesibilidad, adaptabilidad y rendimiento.
Evitar
- Pedir una UI bonita sin contexto del producto ni usuarios objetivo.
- Mezclar demasiadas estéticas en una sola interfaz.
- Aceptar fuentes, colores y layouts predeterminados sin revisión.