Ce Frontend Design
Skill Verifiziert AktivBuild web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Covers composition, typography, color, motion, and copy. Verifies results via screenshots before declaring done.
Build web interfaces with genuine design quality, avoiding generic AI output, for any frontend project whether new or existing.
Funktionen
- Builds high-quality web interfaces
- Detects and respects existing design systems
- Covers composition, typography, color, motion, and copy
- Verifies results via screenshots
- Provides structured workflow and guidance
Anwendungsfälle
- Creating landing pages, web apps, dashboards, or admin panels
- Developing new components or interactive experiences
- Modifying existing applications while maintaining design consistency
- Ensuring design quality and avoiding generic AI aesthetics
Nicht-Ziele
- Producing generic or low-quality AI-generated interfaces
- Ignoring existing design systems or user preferences
- Cluttering interfaces with unnecessary elements or decorative gradients
- Leaking prompt language or AI commentary into the UI
Practical Utility
- info:Usage examplesWhile the SKILL.md provides workflow and module examples, it lacks concrete, ready-to-run end-to-end examples for specific capabilities.
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add EveryInc/compound-engineering-plugin/plugin install compound-engineering@compound-engineering-pluginQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Impeccable
99Verwenden Sie dies, wenn der Benutzer ein Frontend-Interface entwerfen, neu gestalten, formen, kritisieren, prüfen, polieren, klären, destillieren, härten, optimieren, anpassen, animieren, einfärben, extrahieren oder anderweitig verbessern möchte. Deckt Websites, Landingpages, Dashboards, Produkt-UI, App-Shells, Komponenten, Formulare, Einstellungen, Onboarding und leere Zustände ab. Umfasst UX-Bewertung, visuelle Hierarchie, Informationsarchitektur, kognitive Last, Barrierefreiheit, Leistung, responsives Verhalten, Theming, Anti-Patterns, Typografie, Schriften, Abstände, Layout, Ausrichtung, Farbe, Bewegung, Mikrointeraktionen, UX-Texte, Fehlerzustände, Randfälle, i18n und wiederverwendbare Designsysteme oder Tokens. Verwenden Sie es auch für langweilige Designs, die mutiger oder ansprechender werden sollen, laute Designs, die leiser werden sollen, Live-Browser-Iterationen an UI-Elementen oder ambitionierte visuelle Effekte, die technisch außergewöhnlich wirken sollen. Nicht für reine Backend- oder Nicht-UI-Aufgaben.
Design Audit
100Full project design audit that orchestrates all agents, scores across 12 dimensions, generates prioritized action plan
Macos Design
100Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system