TH B Web UI Skill 是一个用于生成企业后台原型界面的可复用 skill。
它通过沉淀页面结构、界面语义和 UI 规范，帮助 AI 生成更规整、更克制、更符合企业后台场景的界面，而不是泛化的消费级页面。它关注的是设计语言和页面结构，而不是某一种具体技术实现。
- 支持企业后台常见的列表页、详情页、表单页、抽屉页、仪表盘模式
- 在需求信息不足时，支持先进入前置澄清模式，再生成页面
- 内置颜色、按钮、表单、表格、状态和交互规则
- 适合生成原型描述、Figma 提示词、前端页面代码
- 兼容 skill 平台常见结构，包含
SKILL.md和agents/openai.yaml - 适合通过 GitHub 仓库进行分享、维护和发布
在提示词中直接引用这个 skill：
请用 $th-b-web-ui-skill 生成一个企业后台原型，要求界面紧凑、配色克制、按钮层级清晰、表格行为稳定。
为了获得更好的结果，建议同时补充：
- 页面类型
- 关键模块
- 主要字段
- 表格列
- 主次操作按钮
- 你希望输出的是原型描述、Figma 提示词，还是前端代码
如果这些信息暂时不完整，这个 skill 也会先做前置判断，并在必要时用一次只问一个问题的方式逐轮澄清，再进入页面生成。
请用 $th-b-web-ui-skill 生成一个资源管理列表页原型，页面包含筛选区、操作区、数据表格、状态标签和分页。
请用 $th-b-web-ui-skill 生成一个审批表单原型，要求分组清晰、控件紧凑、校验明确，并带固定底部操作区。
请用 $th-b-web-ui-skill 生成一个详情页的 Figma 提示词，页面包含状态头部、摘要卡片、关联标签页和操作记录区。
请用 $th-b-web-ui-skill 生成企业后台风格的前端页面代码，要求中性色表面、紧凑表单、清晰按钮层级，并显式包含加载态、空态和错误态。
这个 skill 主要用于指导 AI 生成：
- 带筛选区、操作区、表格、分页的列表页
- 带状态头部、摘要信息、关联标签页的详情页
- 带分组和明确操作层级的创建/编辑表单
- 适合快速处理任务的抽屉式工作流
- 偏运营视角的仪表盘页面
- 可直接用于设计生成的 Figma 提示词
- 企业后台风格的 HTML、Vue、React 原型代码
这个 skill 偏好的界面风格：
- 中性、低噪音的界面表面
- 单一强调色
- 紧凑型信息密度
- 清晰的按钮层级
- 稳定的企业后台页面结构
- 明确的加载态、空态和错误态
这个 skill 会避免的界面风格：
- 营销页式布局
- 炫目的渐变
- 过大的头图区块
- 过于活泼或装饰化的 UI 风格
th-b-web-ui-skill/
├── SKILL.md
├── README.md
├── HUMAN_GUIDE.md
├── agents/
│ └── openai.yaml
└── references/
├── internal-mapping.md
├── page-patterns.md
├── publishing-kit.md
└── ui-spec.md
-
SKILL.mdskill 的核心定义和主规则集。 -
agents/openai.yamlskill 平台展示信息和默认提示词配置。 -
HUMAN_GUIDE.md面向同事或协作者的人类可读说明文档。
-
references/page-patterns.md页面模板，包括列表页、详情页、表单页、抽屉页、仪表盘等常见结构。 -
references/internal-mapping.md命名语义和组件家族风格映射。 -
references/ui-spec.md更细的颜色、按钮、表单、表格、间距和交互规则。 -
references/publishing-kit.md用于发布到 skill 平台时的简介、卖点和示例提示词。
这个仓库有几种常见用法：
- 作为本地 skill 目录，放入兼容 Codex 的 skills 目录中使用
- 作为 GitHub 仓库，被 skill 平台从仓库导入
- 作为团队共享的企业后台界面规范和提示词规范
- 生成管理类列表页
- 设计带状态和标签页的详情页
- 生成配置页或审批页
- 设计快速创建或快速编辑抽屉
- 生成运营型仪表盘
- 生成企业后台风格的前端原型
这个仓库已经按 skill 平台和 GitHub 分发的方向组织好了结构。它被设计成一层可复用的企业后台界面规范，而不是某个具体产品实现的技术依赖。
如果平台支持读取 skill 元数据，主要入口文件是：
SKILL.mdagents/openai.yaml