Web Design Guidelines

What it does

This skill provides AI agents with a structured framework to generate web design guidelines, ensuring consistent visual identity and layout standards across projects. It translates abstract design concepts into actionable rules for developers and designers to follow during implementation.

When to use it

• Establishing a new brand's visual language before starting a website build.
• Creating style guides that enforce consistency across multiple pages or applications.
• Defining constraints for AI agents to generate code that adheres to specific aesthetic requirements.
• Standardizing UI components and interaction patterns for team collaboration.

Key capabilities

• Generates comprehensive web design documentation based on provided inputs.
• Defines color palettes, typography hierarchies, and spacing systems.
• Outlines layout principles and responsive behavior expectations.
• Produces clear, actionable rules for maintaining visual coherence.

Example prompts

• "Create a web design guideline document for a minimalist fintech startup using blue and white tones."
• "Generate a style guide that enforces strict grid alignment and accessible contrast ratios for an e-commerce site."
• "Outline the visual design rules for a mobile-first news application with a dark mode preference."

Tips & gotchas

Ensure you provide specific brand assets or aesthetic preferences to get tailored results rather than generic templates. This skill focuses on guidelines; it does not generate actual code or visual mockups directly.