Notre avis
Génère un maquette visuelle statique d'un écran d'application en HTML/CSS à partir d'un fichier DESIGN.md, respectant une charte graphique et un format mobile-first.
Points forts
- Production rapide de maquettes HTML autonomes et visuellement cohérentes
- Respect strict des tokens de design (couleurs, espacements, composants) définis dans DESIGN.md
- Affichage optimisé pour mobile avec une largeur max de 32rem et fond sombre
- Utilisation de contenu réaliste plutôt que de lorem ipsum
Limites
- Maquette purement statique, sans interactions ni données dynamiques
- Nécessite un fichier DESIGN.md préexistant avec les tokens
- Peut ne pas couvrir tous les composants avancés si le design n'est pas détaillé
Pour visualiser rapidement un écran d'application en respectant une charte existante, par exemple lors de la conception itérative ou d'une revue de design.
Lorsque vous avez besoin d'une maquette interactive ou fonctionnelle avec des données réelles, ou si aucun DESIGN.md n'est disponible.
Analyse de sécurité
SûrThe skill generates a static HTML mockup using predefined design tokens, with no system commands, data exfiltration, or dangerous operations. It only uses internal tools for reading files and publishing an artifact.
Aucun point d'attention détecté
Exemples
/mockup-app-skill Create a visual mockup of the Home screen of a mobile fitness app./mockup-app-skill Generate a mockup of the Profile screen using the design tokens from the project's DESIGN.md./mockup-app-skill Produce a mobile mockup of a login screen with email and password fields./mockup-app-skill
Generate a quick visual mockup of an app screen for: $ARGUMENTS
- Read
DESIGN.mdfirst — use its tokens, components, and patterns exactly (colors, spacing, buttons, cards, empty states, page header/shell). Never invent new colors or fall back to generic Tailwind defaults. - Render the mockup as a single self-contained HTML file (inline CSS using the
victory-*hex values fromDESIGN.md) and publish it with the Artifact tool so it's viewable in the browser. - It's a static visual mockup, not a working page — no real data fetching or routing. Use realistic placeholder content instead of lorem ipsum.
- Match the mobile-first frame:
max-width: 32remcentered, darkvictory-bgbackground, bottom nav bar if the screen is a primary tab (Home/Train/Feed/Profile/etc).
Output: one Artifact link. Don't dump the markup in chat.
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.