--- slug: "ui-component-tool-pro" name: "ui-component-tool-pro" version: "1.0.0" displayName: "UI组件生成(专业版)" summary: "面向团队的企业级UI组件工程平台,含设计系统、批量生成、可访问性增强与组件库管理。UI组件生成工具专业版为团队与企业提供端到端UI组件工程能力,涵盖设计系统令牌、批量组件生成、WCAG AA" license: "Proprietary" edition: "pro" description: |- UI组件生成工具专业版为团队与企业提供端到端UI组件工程能力,涵盖设计系统令牌、批量组件生成、WCAG AA可访问性增强与企业级组件库管理。核心能力: - 设计系统令牌(颜色/排版/间距/圆角/阴影)生成与管理 - 批量组件生成与脚手架 - WCAG AA可访问性审查与增强 - 多框架输出(HTML/React/Vue/Angular) - 企业级组件库结构与文档生成 - 主题切换与暗色模式工程化 适用场景: - 中大型团队设计系统落地与维护 - 企业级组件库从0到1搭建 - 多项目组件复用与版本管理 . tags: - UI组件 - 设计系统 - 企业开发 - 可访问性 - 组件库 - 团队协作 - UI设计 - 前端 - 设计 - comp - rem - eof - wcag tools: - read - exec - write homepage: "" category: "Creative" --- # UI 组件生成工具(专业版) ## 概述 `ui-component-tool-pro` 是面向团队与企业的 UI 组件工程平台。它在免费版单文件 HTML 基础组件之上,扩展了设计系统令牌管理、批量组件生成、WCAG AA 可访问性增强、多框架输出与企业级组件库结构能力,帮助团队构建可复用、可维护、可访问的组件体系。 本版本完全兼容免费版输出的所有单文件 HTML 组件,可平滑升级。所有指令通过 Markdown 驱动 Agent,无需额外安装私有脚本。 ## 核心能力 | 能力 | 说明 | 是否兼容免费版 | |---|---|-------| | 基础组件生成 | 免费版全部表单、表格、卡片、模态框、导航栏 | 完全兼容 | | 设计系统令牌 | 颜色、排版、间距、圆角、阴影令牌生成 | Pro 新增 | | 批量组件生成 | 脚手架脚本一次性生成整套组件 | Pro 新增 | | WCAG AA 可访问性 | 自动审查与增强,达到 WCAG AA 合规 | Pro 新增 | | 多框架输出 | HTML / React / Vue / Angular 同步输出 | Pro 新增 | | 企业组件库结构 | 目录结构、文档站点、版本管理 | Pro 新增 | | 主题与暗色模式 | 令牌驱动的多主题工程化 | Pro 新增 | ### 核心功能执行 用`input_params`参数进行配置。 **输入**: 用户提供核心功能执行所需的指令和必要参数。 **处理**: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应。 **输出**: 返回核心功能执行的响应数据,包含状态码、结果和日志。 - 执行此能力时使用`input_params`参数,支持创建/查询/导出操作 ### 参数配置与调用 用`config_options`参数进行配置。 **输入**: 用户提供参数配置与调用所需的指令和必要参数。 **处理**: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应。 **输出**: 返回参数配置与调用的响应数据,包含状态码、结果和日志。 - 执行此能力时使用`config_options`参数,支持修改/重置/导入操作 ### 结果处理与输出 用`output_format`参数进行配置。 **输入**: 用户提供结果处理与输出所需的指令和必要参数。 **处理**: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应。 **输出**: 返回结果处理与输出的响应数据,包含状态码、结果和日志。 - 执行此能力时使用`output_format`参数,支持导出/保存/转换操作 **能力覆盖范围**：本skill的核心能力覆盖以下场景关键词：面向团队的企业级、组件工程平台、含设计系统、批量生成、可访问性增强与组、件库管理、组件生成工具专业、版为团队与企业提、供端到端、组件工程能力、涵盖设计系统令牌、可访问性增强与企、业级组件库管理、核心能力、生成与管理、批量组件生成与脚、可访问性审查与增、企业级组件库结构、与文档生成、主题切换与暗色模、式工程化等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。 ## 使用场景 ### 场景 1:设计系统令牌生成 为团队生成完整的设计系统令牌,作为所有组件的样式基础。 ```css /* tokens.css — 设计系统令牌 */ :root { /* 颜色令牌 */ --color-primary-50: #e6f0ff; --color-primary-100: #b3d1ff; --color-primary-500: #0066ff; --color-primary-700: #0052cc; --color-neutral-0: #ffffff; --color-neutral-100: #f5f5f5; --color-neutral-500: #888888; --color-neutral-900: #1a1a1a; --color-danger-500: #cc0000; --color-success-500: #00875a; // . /* 排版令牌 */ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-base: 1.5; // . /* 间距令牌(8px 基准) */ --spacing-0: 0; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-12: 3rem; // . /* 圆角令牌 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; // . /* 阴影令牌 */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 2px 8px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); // . /* 过渡令牌 */ --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; } // . /* 暗色模式令牌覆盖 */ @media (prefers-color-scheme: dark) { :root { --color-neutral-0: #1a1a1a; --color-neutral-100: #2a2a2a; --color-neutral-900: #f5f5f5; } } ``` ### 场景 2:批量组件生成脚本 生成一个脚手架脚本,一次性创建整套组件目录结构。 ```bash #!/usr/bin/env bash # （请参考skill目录中的脚本文件） — 批量生成企业组件库 set -euo pipefail # . COMPONENTS=( "Button" "Input" "Select" "Checkbox" "Radio" "Table" "Pagination" "Tag" "Badge" "Card" "Modal" "Drawer" "Tooltip" "Navbar" "Sidebar" "Breadcrumb" ) # . BASE_DIR="src/components" # . for comp in "${COMPONENTS[@]}"; do dir="$BASE_DIR/$comp" mkdir -p "$dir" # . # React 组件 cat > "$dir/$comp.tsx" < = (props) => { return (
{/* 渲染 ${comp} 内容 */} {props.children}
); }; EOF # . # 类型定义 cat > "$dir/types.ts" < "$dir/${comp}.css" < "$dir}/${comp}.test.tsx" < { it('应正确渲染', () => { const { container } = render(<${comp} />); expect(container.firstChild).toBeInTheDocument(); }); }); EOF # . # 文档 cat > "$dir}/README.md" <]*>' src/ --include='*.tsx' --include='*.html' \ | grep -v 'alt=' || true) if [ -n "$missing_alt" ]; then echo " 发现缺失 alt 的图片:" echo "$missing_alt" else echo " 通过" fi # . # 2. 检查表单字段是否有 label echo "" echo "[2] 表单 label 关联检查" missing_label=$(grep -rn ']*>' src/ --include='*.tsx' --include='*.html' \ | grep -v 'aria-label' | grep -v 'id=' || true) if [ -n "$missing_label" ]; then echo " 发现可能缺失 label 的输入:" echo "$missing_label" fi # . # 3. 检查按钮是否有可访问文本 echo "" echo "[3] 按钮可访问文本检查" empty_btn=$(grep -rn ']*>\s*' src/ --include='*.tsx' --include='*.html' || true) if [ -n "$empty_btn" ]; then echo " 发现空按钮:" echo "$empty_btn" fi # . # 4. 检查颜色对比度(需 pa11y 工具) if command -v npx &> /dev/null; then echo "" echo "[4] 颜色对比度检查(需 pa11y)" npx pa11y http://localhost:3000 --standard WCAG2AA || true fi # . echo "" echo "=== 审查完成 ===" ``` ## 快速开始 ### 第一步:声明团队上下文 在对话中说明团队规模、技术栈与设计系统现状,例如: ``` 我们是 15 人的前端团队,技术栈是 React + TypeScript, 需要从 0 搭建一套企业组件库,要求 WCAG AA 合规,支持暗色模式。 ``` ### 第二步:获取工程方案 工具会输出设计系统令牌、组件库目录结构、脚手架脚本、可访问性审查脚本与文档站点配置。 ### 第三步:落地与维护 ```bash # 应用设计系统令牌 cp tokens.css src/styles/ # . # 批量生成组件骨架 bash （请参考skill目录中的脚本文件） # . # 运行可访问性审查 bash （请参考skill目录中的脚本文件） # . # 启动文档站点(Storybook 等) npm run storybook ``` ## 示例 ### 企业组件库目录结构 ``` src/ ├── components/ # 组件实现 │ ├── Button/ │ │ ├── Button.tsx │ │ ├── Button.test.tsx │ │ ├── Button.css │ │ ├── types.ts │ │ └── README.md │ └── . ├── tokens/ # 设计系统令牌 │ ├── colors.css │ ├── typography.css │ ├── spacing.css │ └── index.css ├── themes/ # 主题 │ ├── light.css │ └── dark.css ├── utils/ # 工具函数 │ ├── a11y.ts │ └── cn.ts └── index.ts # 统一导出 ``` ### 多框架输出对照表 | 组件 | HTML 输出 | React 输出 | Vue 输出 | |---:|---:|---:|---:| | Button | `