UI/UX开发工具专业版

核心能力

1. 多页面项目管理

支持完整的多页面项目结构,每个项目独立管理配置和设计系统:

serve/
├── client-a/
│   ├── project.json              # 项目配置+设计系统引用
│   ├── assets/
│   │   ├── logo.webp
│   │   ├── hero-banner.webp
│   │   └── team-photos/
│   │       ├── member-1.webp
│   │       └── member-2.webp
│   ├── landing/index.html        # 落地页
│   ├── about/index.html          # 关于我们
│   ├── pricing/index.html        # 定价方案
│   ├── contact/index.html        # 联系我们
│   └── dashboard/index.html      # 用户仪表盘
├── client-b/
│   ├── project.json
│   ├── assets/
│   └── landing/index.html

处理: 按照skill规范执行多页面项目管理操作,遵循单一意图原则。 输出: 返回多页面项目管理的执行结果,包含操作状态和输出数据。

• 执行批量图片转换与优化报告操作，处理输入数据并返回结果
• 验证执行结果，确认输出符合预期格式
• 参考批量图片转换与优化报告相关配置参数进行设置

2. 设计系统持久化与引用

项目配置中引用设计系统,保障跨页面一致性:

{
  "name": "enterprise-app",
  "version": "2.0.0",
  "preferences": {
    "style": "professional",
    "font": "Inter",
    "primary_color": "#2563EB",
    "dark_mode": true
  },
  "design_system": {
    "reference": "design-system/MASTER.md",
    "max_width": "max-w-7xl",
    "spacing_scale": "tailwind-default",
    "border_radius": "rounded-xl",
    "color_tokens": {
      "primary": "#2563EB",
      "secondary": "#64748B",
      "accent": "#22D3EE",
      "background": "#0F172A",
      "surface": "#1E293B",
      "text_primary": "#F8FAFC",
      "text_secondary": "#CBD5E1"
    }
  },
  "pages": [
    {"slug": "landing", "title": "首页", "status": "completed"},
    {"slug": "pricing", "title": "定价", "status": "completed"},
    {"slug": "dashboard", "title": "仪表盘", "status": "in-progress"},
    {"slug": "settings", "title": "设置", "status": "pending"}
  ]
}

输入: 用户提供设计系统持久化与引用所需的指令和必要参数。 处理: 按照skill规范执行设计系统持久化与引用操作,遵循单一意图原则。 输出: 返回设计系统持久化与引用的执行结果,包含操作状态和输出数据。

• 执行设计系统持久化与引用操作,处理输入数据并返回结果
• 验证执行结果,确认输出符合预期格式
• 异常时参考错误处理章节进行恢复
• 关键参数: 设计系统持久化与引用 选项

3. 自动化多分辨率截图审查

专业版支持自动化多分辨率截图,全面覆盖各设备尺寸:

bash scripts/screenshot.sh "http://localhost:5174/project/page/" /tmp/desktop-full.png 1920 1080

bash scripts/screenshot.sh "http://localhost:5174/project/page/" /tmp/desktop.png 1440 900

bash scripts/screenshot.sh "http://localhost:5174/project/page/" /tmp/tablet.png 1024 768

bash scripts/screenshot.sh "http://localhost:5174/project/page/" /tmp/tablet-portrait.png 768 1024

bash scripts/screenshot.sh "http://localhost:5174/project/page/" /tmp/mobile.png 390 844

bash scripts/screenshot.sh "http://localhost:5174/project/page/" /tmp/mobile-small.png 320 568

输入: 用户提供自动化多分辨率截图审查所需的指令和必要参数。 处理: 按照skill规范执行自动化多分辨率截图审查操作,遵循单一意图原则。 输出: 返回自动化多分辨率截图审查的执行结果,包含操作状态和输出数据。

• 执行自动化多分辨率截图审查操作,处理输入数据并返回结果
• 验证执行结果,确认输出符合预期格式
• 异常时参考错误处理章节进行恢复
• 关键参数: 自动化多分辨率截图审查 选项

4. 批量截图审查脚本

