Build responsive greybox layouts from DESIGN.md and PAGES.md inputs.
npx skills add https://github.com/Firzus/agent-skills --skill greyboxing
Please help me install this Agent Skill. Skill: greyboxing Source: https://github.com/Firzus/agent-skills/tree/main/skills/web/greyboxing Command: npx skills add https://github.com/Firzus/agent-skills --skill greyboxing
This Skill helps you build the structural, visual, and motion shell of a website before final content exists, so the product can be reviewed, iterated, and validated earlier.
Use the greyboxing skill to build the page structure and motion for the next page in PAGES.md from DESIGN.md.
High-intent search queries and answers about installing and using this skill.
Responsive page layouts can be built using greyboxing to create structural and visual placeholder shells from your design system. This allows your team to review and validate the product earlier by separating layout planning from content creation.
Greyboxing in UI prototyping is the process of constructing placeholder page shells from an existing design system. It establishes shared chrome, responsive structures, and motion planning before real content is added to the site.
Yes, greyboxing requires DESIGN.md and PAGES.md inputs to generate responsive layouts. These documents provide the existing design system and page plan needed to build consistent header, footer, and navigation structures across the site.
Motion design and state coverage are planned during the greyboxing phase by defining signature elements and motion theses. The process outlines reachable loading, empty, and error states for stakeholder review before final implementation.
Yes, placeholder layouts and shared chrome can be validated using optional prototype and browser support. This validation ensures centralized consistency and state coverage across all generated pages before real content is added.
The best way to turn a design system into working page shells is applying page-level review discipline through greyboxing. It transforms your design system inputs into a complete set of responsive placeholder pages ready for stakeholder iteration.
FirzusStructure site frontend design into phased workflows with DESIGN.md and PAGES.md artifacts.
easingthemesCompare HTML/CSS prototypes against Figma reference screenshots and generate verification reports.
hwatkinsCoordinate CSS, LiveView JS, and Svelte transitions with shared timing tokens.
zmsqnfl-commitsGenerate premium UI design specifications for typography, spacing, shadows, and motion.
