Guide de workflow

Frontend et UI produit workflow

Un workflow d’agent vérifiable pour Frontend et UI produit.

Un workflow d’agent vérifiable pour Frontend et UI produit.

Résultat attendu

  • Clarifier l’objectif Frontend et UI produit
  • Choisir les capacités adaptées
  • Vérifier le résultat avant l’étape suivante

Carte du workflow

Suivez cette séquence

01

Cadrer

Transformez le résultat demandé en tâche d’agent claire et vérifiable.

02

Choisir

Sélectionnez les capacités de l’étape actuelle plutôt qu’une catégorie générale.

03

Exécuter

Réalisez la plus petite étape utile après vérification des sources, permissions et périmètre.

04

Valider

Examinez les preuves et le résultat avant l’étape suivante.

Capacités suggérées

Choisir les skills à chaque étape

Classées selon la pertinence du workflow, la qualité, l’adoption GitHub et la fraîcheur de maintenance. C’est un guide de décision, pas une commande unique.

#1Frontend DesignQualité · 100

Description du dépôt (original)

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

180K starsSource terms (see LICENSE.txt)design-creative
Comparer
$ npx skills add anthropics/skills --skill frontend-design
#2Web Design GuidelinesQualité · 100

Description du dépôt (original)

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

32K starsSource terms (see source)design-creative
Comparer
$ npx skills add vercel-labs/agent-skills --skill web-design-guidelines
#3Figma Implement DesignQualité · 100

Description du dépôt (original)

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

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

Description du dépôt (original)

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

94K starsMITdesign-creative
Comparer
$ npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
#5Ui Ux Pro Max SkillQualité · 100

Description du dépôt (original)

An AI agent skill that provides design intelligence and UI/UX guidelines for building professional interfaces across multiple platforms.

107K starsMITdevelopment
Comparer
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill
#6Webapp TestingQualité · 100

Description du dépôt (original)

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

180K starsSource terms (see LICENSE.txt)browser-automation
Comparer
$ npx skills add anthropics/skills --skill webapp-testing

Description du dépôt (original)

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

32K starsMITcoding-agents
Comparer
$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
#8Playwright Browser SkillQualité · 100

Description du dépôt (original)

Automate a real browser from the terminal for navigation, form filling, snapshots, screenshots, extraction, and UI-flow debugging.

28K starsSource terms (see source)browser-automation
Comparer
$ npx skills add openai/skills --skill playwright

Bon usage

  • - Workflows Frontend et UI produit
  • - Décisions d’agent auditables
  • - Essais dans un environnement contrôlé

Pas adapté quand

  • - La tâche nécessite un accès non supervisé à des systèmes sensibles
  • - Les sources ou la qualité du résultat ne peuvent pas être vérifiées

Besoin d’un pack exécutable ?

Les packs incluent ordre d’installation, liens d’audit et plan d’Agent lisible par machine.

Voir les packs