skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-webflow

Apply Webflow's design system tokens, typography, and components when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#color palette#design tokens#webflow#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-webflow-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-webflow
Source: https://github.com/deepparser/skills/tree/main/design-webflow
Command: npx skills add https://github.com/deepparser/skills --skill design-webflow-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Webflow's visual identity requires exact color values, typography specs, and component rules that are hard to recall from memory. This Skill provides the complete Webflow design system so generated UI stays brand-accurate. ## Core Features & Use Cases - Exact Design Tokens: Provides Webflow's color palette (Webflow Blue #146ef5, secondary purple/pink/green/orange/yellow/red), typography scale (WF Visual Sans Variable, weights 500-600), spacing, radius, and 5-layer shadow stacks. - Component Styling Rules: Defines buttons with translate(6px) hover, cards with 1px #d8d8d8 borders, badges, and form states including focus and error styles. - Visual Reference Previews: Bundled light and dark theme HTML previews let you verify exact CSS values and component structure. - Use Case: When asked to build a landing page styled like Webflow, apply the 80px display hero, blue primary CTA, 4px border radius, and uppercase micro labels directly from the spec. ## Quick Start Build a landing page for my SaaS product using the Webflow design system with its blue CTA buttons and sharp card styling.

Frequently Asked Questions about design-webflow

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

FAQPage Schema
How do I make a UI look like Webflow's website?▼

Use Webflow's design tokens: Webflow Blue #146ef5 for CTAs, near-black #080808 text on white, WF Visual Sans Variable at weights 500-600, and conservative 4px-8px border radius. Add translate(6px) hover animations on buttons and 5-layer cascading shadows for depth.

What colors does the Webflow design system use?▼

The primary palette is near-black #080808 and Webflow Blue #146ef5 with variants #3b89ff and #006acc. Secondary accents include purple #7a3dff, pink #ed52cb, green #00d722, orange #ff6b00, yellow #ffae13, and red #ee1d36, plus neutral grays from #222222 to #d8d8d8.

Does this design system support dark mode?▼

Yes, the Skill includes a dark theme HTML preview alongside the light theme preview. The dark version inverts the canvas to near-black backgrounds with light text while keeping the Webflow Blue accent and secondary palette intact.

What border radius should Webflow-style components use?▼

Webflow uses conservative, sharp radius values of 2px, 4px, and 8px, with 50% reserved for circular elements. Avoid rounding functional elements beyond 8px, as the system favors crisp edges over soft rounded corners.

When should I not use the Webflow design system?▼

Avoid it when the target brand has its own established identity, since applying Webflow's blue and typography would conflict. It is also unsuited for designs requiring heavily rounded, playful aesthetics, as Webflow's system is deliberately sharp and precise.

Related Skills

Explore More Design & Creative Skills→
Kael-DeanKael-Dean

frontend-design

Design production-grade frontend interfaces with cohesive design systems and polished code.

Community
Advanced
nimadorostkarnimadorostkar
25

visual-qa

Automate visual regression testing and responsive layout verification with Playwright.

Community
Advanced
AI-Staffing-Solution-Consultants-LLCAI-Staffing-Solution-Consultants-LLC

agency-ui-designer

Creates design systems, component libraries, and accessible interface specifications with CSS design tokens.

Official
Intermediate
timchaptimchap

popular-web-designs

Generates HTML/CSS pages styled after 54 real brand design systems.

Community
Intermediate