# auto-workflow

**Repository Path**: karsonZ/auto-workflow

## Basic Information

- **Project Name**: auto-workflow
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-05-22
- **Last Updated**: 2026-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Auto Workflow Skills

这个仓库包含 3 个 Codex skills，用于增强 AI 在 UI 设计、导航结构设计和数据分析页设计上的工作流。

## 一键安装给 AI 的提示词

把下面这段话直接发给 Codex、Cursor、Claude Code 或其他能操作本机终端的 AI：

```text
请帮我一键安装这个仓库里的 3 个 Codex skills：

- awesome-design-md
- navigation-pattern-designer
- analysis-page-designer

安装规则：
2. 从 https://gitee.com/karsonZ/auto-workflow.git 克隆到临时目录后安装。
3. 安装目标目录是 ${CODEX_HOME:-$HOME/.codex}/skills。
4. 每个 skill 要以原目录名安装到 skills 目录下，例如 ~/.codex/skills/awesome-design-md。
5. 如果目标目录已存在，请先备份为 <skill-name>.bak-YYYYmmddHHMMSS，再复制新版本。
6. 安装后请检查每个目录都包含 SKILL.md，并提醒我重启 Codex 以加载新 skill。
7. 不要删除仓库源码，不要清空 ~/.codex/skills。
```

## 终端一键安装命令

也可以直接在终端执行下面的命令：

```bash
set -euo pipefail

REPO_LOCAL="/Users/rising02/Desktop/auto-workflow"
REPO_URL="https://gitee.com/karsonZ/auto-workflow.git"
DEST_ROOT="${CODEX_HOME:-$HOME/.codex}/skills"
SKILLS="awesome-design-md navigation-pattern-designer analysis-page-designer"

if [ -d "$REPO_LOCAL" ]; then
  SRC_ROOT="$REPO_LOCAL"
  TMP_DIR=""
else
  TMP_DIR="$(mktemp -d)"
  git clone "$REPO_URL" "$TMP_DIR/auto-workflow"
  SRC_ROOT="$TMP_DIR/auto-workflow"
fi

mkdir -p "$DEST_ROOT"
STAMP="$(date +%Y%m%d%H%M%S)"

for skill in $SKILLS; do
  if [ ! -f "$SRC_ROOT/$skill/SKILL.md" ]; then
    echo "缺少 $SRC_ROOT/$skill/SKILL.md，停止安装"
    exit 1
  fi

  if [ -e "$DEST_ROOT/$skill" ]; then
    mv "$DEST_ROOT/$skill" "$DEST_ROOT/$skill.bak-$STAMP"
  fi

  cp -R "$SRC_ROOT/$skill" "$DEST_ROOT/$skill"
  echo "已安装 $skill -> $DEST_ROOT/$skill"
done

if [ -n "${TMP_DIR:-}" ]; then
  rm -rf "$TMP_DIR"
fi

echo "安装完成。请重启 Codex，让新 skills 生效。"
```

## 安装后验证

执行：

```bash
ls "${CODEX_HOME:-$HOME/.codex}/skills"
test -f "${CODEX_HOME:-$HOME/.codex}/skills/awesome-design-md/SKILL.md"
test -f "${CODEX_HOME:-$HOME/.codex}/skills/navigation-pattern-designer/SKILL.md"
test -f "${CODEX_HOME:-$HOME/.codex}/skills/analysis-page-designer/SKILL.md"
```

三个 `test` 命令都没有报错，就说明目录安装成功。之后重启 Codex，skills 才会出现在可用列表中。

## Skill 作用说明

### awesome-design-md

用于让 AI 按指定品牌、产品或设计系统风格来设计和实现 UI。

它内置了大量 `DESIGN.md` 设计参考，例如 Apple、Linear、Vercel、Stripe、Notion、Figma、Tesla、Nike、Airbnb 等。AI 可以读取对应品牌的色彩、排版、组件、布局、动效和响应式规则，再把这些设计语言应用到当前项目中。

