AgentSkillsCN

frontend-design-alt-1

打造独具特色且符合生产标准的前端界面，赋予其鲜明的设计风格，而非千篇一律的通用美学。 适用于用户明确要求设计或重构界面（Web 组件、页面、应用）时使用，尤其适合那些对视觉表现有强烈偏好、追求独特设计语言的场景。 注重清晰的审美视角、精致的视觉细节，以及经过充分优化、可直接投入生产的代码。

SKILL.md
--- frontmatter
name: frontend-design-alt-1
description: |
  Créer des interfaces frontend distinctives et production-grade avec une esthétique forte et non générique.
  Utiliser quand l'utilisateur demande de concevoir ou refondre une interface (composants web, pages, applications) avec un parti pris visuel marqué.
  Mettre l'accent sur un point de vue esthétique clair, des détails visuels soignés et un code prêt pour la production.

frontend-design

Créer des interfaces distinctives qui évitent l'esthétique "AI slop". Implémenter du code fonctionnel avec attention exceptionnelle aux détails.

Design Thinking

Avant de coder, comprendre le contexte et choisir une direction esthétique BOLD:

  1. •Purpose: Quel problème résout cette interface? Qui l'utilise?
  2. •Tone: Choisir un extrême (brutally minimal, maximalist, retro-futuristic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial...)
  3. •Constraints: Framework, performance, accessibilité
  4. •Differentiation: Qu'est-ce qui rend ça INOUBLIABLE?

Implémentation

Produire du code (HTML/CSS/JS, React, Vue, etc.) qui est:

  • •Production-grade et fonctionnel
  • •Visuellement frappant et mémorable
  • •Cohésif avec un point de vue esthétique clair
  • •Méticuleusement raffiné dans chaque détail

Règle clé

Matcher la complexité d'implémentation à la vision esthétique:

  • •Maximalist → code élaboré, animations extensives
  • •Minimalist → retenue, précision, spacing/typo subtils

Référence

Voir references/aesthetics-guidelines.md pour les guidelines détaillées (typography, color, motion, anti-patterns).