Design Knowledge
Guides
21 guides with design rules, token systems, semantic page composition, and AI workflows you can reuse directly.
Start Here
beginnerYour first steps with Webspire — from browsing patterns to composing a full page with AI. Start here.
Learn First
Semantics before styling
Start with pattern fit, page flow, and UX goals before choosing colors, type, or prompt phrasing.
Use Fast
Copy prompts, not just ideas
Prompt and token guides should give you something immediately reusable, not just theory.
Build Better
Tie every guide to patterns
Each guide should help you pick, compose, or refine actual Webspire patterns and snippets.
⬡ Getting Started & Semantics
Domains, Tones & UX Goals Reference
Complete reference of the semantic taxonomy with compatibility notes and typical combinations.
Getting Started & Semantics
Finding the Right Patterns
How to use domain, tone, and UX goals to find exactly the right Webspire patterns for your project — whether you search manually or let AI compose a page.
Getting Started & Semantics
Augmenting Existing Pages
How to use augment_page and the enhanced compose_page output to improve an existing site — not rebuild it from scratch.
Getting Started & Semantics
Composing Pages
How to structure a landing page — from the psychology of scroll flow to AI-powered semantic composition with the compose_page MCP tool.
Getting Started & Semantics
◫ Composition
Presentation Systems
Presentation-first design thinking mapped into Webspire patterns, snippets, and composition rules for story-first products.
Composition
Primitive And App Surfaces
A composition map for primitive UI, application surfaces, and system completeness without bloating the Webspire taxonomy.
Composition
⟡ AI Prompts & Workflows
AI Tool Comparison for Web Development
Which AI coding tool for which web design task — Claude Code, Codex, Cursor, ChatGPT, Windsurf compared.
AI Prompts & Workflows
CLAUDE.md Templates for Web Projects
Copy-paste CLAUDE.md project instructions that make AI coding assistants produce consistent, high-quality Tailwind websites.
AI Prompts & Workflows
Design Brief Template
Structured AI prompt template for generating consistent, high-quality website designs from a brief.
AI Prompts & Workflows
Using the Webspire MCP Offline
How the Webspire MCP handles offline scenarios, what data is available without a network connection, and how to ensure you have the latest patterns before going offline.
AI Prompts & Workflows
Component Generation Prompts
Proven prompts for generating Tailwind UI components with AI — from single cards to full page sections.
AI Prompts & Workflows
Claude Code Skills for Web Design
Ready-to-use Claude Code skill definitions for recurring design tasks — component scaffolding, audits, token generation.
AI Prompts & Workflows
Design Review & Audit Prompts
AI prompts for reviewing existing code — accessibility audits, design consistency checks, and performance reviews.
AI Prompts & Workflows
Style Transfer Prompts
AI prompts to apply a specific design style to existing HTML — adapt look-and-feel without rebuilding structure.
AI Prompts & Workflows
◈ Design Systems
Apple HIG Principles
Core design principles from Apple Human Interface Guidelines, adapted for Tailwind web projects.
Design Systems
Material Design Principles
Google Material Design 3 rules adapted for Tailwind — dynamic color, shape, and elevation system.
Design Systems
◐ Color & Contrast
Color Harmony Rules
OKLCH-based color harmony strategies for consistent, accessible palettes in light and dark mode.
Color & Contrast
Dark Mode Strategy
Systematic approach to dark mode with OKLCH, semantic tokens, and accessibility-first contrast rules.
Color & Contrast