styleguide

name

styleguide

description

Create a comprehensive design language and styleguide for any project — websites, apps, blogs, presentations, marketing pages. Given a project type, brand, and audience, produces aesthetic direction, font selections with pairings, color strategy, spacing philosophy, imagery style, and tone. Use when the user asks to "create a styleguide", "define the design language", "what fonts should I use", "choose a color palette for my project", "design direction for my website", "how should my app look", "visual identity", or "brand style". References design-system for technical implementation and media-plugin for asset generation.

Styleguide

Create a comprehensive design language for any project. This is the starting point for all design work — it defines the "why" behind every visual choice.

When to Use

• User wants to create or define a visual identity for a project
• User asks "what fonts/colors should I use?"
• User is starting a new website, app, or product and needs design direction
• User wants a coherent design language across multiple deliverables
• User asks for "brand style" or "design system" guidance (strategic, not technical)

When NOT to Use

• User wants to generate actual images → use media-plugin/image-generation
• User wants to search for stock photos → use media-plugin/image-sourcing
• User wants to audit WCAG contrast → use design-system

Styleguide Creation Workflow

Step 1: Project Discovery

Gather these inputs from the user (ask if not provided):

Input	Why It Matters	Example
Project type	Determines conventions and expectations	SaaS dashboard, portfolio, e-commerce, blog, landing page