Claude Craft
Design

Design Review Component

Review UI design at single file, folder, page, or full codebase level using fontofweb for professional design inspiration and context7 for stack understanding

Single file

Prompt FR
J'aimerais revoir le design du composant @src/components/landing/CategoriesSection.tsx. Utilise le serveur MCP fontofweb pour rechercher des designs inspirants de qualité professionnelle (search_design_inspiration, get_pin_details, get_layout_data, export_domain_tokens), et context7 pour approfondir ta compréhension de la stack technique utilisée.
Prompt EN
I would like to review the design of the component @src/components/landing/CategoriesSection.tsx. Use the MCP server fontofweb to search for high-quality professional design inspiration (search_design_inspiration, get_pin_details, get_layout_data, export_domain_tokens), and context7 to deepen your understanding of the technical stack used.

Folder

Prompt FR
J'aimerais revoir le design de tous les composants du dossier @src/components/landing/. Explore chaque fichier du dossier, puis analyse le design de chaque composant individuellement et leur cohérence d'ensemble (espacement, typographie, couleurs, hiérarchie visuelle, responsive). Utilise le serveur MCP fontofweb pour rechercher des designs inspirants de qualité professionnelle (search_design_inspiration, get_pin_details, get_layout_data, export_domain_tokens) et identifier les tendances UX/UI pertinentes. Utilise context7 pour approfondir ta compréhension de la stack technique utilisée. Propose des améliorations concrètes pour chaque composant et pour la cohérence globale du dossier.
Prompt EN
I would like to review the design of all components in the @src/components/landing/ folder. Explore each file in the folder, then analyze the design of each component individually and their overall consistency (spacing, typography, colors, visual hierarchy, responsive). Use the MCP server fontofweb to search for high-quality professional design inspiration (search_design_inspiration, get_pin_details, get_layout_data, export_domain_tokens) and identify relevant UX/UI trends. Use context7 to deepen your understanding of the technical stack used. Propose concrete improvements for each component and for the overall consistency of the folder.

Page

Prompt FR
J'aimerais revoir le design de la page @src/app/(home)/page.tsx et de tous les composants qu'elle utilise. Explore la page et remonte l'arbre de ses composants pour tous les identifier et les lire. Analyse le design de la page dans sa globalité : parcours visuel, hiérarchie de l'information, espacement, typographie, couleurs, call-to-actions, responsive, et transitions entre les sections. Utilise le serveur MCP fontofweb pour rechercher des designs de pages inspirants de qualité professionnelle (search_design_inspiration, get_pin_details, get_layout_data, export_domain_tokens) et comparer avec les meilleures pratiques UX/UI actuelles. Utilise context7 pour approfondir ta compréhension de la stack technique utilisée. Propose des améliorations concrètes section par section et pour le flux global de la page.
Prompt EN
I would like to review the design of the page @src/app/(home)/page.tsx and all the components it uses. Explore the page and walk up its component tree to identify and read all of them. Analyze the page design as a whole: visual flow, information hierarchy, spacing, typography, colors, call-to-actions, responsive, and transitions between sections. Use the MCP server fontofweb to search for high-quality professional page design inspiration (search_design_inspiration, get_pin_details, get_layout_data, export_domain_tokens) and compare with current UX/UI best practices. Use context7 to deepen your understanding of the technical stack used. Propose concrete improvements section by section and for the overall page flow.

Full codebase

Prompt FR
J'aimerais un audit design complet de mon codebase. Explore l'ensemble des pages, layouts, et composants partagés du projet. Pour chaque page et composant, analyse le design : parcours visuel, hiérarchie de l'information, espacement, typographie, couleurs, responsive, accessibilité, et cohérence du design system (tokens, espacements récurrents, palette). Utilise le serveur MCP fontofweb pour rechercher des designs inspirants de qualité professionnelle (search_design_inspiration, get_pin_details, get_layout_data, export_domain_tokens) et benchmarker le design actuel par rapport aux standards du marché. Utilise context7 pour approfondir ta compréhension de la stack technique utilisée. Produis un rapport structuré avec : (1) un état des lieux du design actuel, (2) les incohérences et points faibles identifiés, (3) des recommandations concrètes priorisées par impact, et (4) les références d'inspiration fontofweb pour chaque recommandation.
Prompt EN
I would like a complete design audit of my codebase. Explore all pages, layouts, and shared components in the project. For each page and component, analyze the design: visual flow, information hierarchy, spacing, typography, colors, responsive, accessibility, and design system consistency (tokens, recurring spacing, palette). Use the MCP server fontofweb to search for high-quality professional design inspiration (search_design_inspiration, get_pin_details, get_layout_data, export_domain_tokens) and benchmark the current design against market standards. Use context7 to deepen your understanding of the technical stack used. Produce a structured report with: (1) an overview of the current design state, (2) identified inconsistencies and weaknesses, (3) concrete recommendations prioritized by impact, and (4) fontofweb inspiration references for each recommendation.

On this page