Guía de flujo

Frontend y UI de producto flujo de trabajo

Un flujo de agent revisable para Frontend y UI de producto.

Un flujo de agent revisable para Frontend y UI de producto.

Resultado esperado

  • Aclarar el objetivo de Frontend y UI de producto
  • Elegir capacidades adecuadas
  • Validar resultados antes del siguiente paso

Mapa de flujo

Sigue esta secuencia

01

Delimitar

Convierte el resultado pedido en una tarea de agent clara y revisable.

02

Elegir

Selecciona capacidades para la etapa actual, no una categoría genérica.

03

Ejecutar

Completa el paso mínimo útil tras comprobar fuentes, permisos y alcance.

04

Validar

Revisa evidencias y resultados antes de pasar a la siguiente etapa.

Capacidades sugeridas

Elige skills para cada paso

Ordenadas por relevancia para este flujo, calidad, adopción en GitHub y actividad de mantenimiento. Es una guía de decisión, no un único comando de instalación.

#1Frontend DesignCalidad · 100

Descripción del repositorio (original)

Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.

170K starsSource terms (see LICENSE.txt)design-creative
Comparar
$ npx skills add anthropics/skills --skill frontend-design
#2Web Design GuidelinesCalidad · 100

Descripción del repositorio (original)

Review UI code for web interface guidelines, UX quality, accessibility, and interaction design best practices.

30K starsSource terms (see source)design-creative
Comparar
$ npx skills add vercel-labs/agent-skills --skill web-design-guidelines
#3Figma Implement DesignCalidad · 100

Descripción del repositorio (original)

Translate Figma designs into production-ready UI code with close visual fidelity and component-level detail.

25K starsSource terms (see source)design-creative
Comparar
$ npx skills add openai/skills --skill figma-implement-design

Descripción del repositorio (original)

Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.

78K starsMITdesign-creative
Comparar
$ npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

Descripción del repositorio (original)

Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.

170K starsSource terms (see LICENSE.txt)design-creative
Comparar
$ npx skills add anthropics/skills --skill brand-guidelines

Descripción del repositorio (original)

React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.

30K starsMITcoding-agents
Comparar
$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
#7Webapp TestingCalidad · 100

Descripción del repositorio (original)

Use Playwright to interact with and test local web applications, capture screenshots, debug UI behavior, and inspect browser logs.

170K starsSource terms (see LICENSE.txt)browser-automation
Comparar
$ npx skills add anthropics/skills --skill webapp-testing
#8Canvas DesignCalidad · 100

Descripción del repositorio (original)

Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.

170K starsSource terms (see LICENSE.txt)design-creative
Comparar
$ npx skills add anthropics/skills --skill canvas-design

Buen encaje

  • - Flujos de Frontend y UI de producto
  • - Decisiones de agent auditables
  • - Pruebas en un entorno controlado

No es la ruta correcta cuando

  • - La tarea exige acceso sin supervisión a sistemas sensibles
  • - No se pueden revisar las fuentes o la calidad de los resultados

¿Necesitas un paquete ejecutable?

Los packs incluyen orden de instalación, enlaces de auditoría y un plan de Agent legible por máquinas.

Ver packs