Analyze visual design layouts for grid system presence and effectiveness.
npx skills add https://github.com/PeterSalvato/formwork --skill muller-brockmann
Please help me install this Agent Skill. Skill: muller-brockmann Source: https://github.com/PeterSalvato/formwork/tree/main/skills/lenses/muller-brockmann Command: npx skills add https://github.com/PeterSalvato/formwork --skill muller-brockmann
This Skill helps identify the presence and effectiveness of grid systems in visual designs, ensuring clarity and order in layout.
Run the /muller-brockmann command followed by the screenshot file name to evaluate the grid system.
High-intent search queries and answers about installing and using this skill.
To evaluate a visual design grid system, you analyze layout screenshots and reference documents to check the visibility of grids, alignment to baselines, handling of complex content, and proportionality of element relationships.
An effective grid system handles complex content by maintaining a consistent baseline alignment and ensuring mathematical order and proportionality in the relationships between visual elements.
You check baseline grid alignment by analyzing your layout screenshots to verify that elements consistently follow a baseline and handle complex content gracefully without breaking visual order.
Yes, you can analyze mathematical order in a website layout by examining the relationships between design elements to determine if they are proportional and mathematically ordered.
For layout analysis and grid evaluation, you need to provide screenshot files of the visual design and any relevant reference documents to accurately assess the grid system's effectiveness.
Grid evaluation may not be suitable when you lack screenshot files or reference documents of the design, as these are required inputs to accurately analyze grid visibility and baseline alignment.
xoaiExtract colors, typography, spacing, and component patterns from web page screenshots.
vuminhieuAudit UI code against Web Interface Guidelines and report file:line findings.
soloamenteDesign Swiss-style UI/UX interfaces with typographic hierarchy and grid-driven layouts.
HDeiblerDesign and evaluate alignment grid systems with columns, gutters, margins, and responsive breakpoints.
