webflow-ui-skills

Implement Webflow design system constraints for color, typography, layout, and components.

Updated Apr 12, 2026
One-click install
npx skills add https://github.com/REVREBEL/Webflow-Metrics --skill webflow-ui-skills-revrebel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webflow-ui-skills
Source: https://github.com/REVREBEL/Webflow-Metrics/tree/main/.agents/skills/webflow-ui-skills
Command: npx skills add https://github.com/REVREBEL/Webflow-Metrics --skill webflow-ui-skills-revrebel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and constraints for building UI interfaces that mimic Webflow’s aesthetic, streamlining design consistency.

Core Features & Use Cases

  • Design System Constraints: Offers color palettes, typography, layout, and component guidelines for Webflow-style UIs.
  • Accessibility & Accessibility Checks: Ensures contrast ratios and semantic token usage meet accessibility standards.
  • Use Case: A designer wants to develop a dark-mode dashboard with Webflow-inspired aesthetics; this Skill guides color choice, typography, and component usage to ensure visual harmony.

Quick Start

Refer to the Webflow UI design specifications to create a dark mode interface with the specified color palette and typography styles.

Frequently Asked Questions about webflow-ui-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a Webflow-inspired UI with consistent accessibility standards?

To design a Webflow-inspired UI with consistent accessibility standards, apply specific design system constraints for color palettes, typography, layout, and components while enforcing contrast ratios and semantic token usage.

What are the best guidelines for building a dark mode dashboard in Webflow style?

The best guidelines for building a dark mode dashboard in Webflow style involve using predefined color palettes, typography styles, and component rules that ensure visual harmony and meet accessibility requirements.

Can I use Webflow UI design constraints to ensure semantic token usage?

Yes, you can use Webflow UI design constraints to ensure semantic token usage. The guidelines enforce accessibility checks that verify contrast ratios and semantic tokens meet required standards.

How do I apply Webflow typography and layout specifications to an interface design?

You apply Webflow typography and layout specifications by referencing provided design system constraints that dictate specific styles and component usage to maintain aesthetic consistency across the interface.

Does the Webflow design system approach work for maintaining visual harmony across components?

Yes, the Webflow design system approach works for maintaining visual harmony across components by offering strict guidelines on color choice, typography, and layout to ensure consistent design principles.