#!/bin/bash
PROJECT=$1
BASE_URL="http://localhost:5174/${PROJECT}"
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
OUTPUT_DIR="/tmp/reviews/${PROJECT}_${TIMESTAMP}"

mkdir -p "$OUTPUT_DIR"

PAGES=("landing" "about" "pricing" "contact" "dashboard")
RESOLUTIONS=("1920x1080" "1440x900" "768x1024" "390x844")

for page in "${PAGES[@]}"; do
  for res in "${RESOLUTIONS[@]}"; do
    width=$(echo $res | cut -d'x' -f1)
    height=$(echo $res | cut -d'x' -f2)
    output="${OUTPUT_DIR}/${page}_${res}.png"
    bash scripts/screenshot.sh "${BASE_URL}/${page}/" "$output" "$width" "$height"
    echo "截图完成: ${page} @ ${res}"
  done
done

echo "批量截图完成,输出目录: ${OUTPUT_DIR}"

输入: 用户提供批量截图审查脚本所需的指令和必要参数。 处理: 按照skill规范执行批量截图审查脚本操作,遵循单一意图原则。

5. 批量图片转换与优化报告

#!/bin/bash
INPUT_DIR=$1
QUALITY=${2:-80}

total_before=0
total_after=0
count=0

for img in "$INPUT_DIR"/*.{png,jpg,jpeg}; do
  if [ -f "$img" ]; then
    filename=$(basename "$img" | sed 's/.[^.]*$//')
    output="$INPUT_DIR/${filename}.webp"

    before_size=$(stat -f%z "$img" 2>/dev/null || stat -c%s "$img")
    bash scripts/convert-image.sh "$img" "$output" "$QUALITY"
    after_size=$(stat -f%z "$output" 2>/dev/null || stat -c%s "$output")

    reduction=$((100 - (after_size * 100 / before_size)))
    total_before=$((total_before + before_size))
    total_after=$((total_after + after_size))
    count=$((count + 1))

    echo "转换: $(basename $img) -> ${filename}.webp"
    echo "  大小: $(numfmt --to=iec $before_size) -> $(numfmt --to=iec $after_size) (减少${reduction}%)"
  fi
done

echo ""
echo "=== 批量转换报告 ==="
echo "处理文件数: ${count}"
echo "原始总大小: $(numfmt --to=iec $total_before)"
echo "转换后大小: $(numfmt --to=iec $total_after)"
echo "总节省: $(numfmt --to=iec $((total_before - total_after)))"

• 执行批量图片转换与优化报告操作,处理输入数据并返回结果
• 验证执行结果,确认输出符合预期格式
• 异常时参考错误处理章节进行恢复
• 关键参数: 批量图片转换与优化报告 选项
• 处理流程: 接收输入 -> 执行批量图片转换与优化报告 -> 返回结果
• 输入: 用户提供批量图片转换与优化报告所需的参数和指令
• 输出: 返回批量图片转换与优化报告的执行结果,包含操作状态和输出数据

6. Zip打包导出

cd serve && zip -r /tmp/enterprise-app.zip enterprise-app/

cd serve && zip -r /tmp/enterprise-app.zip enterprise-app/ 
  -x "*.DS_Store" "*/tmp/*" "*/.git/*"

输入: 用户提供Zip打包导出所需的指令和必要参数。 处理: 按照skill规范执行Zip打包导出操作,遵循单一意图原则。 输出: 返回Zip打包导出的执行结果,包含操作状态和输出数据。

• 执行Zip打包导出操作,处理输入数据并返回结果
• 验证执行结果,确认输出符合预期格式
• 异常时参考错误处理章节进行恢复
• 关键参数: zip打包导出 选项

能力覆盖范围

本skill还覆盖以下能力场景: React、项目生成、面向团队的专业页、面开发引擎、面向开发团队和代、理机构的专业级、页面生成引擎、支持多页面项目管、自动化截图审查循、批量图片处理和、核心能力、多页面项目管理与、配置持久化、设计系统引用与跨、页面一致性保障、打包导出与独立部、署支持、企业级设计原则自、动应用与质量门禁、组件化、开发与状态管理。这些能力在上述核心功能中均有对应处理逻辑。

适用场景

场景一:代理机构多客户项目交付

代理机构需要同时为3个客户开发各自的落地页,每个客户有独立的设计偏好。

mkdir -p serve/client-a/{landing,assets}
cat > serve/client-a/project.json << 'EOF'
{
  "name": "client-a",
  "preferences": {"style": "minimal", "font": "Inter", "primary_color": "#2563EB"},
  "design_system": {"max_width": "max-w-6xl", "border_radius": "rounded-lg"},
  "pages": [{"slug": "landing", "title": "首页", "status": "in-progress"}]
}
EOF
mkdir -p serve/client-b/{landing,assets}
mkdir -p serve/client-c/{landing,assets}

场景二:企业多页面Web应用

一家企业需要开发包含5个页面的产品官网,要求设计一致性。

mkdir -p serve/enterprise/{landing,features,pricing,about,contact,assets}

bash scripts/batch-screenshot.sh enterprise

bash scripts/batch-convert-images.sh serve/enterprise/assets 85

cd serve && zip -r /tmp/enterprise.zip enterprise/

场景三:自动化视觉质量门禁

在CI/CD流程中集成自动化截图审查作为质量门禁:

#!/bin/bash
PROJECT=$1
ISSUES_FOUND=0

bash scripts/batch-screenshot.sh "$PROJECT"

for screenshot in /tmp/reviews/${PROJECT}_*/*.png; do
  echo "检查: $(basename $screenshot)"
