---

name: web-designer description: > Design system knowledge base for award-winning web design generation. Contains universal component definitions, layout techniques, design principles, CSS variable specifications, and structured markup rules. Support skill — not user-invocable. user-invocable: false

Web Designer Knowledge Base

This skill provides the design reference data used by the web-designer agent. It contains everything needed to generate distinctive, award-worthy website designs for any type of project.

Reference Files

references/design-definitions.md

When to read: During research phase and before mockup generation.

A universal design toolkit — not organized by category. Contains:

• Components — all available UI components (buttons, cards, stat cards, pricing toggles, message bubbles, etc.) in a single pool. Any component can be used in any design.
• Page sections — building blocks for page structure (navigation styles, hero types, content areas, social proof, CTAs, footers). Pick what serves the design.
• Layout techniques — spatial approaches (bento, masonry, editorial, asymmetric), typography-driven design, rhythm and whitespace, visual depth.
• Design principles — composition, color, and typography guidelines.

How to read: Read the full file for the component and layout vocabulary. Components and sections are universal — mix and match freely based on what the project needs.

references/design-techniques.md

When to read: During research phase for design thinking inspiration.

Principles and techniques for creating distinctive designs:

• Visual storytelling and narrative pacing
• Spatial composition and grid-breaking
• Typography as a design element
• Color psychology and palette strategies
• Layout archetypes and when to use them
• Navigation craft
• Component composition and anti-patterns
• Awwwards judging criteria breakdown

How to read: Read for design thinking principles. This teaches HOW to approach design, not what to copy. Real site examples come from live Playwright screenshots during the research phase, not this file.

references/css-variables-spec.md

When to read: Before theme generation (Phase 3).

Contains the complete CSS variable specification:

• Primary color scale (50-900) — brand/action color
• Secondary color scale (50-900) — complementary color for visual richness
• Accent scale (5 values: 100-900) — bold pop color for highlights
• Neutral color scale (50-900)
• Surface colors (background, surface, surface-elevated, border)
• Semantic colors (success, warning, error, info + backgrounds) — flexible, not hardcoded
• Typography colors (heading, body, muted, link, on-primary, on-secondary, on-accent)
• Spacing scale (space-1 through space-12)
• Effects (radius, shadow)
• Complete 3-color example :root block

references/structured-markup-rules.md

When to read: Before mockup generation (Phase 5).

Contains HTML markup conventions for extractable, structured mockups:

• data-section, data-component, data-variant attribute usage
• oc-* CSS class naming (BEM-like)
• CSS organization with /* === COMPONENT: {id} === */ markers
• Section manifest comment format
• Complete annotated HTML example

assets/theme-template.html

When to read: During theme generation (Phase 3).

Base HTML template for theme preview. Contains:

• <!-- INJECT_CSS --> placeholder for generated CSS
• Static typography defaults (sizes, weights, line heights)
• Preview sections: primary, secondary, accent, and neutral color scales, typography, surfaces, semantic colors, buttons (primary/secondary/accent/outline/neutral variants), cards (default/primary-tint/secondary-tint/accent-highlight)
• All elements reference CSS variables — inject a :root block to see the theme

Design Research

Real-world site inspiration comes from live visual research during the agent's research phase (Phase 2), not from static reference files. The agent uses Playwright to screenshot real websites:

• Awwwards listing/tag pages to discover interesting sites
• CSS Design Awards, Godly, Dribbble, Behance, or any relevant source
• 3-5 individual reference sites for detailed visual analysis

The agent is multimodal — it reads the screenshots to identify layout approaches, typography, color, and spatial rhythm. This ensures every design session draws from current, award-winning work rather than a fixed set of memorized examples.