Web Design Guidelines

What it does

This skill provides Cal.com's established web design system, ensuring consistent styling and layout across the platform. It enables AI agents to generate frontend code that aligns with the brand's visual identity and component library.

When to use it

• Building new booking pages or event scheduling interfaces for Cal.com clients.
• Creating custom components that must match existing site aesthetics perfectly.
• Developing documentation or marketing sites using the same design language.
• Ensuring responsive layouts adhere to the platform's mobile-first standards.

Key capabilities

• Access to a comprehensive component library for rapid UI development.
• Enforced consistency in typography, colors, and spacing throughout applications.
• Pre-built patterns specifically designed for scheduling and calendar interactions.
• Responsive design rules optimized for various screen sizes and devices.

Example prompts

• "Generate a responsive booking form using Cal.com's web design guidelines."
• "Create a landing page hero section that matches the Cal.com visual style."
• "Build a navigation bar component following the established frontend system."

Tips & gotchas

Ensure your AI agent has access to the latest version of the design system to avoid deprecated styles. Always test generated components across different browsers and devices, as responsive rules can behave differently depending on the viewport size.