Communitygithub.com

Omar-Obando/qwen-orchestrator

专业设计系统，包含调色板规则、排版、间距、多页面架构、服务/产品详情页、导航限制、无表情符号策略、章节间距及部署指南（Astro + Cloudflare）。强制使用多页面网站结构，包含独立的服务/产品页面。

qwen-orchestrator 是什么？

这是一个强制实施专业设计标准的技能，适用于构建企业级网站。它要求使用多页面架构（Home、About、Services、Contact等），其中每个服务和产品都必须拥有独立的详情页，严禁使用单页面滚动式网站。技能严格执行无表情符号策略，所有图标必须使用SVG图标库（如Lucide、Heroicons）。该技能还规定了严格的章节间距，并提供了一个陷阱清单，以确保视觉上不过于拥挤。在技术栈方面，它推荐使用Astro（搭配Tailwind CSS）进行静态站点构建，并部署到Cloudflare Pages，同时详细解释了Astro相对于Next.js在营销网站方面的优势。整体而言，它是一套完整的规则、架构模板和部署工作流，旨在以零或最小化JavaScript的方式生成高质量、SEO友好且视觉规范的网站。

兼容平台~Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add https://github.com/Omar-Obando/qwen-orchestrator/tree/HEAD/skills/design-system
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

设计系统技能 — 专业UI/UX，间距与多页面架构

该技能强制实施专业设计标准：正确的调色板、排版、章节间距、导航限制、详细的服务/产品页面、零表情符号以及多页面网站架构。推荐技术栈：Astro用于静态/内容站点，部署到Cloudflare Pages。

⚠️ 强制要求：多页面网站规则

当用户要求建立网站时，切勿只创建一个单页面。

当用户请求一个网站（例如：“营销代理网站”、“餐厅网站”、“公司网站”）时，您必须创建一个完整的、至少包含以下页面的多页面网站：

标准网站页面（强制）

页面用途优先级
首页Hero区域、价值主张、关键部分、行动号召按钮必须
关于我们公司故事、团队、使命、价值观必须
服务服务列表面页，包含指向详情页的链接必须
服务详情每个服务的独立页面（例如：/services/web-design）必须
联系我们联系表单、地图、电话、邮箱、工作时间必须
产品/作品集产品列表面页，包含指向详情页的链接必须

服务页面 — 详尽的（非通用）

每个服务必须有自己独立的专用页面。 服务列表面页展示卡片/摘要，这些卡片/摘要链接到各自的详情页。

❌ 禁止：
- /services 页面列出了所有服务，但没有独立的详情页
- 一个通用的 /services 页面，只有简短描述
- 服务只有2-3行文字描述
- 每个服务没有定价、流程或交付物

✅ 必需结构：
/services              → 列表面页（卡片包含图片+标题+摘要+行动号召按钮）
/services/web-design   → 详情页（描述、流程、交付物、定价、常见问题、行动号召按钮）
/services/seo          → 详情页（描述、流程、交付物、定价、常见问题、行动号召按钮）
/services/social-media → 详情页（描述、流程、交付物、定价、常见问题、行动号召按钮）

每个服务详情页必须包含：

  • 描述：3-5段文字解释该服务
  • 流程：分步说明（1. 发现 → 2. 设计 → 3. 开发 → 4. 上线）
  • 交付物：客户将收到什么
  • 定价层级 或“起价XX元”（或是自定义报价的行动号召按钮）
  • 常见问题部分：3-5个常见问题
  • 行动号召按钮：“获取报价”、“预约咨询”、“开始您的项目”
  • 客户评价或案例研究（如有）

产品页面 — 详尽的（非通用）

每个产品必须有自己独立的专用页面。 产品列表面页展示卡片，这些卡片链接到各自的详情页。

❌ 禁止：
- /products 页面只有一个简单的列表或网格，没有详情页
- 产品在一张卡片中描述，没有规格
- 每个产品没有定价、特性或图片

✅ 必需结构：
/products              → 列表面页（卡片包含图片+名称+价格摘要+行动号召按钮）
/products/product-a    → 详情页（图库、完整描述、规格、定价、评论、相关产品）
/products/product-b    → 详情页（图库、完整描述、规格、定价、评论、相关产品）

每个产品详情页必须包含：

  • 图片库：3-5张产品图片
  • 完整描述：特性、规格、材料
  • 定价：清晰的价格展示
  • 行动号召按钮：“加入购物车”、“请求报价”、“立即购买”
  • 相关产品部分
  • 评价/客户评价（如有）

其他页面（基于业务类型）

业务类型其他页面
代理机构作品集、案例研究、团队、流程、定价
餐厅菜单、预订、图库、厨师/故事、私人活动
电子商务商店、产品详情、购物车、结账、账户、心愿单
SaaS特性、定价、文档、博客、更新日志、状态
作品集项目、关于我、简历、客户评价、联系
房地产列表、房产详情、经纪人、社区、抵押贷款计算器
医疗保健服务、医生/团队、预约、患者门户、位置
教育项目、课程、教师、招生、校园生活、日历
法律业务领域、律师、客户评价、资源、免费咨询
非营利组织使命、项目、影响、参与、捐赠、活动

