菜单
Multi-surface design system for Tier0 (product UI, company website, PPT). Route to the correct surface before generating UI. For sales/presales decks that need HTML + editable PPTX from source materials, also load skills/tier0-slide-skill.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/FREEZONEX/Tier0-Design-System --skill tier0-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
将 Tier0 PPT / 文档 / 截图 / Demo / 架构图整理为销售·售前演示稿（HTML 和/或可编辑 PPTX）。 已有完整布局的 PPTX 默认模式 A：只统一 DESIGN.md / deck token 字体·色·边框·圆角，禁止整套推翻乱排； 仅失败页或用户明确重构时模式 B。不做产品后台 UI。触发：Tier0 PPT、售前 deck、优化现有 PPTX、架构说明、案例演示。
将 Tier0 PPT / 文档 / 截图 / Demo / 架构图整理为销售·售前演示稿（HTML 和/或可编辑 PPTX）。 已有完整布局的 PPTX 默认模式 A：只统一 DESIGN.md / deck token 字体·色·边框·圆角，禁止整套推翻乱排； 仅失败页或用户明确重构时模式 B。不做产品后台 UI。触发：Tier0 PPT、售前 deck、优化现有 PPTX、架构说明、案例演示。
Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
基于 SOC 职业分类
正在显示 SKILL.md
| name | tier0-design |
| description | Multi-surface design system for Tier0 (product UI, company website, PPT). Route to the correct surface before generating UI. For sales/presales decks that need HTML + editable PPTX from source materials, also load skills/tier0-slide-skill. |
| user-invocable | true |
路径约定： 本文件中
foundations/、tokens/、surfaces/、sources/、preview/、ui_kits/、assets/、skills/等均为技能内置资源，相对本技能目录${CLAUDE_SKILL_DIR}/（即本 SKILL.md 所在目录）解析、读取与复制。decks/、packages/*等指用户当前项目目录，不在技能内。成稿 HTML/PPTX 默认输出到仓库外。
| 用户任务关键词 | Surface / Skill | 必读 |
|---|---|---|
| 后台、Namespace、Broker、表格、表单、侧栏、工作台 | tier0-product | surfaces/tier0-product/README.md + sources/spec.product-ui.md + tokens/product.css |
| 官网、定价、UNS 长页、产品叙事、tier0.app | company-website | surfaces/company-website/README.md + sources/spec.company-website.*.md + tokens/website.css |
| PPT 规范、Masterdeck token、版式骨架、checklist | ppt（规范层） | surfaces/ppt/README.md + references/README.md → references/ppt-workflow.md + tokens/deck.css |
| 销售/售前 deck、从 DOCX/截图/PPTX 生成、HTML+可编辑 PPTX、Layout Gallery、intake 确认页 | skills/tier0-slide-skill（执行层） | skills/tier0-slide-skill/SKILL.md + 其 references/；VI 冲突时仍以 tokens/deck.css / references/ppt-checklist.md 为准 |
若未说明场景，先问：产品 UI / 官网 / PPT？以及深色或浅色、受众、交付格式（HTML / React / PPTX）。
PPT 双层路由： 只要用户要「做出可演示/可编辑的 deck」（尤其双格式），进入 skills/tier0-slide-skill；只需查规范或改 token/preview 组件时留在 surfaces/ppt + references/ppt-*。更多 skill 注册表见 skills/README.md。
DESIGN.md — Agent 设计指南（对齐 vercel.com/design.md 结构：上下文 → 优先级 → 四步工作法 → 视觉权威 → 反例）foundations/README.md — 品牌、命名、共享禁忌的细则表tokens/core.css — 共享色板（lime #B2ED1D、黑 #050B14 等）再加载对应 surface 的 tokens/*.css 与 surfaces/*/README.md。
收到产品 UI 任务后，在读设计系统文档之前，先执行以下检查：
用 Glob 搜索 packages/theme/src/themes.scss（任意路径）。
找到了 → 以前端库为事实来源：
packages/theme/src/themes.scss、packages/theme/src/variables.scss、packages/theme/src/tailwind.css、packages/theme/src/token.tspackages/ui/components/<与任务相关的组件目录>找不到 → 告知用户：
当前 workspace 中未检测到 Tier0-Frontend 前端库。将库克隆到本地并在 Cursor 中加入 workspace 后，生成代码会更贴近真实实现。是否继续用设计系统文档生成？
等用户确认后，仅凭设计系统文档继续。
preview/_shared/（原子）· preview/<surface>/（场景组件，见各目录 README）ui_kits/tier0-product/index.htmlui_kits/company-website/index.htmlsurfaces/ppt/；完整规范 sources/spec.ppt.mdreferences/README.md（索引）→ references/ppt-workflow.md → references/ppt-layout-lock.md / references/ppt-layouts.md / references/ppt-components.md；有截图：references/ppt-screenshots.md；交付前：references/ppt-checklist.mdskills/tier0-slide-skill/（intake → Layout Gallery → HTML / 双格式 PPTX）；Gallery：skills/tier0-slide-skill/layout-gallery/foundations/icons-lucide.md）；带 Icon 卡片用 .tier0-card-icon；slide-skill 内图标约定见其 references/（IBM Carbon）#B2ED1D：品牌点缀，不是产品浅色 UI 的主按钮色（用 #CCF368）。#73B200，主 CTA 用 #B2ED1D 绿底近墨字；禁止 Poppins。#1D77FE；禁止画面出现 FREEZONEX（仅 Tier0 Logo / 版权）；重点标题绿：深底 #B2ED1D、白底 #73B200；项目符号与卡片顶边始终 #B2ED1D；浅底禁止 #B2ED1D 文字（P0-8）；卡片大面积用 --ppt-card-fill-*（深黑/绿/灰）。assets/，引用对应 tokens/*.css。~/Desktop/<项目>/ 或用户指定的业务仓库），不要在本设计系统仓库内创建 decks/ 或任何成稿 HTML。packages/theme）。自然语言描述需求即可，路由规则与例句见 README.md。合入更多 skill：见 skills/README.md。