done

if [ $ISSUES_FOUND -gt 0 ]; then
  echo "质量门禁未通过:发现 ${ISSUES_FOUND} 个问题"
  exit 1
else
  echo "质量门禁通过"
  exit 0
fi

使用流程

专业版项目初始化

bash scripts/setup.sh 5174

PROJECT_NAME="my-enterprise-app"
mkdir -p serve/${PROJECT_NAME}/{landing,about,pricing,contact,assets}

cat > serve/${PROJECT_NAME}/project.json << 'EOF'
{
  "name": "my-enterprise-app",
  "version": "1.0.0",
  "preferences": {
    "style": "professional",
    "font": "Inter",
    "primary_color": "#2563EB",
    "dark_mode": false
  },
  "design_system": {
    "max_width": "max-w-7xl",
    "border_radius": "rounded-xl",
    "spacing_scale": "tailwind-default"
  },
  "pages": [
    {"slug": "landing", "title": "首页"},
    {"slug": "about", "title": "关于我们"},
    {"slug": "pricing", "title": "定价方案"},
    {"slug": "contact", "title": "联系我们"}
  ]
}
EOF

bash scripts/batch-screenshot.sh ${PROJECT_NAME}

bash scripts/batch-convert-images.sh serve/${PROJECT_NAME}/assets 85

cd serve && zip -r /tmp/${PROJECT_NAME}.zip ${PROJECT_NAME}/

命令参数说明

1. -gt: 命令参数,用于指定操作选项
2. -auto: 命令参数,用于指定操作选项
3. -pointer: 命令参数,用于指定操作选项
4. -primary: 命令参数,用于指定操作选项
5. -convert-images: 命令参数,用于指定操作选项

结果处理: 执行完成后,查看输出结果确认操作状态。成功时输出包含处理摘要和结果数据;失败时根据错误信息排查问题,参考错误处理章节获取恢复步骤。

命令参数说明

• -banner: 命令参数,用于指定操作选项
• -dom: 命令参数,用于指定操作选项
• -CN: 命令参数,用于指定操作选项
• -lg: 命令参数,用于指定操作选项
• -slate-50: 命令参数,用于指定操作选项

命令参数说明

• -enterprise-app: 命令参数,用于指定操作选项
• -serif: 命令参数,用于指定操作选项
• -f1: 命令参数,用于指定操作选项
• -slate-900: 命令参数,用于指定操作选项
• -between: 命令参数,用于指定操作选项

