Enforce Webflow-style design constraints for dark mode, Inter font, and 4px grid.
npx skills add https://github.com/ihlamury/design-skills --skill webflow-ui-skills
Please help me install this Agent Skill. Skill: webflow-ui-skills Source: https://github.com/ihlamury/design-skills/tree/main/skills/webflow Command: npx skills add https://github.com/ihlamury/design-skills --skill webflow-ui-skills
This Skill provides opinionated constraints for building interfaces that are visually consistent with Webflow's design system, ensuring a familiar and polished user experience.
Use the webflow-ui-skills to apply a dark mode theme with Inter font and 4px grid spacing to the new dashboard component.
High-intent search queries and answers about installing and using this skill.
To build a dark mode UI with consistent spacing and typography, apply a predefined design system using the Inter font family, a strict 4px grid for spacing, and specific dark background color palettes with accessible text contrast.
A 4px grid system is a layout framework that enforces uniform spacing and element sizing by basing all dimensions on multiples of four. It works by standardizing padding, margins, and component heights for consistent UI development.
Yes, you can match Webflow's design system for your dashboard by applying these opinionated constraints, which enforce specific border-radius values, typography scales, and interactive element states that replicate the familiar Webflow aesthetic.
The best way to ensure accessibility in a dark themed interface is to adhere to established accessibility standards for text contrast and interactive element states, using specific accent colors against enforced dark backgrounds to maintain readability.
No, you do not need to install any external dependencies to apply these rules. The Skill provides the design constraints directly, allowing you to implement the Inter font, dark mode palettes, and 4px grid spacing without additional packages.
You should not use a 4px grid if your project requires a different spacing scale or a light mode aesthetic. This approach is specifically opinionated for dark-themed sections matching Webflow's visual style and may not fit all design systems.
ihlamuryEnforce Descript UI design constraints for dark mode, Inter font, and 4px grid.
ihlamuryEnforce Ashby-inspired UI design constraints with dark mode, Inter font, and a 4px grid.
ihlamuryEnforce Robinhood's UI design system constraints for dark mode interfaces with Inter font and a 4px grid.
mahg-esDesign CSS theme systems with design tokens, color palettes, and typography scales.
