design-system

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

44|9|Updated May 7, 2026
One-click install
npx skills add https://github.com/Omar-Obando/qwen-orchestrator --skill design-system-omar-obando
Or copy as Structured Prompt for Agent
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.