何时询问页面

使用 AskUserQuestion 来确认页面结构：

AskUserQuestion({
  questions: [
    {
      question: "网站应该包含哪些页面？",
      header: "页面",
      options: [
        { label: "完整站点", description: "首页 + 关于我们 + 服务 + 产品 + 联系我们（推荐）" },
        { label: "标准", description: "首页 + 关于我们 + 服务 + 联系我们" },
        { label: "扩展", description: "完整站点 + 博客 + 常见问题 + 作品集 + 定价" }
      ]
    }
  ]
})

反模式：单页面着陆页

❌ 禁止（当用户要求“一个网站”时）：
- 创建 index.html 作为唯一的页面
- 将所有内容放在一个可滚动的页面中
- 当它只是一个单独的HTML文件时，称之为“网站”
- 使用部分内容假装是页面（例如：#about, #services, #contact）

✅ 必需：
- 每个部分都有独立的路由/页面（例如：/about, /services, /contact）
- 每个页面都有其自己的布局、元标签和SEO优化
- 导航菜单链接所有页面
- 共享的页眉/页脚组件
- 所有页面一致的设计系统
- 每个服务和产品都有独立的详情页

唯一的例外：用户明确说“着陆页”或“单页网站”。

⚠️ 强制要求：零表情符号政策

专业的网站不使用表情符号。绝对不使用。

❌ 禁止：
- 🚀 🎯 💡 ✨ 🏆 📱 💻 🛒 📧 📞 ✅ ❌ 🔥 ⭐ 💪 🎨 📊 🔒 🌍 网站中的任何表情符号
- 将表情符号用作部分图标
- 在标题、按钮或行动号召按钮中使用表情符号
- 在导航标签中使用表情符号
- 在元标题或描述中使用表情符号

✅ 必需：
- 使用来自图标库的SVG图标（Lucide, Heroicons, Phosphor, Tabler）
- 使用CSS形状或装饰性元素来增加视觉趣味
- 使用正确的图标组件（<svg> 或图标字体）
- 所有标题、按钮和标签使用纯文本

图标库（选择一个，保持一致）：

库安装风格最适用于
Lucidenpm install lucide-react简洁、现代大多数网站
Heroiconsnpm install @heroicons/react粗体、清晰仪表盘、SaaS
Phosphornpm install @phosphor-icons/react灵活、6种权重多功能项目
Tablernpm install @tabler/icons-react轮廓式管理面板

⚠️ 强制要求：章节间距

各个部分绝不能相互接触。每个部分都需要呼吸空间。

最小间距规则

元素最小内边距（上/下）CSS 变量
页面部分var(--space-20) (80px)--section-padding
Hero区域var(--space-32) (128px)--hero-padding
页脚上内边距var(--space-32) (128px)--footer-padding
页眉高度var(--space-16) (64px)--header-height
内容块之间var(--space-12) (48px)--block-gap
行动号召部分var(--space-20) (80px)--cta-padding

章节间距CSS

:root {
  --section-padding: clamp(4rem, 8vw, 6rem); /* 64-96px */
  --hero-padding: clamp(6rem, 12vw, 10rem); /* 96-160px */
  --footer-padding: clamp(5rem, 10vw, 8rem); /* 80-128px */
  --header-height: 4rem; /* 64px */
  --block-gap: clamp(2rem, 4vw, 3rem); /* 32-48px */
}

section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.hero {
  padding-top: var(--hero-padding);
  padding-bottom: var(--hero-padding);
  min-height: 70vh;
}

footer {
  padding-top: var(--footer-padding);
  padding-bottom: var(--space-12);
  margin-top: 0; /* 永远不要折叠页脚间距 */
}

/* 交替的部分获得不同的背景 */
section:nth-of-type(even) {
  background-color: var(--color-surface);
}
section:nth-of-type(odd) {
  background-color: var(--color-bg);
}

间距反模式

❌ 禁止：
- 页脚直接接触上方的部分（没有间距）
- 部分的内边距 < 64px（感觉拥挤）
- Hero区域的内边距 < 96px（视觉冲击力弱）
- 对主要部分使用 margin: 0
- 所有部分使用相同的背景颜色（没有视觉区分）
- 移动端间距过紧（部分内边距 < 48px）

✅ 必需：
- 页脚始终具有充足的上内边距（128px+）
- 每个部分都有清晰的视觉区分（间距 + 交替背景）
- Hero区域至少占据70vh，并具有充足的内边距
- 移动端部分使用 clamp() 进行自适应间距
- 页脚前的行动号召部分有其独特的背景

⚠️ 强制要求：导航限制

导航菜单不能过于饱和。最多7个顶级项目。

导航规则

  1. 主导航栏最多7个项目
  2. 将相关页面分组到下拉菜单中
  3. 使用页脚导航放置次要链接（隐私政策、条款、站点地图）
  4. 移动端：带有可折叠部分的汉堡菜单
  5. 永远不要将所有页面放在主导航中

推荐的导航结构

主导航（最多5-7个项目）：
  首页 | 关于我们 | 服务 ▼ | 产品 | 作品集 | 联系我们 | 行动号召按钮

