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.

170K 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.

30K 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.

25K 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.

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

Description du dépôt (original)

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

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

Description du dépôt (original)

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

30K starsMITcoding-agents
Comparer
$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
#7Webapp 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.

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

Description du dépôt (original)

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

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

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