适合在这些场景使用：

- 让页面呈现某个品牌或产品的视觉风格
- 为 App、网页、仪表盘、组件选择合适的设计系统
- 快速生成带有明确视觉方向的 UI prompt
- 在没有设计稿时，为 AI 提供可执行的设计参考

常用触发方式：

```text
使用 awesome-design-md，帮我把这个页面改成 Linear 风格。
```

```text
从 awesome-design-md 里挑一个适合 AI 工具官网的设计风格，并应用到当前项目。
```

### navigation-pattern-designer

用于让 AI 为 App、Flutter、iOS、Web 或响应式界面选择合适的导航结构。

它不会默认所有产品都使用底部导航，而是根据一级入口数量、页面层级、平台尺寸、操作频率、品牌表达和响应式需求，选择底部导航、Tab Bar、侧边栏、NavigationRail、Drawer、顶部标签、浮动导航、自定义异形导航等方案。

适合在这些场景使用：

- 设计 App 首页或整体信息架构
- 判断一级页面和二级页面应该如何组织
- 为 Flutter 项目选择 `NavigationBar`、`CupertinoTabBar`、`NavigationRail`、`Drawer` 等实现方式
- 设计自定义底部导航卡片、浮动胶囊、曲线凹槽或响应式导航
- 输出导航验收清单，包括安全区域、键盘避让、选中态、可访问性和路由同步

常用触发方式：

```text
使用 navigation-pattern-designer，为这个 Flutter App 设计一级导航和二级页面进入方式。
```

```text
帮我判断这个产品应该用底部导航、侧边栏还是 NavigationRail，并给出 Flutter 实现方案。
```

### analysis-page-designer

用于让 AI 设计和实现分析页、统计页、洞察页、报表页或数据可视化页面，尤其适合 Flutter 项目。

它的核心原则是先找真实数据，再决定图表。AI 会先扫描项目中的 model、entity、provider、repository、storage、mock 数据和已有聚合逻辑，找出真正可分析的数据源，然后根据数据字段推导时间趋势、分类对比、占比结构、流程转化、关系分析、排行或完成度等指标。

它内置了图表选择参考，包括：

- 数据模式到图表的映射
- 图表决策矩阵
- 图表定位指南
- Flutter 图表库选择建议
- 移动端图表布局约束

适合在这些场景使用：

- 为 App 增加统计页、分析页或仪表盘
- 让 AI 自动判断当前项目里有哪些数据值得分析
- 根据真实 model 字段选择折线图、柱状图、条形图、环形图、漏斗图、散点图、雷达图、矩阵树图等
- 设计包含指标卡、主图、辅助图、排行列表和洞察文案的完整页面
- 避免生成脱离业务的通用 dashboard

默认规则：

- 优先分析真实业务数据，不优先分析金币、钱包、支付、充值、订单、消费等财务数据，除非用户明确要求。
- 如果数据不足以支撑复杂图表，就退回轻量洞察页，而不是硬做多图仪表盘。
- 如果项目已有图表库，优先沿用现有图表库。

常用触发方式：

```text
使用 analysis-page-designer，基于当前 Flutter 项目的真实数据做一个统计分析页。
```

```text
帮我自动找项目里可分析的数据，并设计一个高质感分析页。
```

## 推荐组合用法

这 3 个 skill 可以组合使用：

```text
请先用 analysis-page-designer 找出当前 App 可分析的数据并设计统计页内容，
再用 navigation-pattern-designer 判断统计页应该放在一级导航还是二级入口，
最后用 awesome-design-md 选择一个适合该产品的设计风格并完成 UI 实现。
```

## 目录结构

```text
auto-workflow/
├── awesome-design-md/
│   ├── SKILL.md
│   ├── design-md/
│   └── scripts/
├── navigation-pattern-designer/
│   ├── SKILL.md
│   ├── references/
│   └── scripts/
└── analysis-page-designer/
    ├── SKILL.md
    ├── references/
    └── data/
```