skills.rest
yuussn-stack
yuussn-stackCOMMUNITY
Explore all skills by this author →
GitHub

design-work

Provide design and styling guidelines for Wix Vibe websites.

Updated Aug 23, 2026
Search Tags:#typography#accessibility#responsive design#website design#layout patterns#Wix Vibe#color usage
One-click install
npx skills add https://github.com/yuussn-stack/SoffittoMD_042026Claaude --skill design-work-yuussn-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-work
Source: https://github.com/yuussn-stack/SoffittoMD_042026Claaude/tree/main/.emdash/skills/design-work
Command: npx skills add https://github.com/yuussn-stack/SoffittoMD_042026Claaude --skill design-work-yuussn-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of design and styling guidelines to help streamline the process of creating beautiful, production-grade Wix Vibe websites.

Core Features & Use Cases

  • Design Guidelines: Offers detailed guidelines for layout, typography, color usage, and responsive design.
  • Layout Patterns: Provides patterns for content containers, responsive grids, and flexbox patterns.
  • Section Variation: Encourages variation in consecutive sections to avoid monotony.
  • Hero Sections: Offers requirements and patterns for creating impactful hero sections.
  • Typography: Defines font classes and responsive typography rules.
  • Buttons: Provides consistency rules and contrast verification guidelines.
  • Header & Footer: Offers patterns for creating headers and footers.
  • Navigation & Scroll Control: Guidelines for smooth scrolling and anchor links.
  • Animations: Instructions for using Framer Motion for animations.
  • Color Usage: Defines rules for color usage and common color tokens.
  • Responsive Design: Lists breakpoints and responsive patterns.
  • Accessibility: Provides guidelines for color contrast and semantic HTML.
  • CSS Guidelines: Offers rules for border radius and padding.
  • Prohibited Designs: Lists prohibited design elements.
  • Dynamic Compositions: Encourages exploration of right-aligned, centered, and asymmetrical layouts.
  • Media & Galleries: Offers principles and patterns for media usage.

Quick Start

Start by reviewing the core philosophy and layout patterns in the design-work skill to establish a strong foundation for your Wix Vibe website design.

Frequently Asked Questions about design-work

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

FAQPage Schema
What are the responsive design breakpoints and layout patterns for Wix Vibe websites?▼

Wix Vibe website design provides predefined breakpoints, responsive grids, and flexbox patterns for content containers. These layout mechanisms ensure your website structure adapts seamlessly across different screen sizes without breaking.

How do I ensure typography and color contrast meet accessibility compliance in website design?▼

To ensure accessibility compliance, apply the provided font classes, responsive typography rules, and color contrast verification guidelines. Using semantic HTML alongside defined color tokens ensures your website meets accessibility standards.

What is the best way to structure hero sections and headers for a production-grade website?▼

The best way to structure hero sections and headers is by following the provided hero section requirements and header patterns. These guidelines help you create impactful landing areas and consistent navigation structures suitable for production-grade websites.

Can I use Framer Motion for animations on Wix Vibe websites?▼

Yes, you can use Framer Motion for animations on Wix Vibe websites. The design guidelines include specific instructions for implementing Framer Motion animations alongside rules for smooth scrolling and anchor link navigation control.

Are there prohibited design elements or layout restrictions I should avoid?▼

Yes, there are explicitly prohibited design elements listed in the guidelines to prevent poor design choices. Additionally, the guidelines encourage dynamic compositions like asymmetrical layouts while avoiding monotony by varying consecutive content sections.

How do I manage media and galleries without breaking responsive layouts?▼

To manage media and galleries without breaking responsive layouts, apply the provided media usage principles and gallery patterns. These rules work in conjunction with the responsive grid system and CSS guidelines for border radius and padding.

Related Skills

Explore More Design & Creative Skills→
cdrgurucdrguru
1

gemini-cli-init

Initialize Gemini CLI configuration and auditor persona for the PACK workflow.

Community
Intermediate
AmirNikFinanceAmirNikFinance

design-work

Standardize Wix Vibe design guidelines for consistent visuals across pages.

Community
Advanced
AytsuuAytsuu

seo

Audit websites for technical SEO, on-page optimization, and structured data.

Community
Advanced
vijethkumarmpvijethkumarmp

design-work

Codify Wix Vibe design guidelines for typography, color, spacing, and components.

Community
Advanced