命令参数说明

• -CN: 命令参数,用于指定操作选项
• -portrait: 命令参数,用于指定操作选项
• -slate-600: 命令参数,用于指定操作选项
• -photos: 命令参数,用于指定操作选项
• -center: 命令参数,用于指定操作选项

命令参数说明

• -colors: 命令参数,用于指定操作选项
• -h-screen: 命令参数,用于指定操作选项
• -xl: 命令参数,用于指定操作选项
• -full: 命令参数,用于指定操作选项
• -w-7xl: 命令参数,用于指定操作选项

命令参数说明

• -system: 命令参数,用于指定操作选项
• -small: 命令参数,用于指定操作选项
• -w-6xl: 命令参数,用于指定操作选项
• -CN: 命令参数,用于指定操作选项
• -bold: 命令参数,用于指定操作选项

命令参数说明

• -width: 命令参数,用于指定操作选项
• -progress: 命令参数,用于指定操作选项
• -screenshot: 命令参数,用于指定操作选项
• -default: 命令参数,用于指定操作选项
• -scale: 命令参数,用于指定操作选项

命令参数说明

• -f2: 命令参数,用于指定操作选项
• -white: 命令参数,用于指定操作选项
• -CN: 命令参数,用于指定操作选项
• -blur-md: 命令参数,用于指定操作选项

命令参数说明

• -CN: 命令参数,用于指定操作选项

输入格式

输出格式

{
  "success": true,
  "data": {
    result: "相关说明",
    result: "相关说明",
    result: "相关说明",
    "metadata": {
      "template_used": "reviewer",
      "word_count": 0,
      "style": "专业"
    }
  },
  "error": null
}

输出模板参考: assets/output.json

异常处理

依赖说明

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
• 操作系统: Windows / macOS / Linux
• 浏览器: Chrome/Chromium(用于截图审查)
• 本地服务器: Python http.server或Node.js静态服务器
• Bash: 批量脚本执行(Windows需Git Bash或WSL)

依赖说明

安装依赖:

brew install webp

sudo apt install webp zip coreutils

API Key 配置

本Skill基于指令驱动和本地脚本运行,无需额外API Key。页面生成由Agent内置LLM驱动,截图、图片转换和打包均为本地工具执行。CDN前端库通过公网加载,无需配置。

可用性分类

• 分类: MD+EXEC()
• 说明: 基于Markdown的AI Skill,。多页面管理、批量截图、图片转换和Zip导出均依赖exec工具执行Bash脚本。自动化质量门禁可集成到CI/CD流水线,需确保Bash和Chrome/Chromium环境可用。

案例展示

企业级React页面模板(CDN)

专业版与免费版完整对比

常见问题

Q1: 专业版是否兼容免费版的单页面流程?

完全兼容。专业版支持免费版的所有操作,包括单页面生成、基础截图审查和WebP转换。专业版额外提供多页面管理、批量操作和导出功能。

Q2: 如何管理多个客户项目?

每个客户项目使用独立目录(serve/client-a/, serve/client-b/),各自维护project.json配置和设计系统。通过批量脚本可一次性截图审查所有项目。

Q3: 自动化截图审查如何集成到CI/CD?

将quality-gate.sh脚本集成到CI/CD流水线中,在代码提交后自动运行截图审查。如果发现视觉问题,CI流程失败并报告问题详情。

Q4: Zip导出的页面可以独立部署吗?

可以。CDN方式的React页面是独立HTML文件,Zip解压后可通过任意静态服务器(Nginx/Apache/CDN)部署,无需构建步骤。

Q5: 设计系统如何在团队中共享?

将project.json中的设计系统配置纳入版本控制(Git),团队成员克隆仓库后即可使用相同的设计令牌和偏好设置,确保所有人生成的页面视觉一致。

Q6: 批量图片转换支持哪些格式?

支持PNG、JPG、JPEG转WebP。转换后自动生成优化报告,包括每张文件的原始大小、转换后大小和压缩比例。

错误处理

已知限制

-

-

-