Notre avis
Génère une maquette visuelle statique d'un écran d'application à partir d'un fichier DESIGN.md, en respectant strictement les tokens de design et en produisant un fichier HTML autonome avec l'outil Artifact.
Points forts
- Respecte exactement les couleurs, espacements et composants définis dans DESIGN.md
- Produit un fichier HTML visuel prêt à être affiché dans le navigateur
- Utilise un contenu réaliste plutôt que du lorem ipsum pour un rendu plus convaincant
- Adapte la maquette au format mobile-first avec barre de navigation basse
Limites
- Ne génère pas de logique interactive ou de routage fonctionnel
- Nécessite un fichier DESIGN.md préexistant avec les tokens de design
- Ne fonctionne que pour des écrans uniques, pas des parcours utilisateur
Quand vous voulez rapidement visualiser un écran d'application en respectant une charte graphique existante sans coder une application complète.
Quand vous avez besoin d'une maquette interactive ou d'une démonstration fonctionnelle avec des appels API.
Analyse de sécurité
SûrThe skill only generates a static HTML mockup. No destructive or risky operations are performed. It reads a design file and produces an artifact.
Aucun point d'attention détecté
Exemples
Generate a visual mockup of the home screen for a fitness tracking app. Use the tokens from DESIGN.md. The screen should show a daily summary, recent workouts, and a bottom navigation bar with Home, Train, Feed, Profile.Create an app mockup for a product detail page of an e-commerce app. Follow the DESIGN.md tokens. Include product image, title, price, size selector, and add-to-cart button. Mobile-first.Make a static mockup of the settings screen for a social media app. Use the design tokens from DESIGN.md. Show a list of settings categories with toggle switches and arrow indicators./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.