下拉菜单（服务）：
  服务概览
  ─────────────────
  网页设计
  SEO优化
  社交媒体
  品牌策略

页脚导航（次要链接）：
  隐私政策 | 服务条款 | 站点地图 | 常见问题 | 职业

导航反模式

❌ 禁止：
- 主导航栏中超过7个项目（杂乱、令人不知所措）
- 每个页面都在顶部导航中
- 没有为分组内容提供下拉/大菜单
- 汉堡菜单只是平铺列出所有链接
- 导航项目带有表情符号（例如：“🏠 首页” “📧 联系我们”）
- 只有文本的导航，没有视觉层次结构

✅ 必需：
- 最多7个顶级项目，额外的项目归入下拉菜单
- 主要的行动号召按钮（与导航链接不同的颜色/样式）
- 页脚包含次要链接（法律、额外内容）
- 移动端：带有分组部分的汉堡菜单
- 当前页面链接的激活状态
- 所有导航项目上的悬停状态

⚠️ 强制要求：推荐框架 — Astro

对于静态网站、营销网站和内容密集型网站，推荐使用Astro。

为什么营销网站选择Astro而非Next.js

因素AstroNext.js
默认输出零JavaScript（仅HTML）需要React运行时
性能近乎完美的Lighthouse分数良好，但需要优化
内容焦点为内容网站而构建为Web应用而构建
打包体积默认0KB JavaScript~80KB+ React运行时
学习曲线简单（HTML + 组件）中等（React + SSR概念）
多框架在孤岛中使用React/Vue/Svelte仅React
SEO完美（静态HTML）良好（需要配置）
托管Cloudflare Pages, Vercel, NetlifyVercel（优化），其他

何时推荐什么

项目类型推荐框架
营销/代理网站Astro + Tailwind
餐厅/本地企业Astro + Tailwind
作品集/简历Astro + Tailwind
博客/内容网站Astro + Tailwind
着陆页Astro 或 HTML/Tailwind
SaaS Web应用Next.js + React
电子商务Next.js + React
仪表盘/管理后台React + Vite
移动应用Flutter 或 React Native

Astro项目设置

npm create astro@latest my-site
cd my-site
npx astro add tailwind

Astro页面结构

src/
├── pages/
│   ├── index.astro          # 首页
│   ├── about.astro          # 关于我们
│   ├── services/
│   │   ├── index.astro      # 服务列表
│   │   ├── web-design.astro # 服务详情
│   │   ├── seo.astro        # 服务详情
│   │   └── social-media.astro
│   ├── products/
│   │   ├── index.astro      # 产品列表
│   │   └── [slug].astro     # 动态产品详情
│   ├── contact.astro
│   ├── blog/
│   │   ├── index.astro      # 博客列表
│   │   └── [slug].astro     # 博客文章
│   └── 404.astro
├── layouts/
│   └── BaseLayout.astro     # 共享的HTML外壳
├── components/
│   ├── Header.astro
│   ├── Footer.astro
│   ├── ServiceCard.astro
│   ├── ProductCard.astro
│   └── SEO.astro            # 可复用的meta/JSON-LD
└── styles/
    └── global.css           # 设计令牌

⚠️ 强制要求：Cloudflare Pages部署

对于静态/Astro站点，部署到Cloudflare Pages（免费、快速、全球CDN）。

部署设置

# 安装 Wrangler CLI
npm install -g wrangler

# 登录到 Cloudflare
wrangler login

# 构建项目
npm run bui

...

[此处原文被截断]

质量与SEO要求

元标签

每个页面必须包含：

  • 唯一且描述性的 <title> 标签
  • <meta name="description">，150-160个字符
  • Open Graph 标签 (og:title, og:description, og:image, og:url)
  • 用于结构化数据的 JSON-LD 脚本（如适用）

性能

  • 图片必须使用 <img> 标签并包含 alt 属性
  • 对图片使用响应式尺寸：srcset 和 sizes
  • 使用语义化的 HTML 元素 (<header>, <nav>, <main>, <section>, <article>, <footer>)
  • 使用 preload、prefetch 或 dns-prefetch 进行静态资产的渲染
  • 避免渲染阻塞请求

可访问性

  • 使用正确的标题层级（h1 -> h2 -> h3），不要跳过
  • 为表单控件添加标签
  • 使用 ARIA 标签，但仅在需要时
  • 确保足够的颜色对比度
  • 键盘可导航

许可证

MIT

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Omar-Obando/qwen-orchestrator

Anti-pattern detection and prevention skill. Catches hardcoded data, non-functional UI elements, placeholder code, N+1 queries, and other common development anti-patterns before they ship.

Omar-Obando/qwen-orchestrator

Redesign existing websites by analyzing a live URL (via WebFetch) or a screenshot (via vision-capable models). Extracts layout, structure, colors, typography, content hierarchy, and SEO metadata, then produces an improved, professional redesign. Use this skill when the user provides a URL to replicate, a screenshot to analyze, or asks to "redesign", "rebuild", "improve", or "modernize" an existing website.

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community