design-system

Enforce design-system standards for multi-page marketing websites with Astro and Cloudflare Pages.

44|9|Updated May 7, 2026

Search Tags:#design system #color palette #astro #typography scale #cloudflare pages #ui spacing #multi-page website

Ready to run

npx skills add https://github.com/Omar-Obando/qwen-orchestrator --skill design-system-omar-obando

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Omar-Obando/qwen-orchestrator/tree/main/skills/design-system
Command: npx skills add https://github.com/Omar-Obando/qwen-orchestrator --skill design-system-omar-obando

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent UI and weak marketing-site structure by enforcing a complete, production-ready design system across color, typography, spacing, navigation, and multi-page routing.

Core Features & Use Cases

Multi-page architecture guardrails: Ensures websites are built with required routes (Home, About, Services + per-service detail pages, Products/Portfolio + per-product detail pages, Contact) rather than a single landing page.
Professional visual standards: Applies a role-based color palette, typography scale, and an 8px-based spacing grid with clear minimum spacing rules.
Quality and compliance rules: Enforces zero-emoji policy, navigation limits (max 7 top-level items), and consistent header/footer structure suitable for SEO-heavy static sites.

Quick Start

Ask for a marketing website (for example, “Create a multi-page website for my agency with services and detailed service pages, and deploy it as a static site using Astro on Cloudflare Pages”).

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I enforce a consistent design system across a multi-page Astro website?▼

To enforce a consistent design system across a multi-page Astro website, apply strict constraints including a role-based color palette, typography scale, and an 8px-based spacing grid to maintain visual standards across all page routes.

What is the best way to structure a marketing website with services and portfolio pages?▼

The best way to structure a marketing website is by using a multi-page architecture that includes Home, About, Services with per-service detail pages, Products/Portfolio with per-item routes, and Contact pages to ensure unique SEO structure and consistent navigation.

Can I use Cloudflare Pages to deploy a static multi-page website with detailed service routes?▼

Yes, you can deploy a static multi-page website on Cloudflare Pages. The implementation guidance recommends Astro to generate per-item routes for services and products, ensuring a consistent header and footer structure suitable for SEO-heavy static sites.

What spacing and navigation rules are needed to prevent UI inconsistencies in web design?▼

To prevent UI inconsistencies, web design requires minimum section spacing rules based on an 8px grid, a zero-emoji policy, and navigation saturation limits allowing a maximum of seven top-level items.

Why does my marketing site need unique per-page SEO structure instead of a single landing page?▼

A marketing site needs unique per-page SEO structure instead of a single landing page because a multi-page architecture with dedicated routes for services and products improves search visibility and enforces consistent navigation across detailed content.