Agent skill

Prototype Scan

by ChenyCHENYU in ChenyCHENYU/Robot_Admin

A skill your agent uses when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec…

MITAuto-check passedDevelopment

Install Prototype Scan

skills CLI
$ npx skills add ChenyCHENYU/Robot_Admin --skill prototype-scan -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ChenyCHENYU/Robot_Admin prototype-scan --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ChenyCHENYU/Robot_Admin.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/prototype-scan .claude/skills/prototype-scan && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
prototype-scan
GitHub stars
1k
Token cost
~1.6k tokens
SKILL.md length
247 words
Files
1
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec…

  • Works in 6 steps: 全量扫描 HTML(模式 A) → 解析详设文档(模式 B) → 交互模式分类 → …
  • : analyzing Axure exported HTML prototype files
  • SKILL.md covers 触发, 步骤, 输出格式:page-spec JSON and 输出后流转
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Prototype Scan is an agent skill from ChenyCHENYU/Robot_Admin. Use when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec JSON for Vue 3 + Naive UI development. Triggers on: prototype analysis, axure scan, page inventory, 原型解析, 页面清单, axure转vue, 详设文档, design doc.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Architecture decision records. It works with Vue.js. The repository describes itself as: 一款专为开发者省时间、提效率的现代化中后台模板,跳过低质造轮子,上手即开工!Vue 3 + TS + Naive UI,更有 Bun+Vite 双引擎,性能直接拉满💥 毫秒级热更新不卡顿,开发丝滑,您试试!还有49 个成熟组件,演示页+文档双重完善,无残缺、无坑点,复制即用无需额外调试;配套 8 个 @robot-admin…. The licence is MIT.

When your agent uses it

  • : analyzing Axure exported HTML prototype files
  • Detailed design documents to extract page inventory
  • Classify interaction patterns
  • Produce a structured page-spec JSON for Vue 3 + Naive UI development

Example prompts

  • “/prototype-scan”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. 全量扫描 HTML(模式 A)
  2. 解析详设文档(模式 B)
  3. 交互模式分类
  4. 字段提取
  5. 按钮提取
  6. 组件匹配

What it can do on your machine

Read from SKILL.md and the folder at commit d9770ea. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are json).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Prototype Scan loads about 1.6k tokens when it runs. Until then it costs about 83 tokens; SKILL.md has 247 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~83
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ChenyCHENYU/Robot_Admin at commit d9770ea, republished under its MIT licence (© ChenyCHENYU). 247 words, ~1,617 tokens.

Download SKILL.mdSave it as .claude/skills/prototype-scan/SKILL.md (or your agent's skills folder).
name
prototype-scan
description
Use when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec JSON for Vue 3 + Naive UI development. Triggers on: prototype analysis, axure scan, page inventory, 原型解析, 页面清单, axure转vue, 详设文档, design doc.

Skill: 原型解析(prototype-scan)

将 Axure 导出的 HTML 原型包 或 详细设计文档(MD/Word/表格) 解析为结构化的 page-spec JSON 页面清单,作为后续接口约定和代码生成的输入。

两种输入,同一输出:输出格式完全相同(page-spec JSON),消费方(page-codegen)无需感知来源。


触发

  • 模式 A(Axure):提供 Axure HTML 文件包目录,AI 全量扫描 HTML
  • 模式 B(详设文档):提供 MD/Word/表格格式的详细设计文档,AI 解析结构化字段

步骤

1. 全量扫描 HTML(模式 A)

遍历所有 .html 文件,提取:

区域提取内容
标题<title> / 标题文本 → 页面名称
表格<table> / 网格布局 → 表格列定义
表单<input> / <select> / 标签文本 → 查询条件和表单字段
按钮<button> / 链接文本 → 操作按钮列表
弹窗遮罩层 / 弹出层 → 弹窗组件
树形侧边栏 / 树形导航 → 树形结构
注释Axure 注解 → 业务说明
2. 解析详设文档(模式 B)

从 MD/Word/表格中提取:

  • 每个页面的功能描述
  • 字段列表(中文名 + 类型 + 必填 + 校验规则)
  • 接口 URL 约定
  • 按钮/操作定义
  • 业务流程说明
3. 交互模式分类
模式特征Robot Admin 组件
LIST查询区 + 表格 + 分页C_Form(search) + C_Table + C_ActionBar
MASTER_DETAIL上方主表 + 下方明细表C_SplitPane + 两个 C_Table
TREE_LIST左侧树 + 右侧表格C_SplitPane + C_Tree + C_Table
FORM_PAGE独立表单页面(多Tab/多字段)C_Form(tabs/steps) + 独立路由
FORM_MODAL弹窗中的表单NModal + C_Form
DETAIL_TABS详情页 + 子表TabNTabs + 多个 C_Table
DASHBOARD数据大屏/统计面板ECharts + NGrid + NStatistic
COMPOSITE多种组合组合使用
4. 字段提取

对每个页面提取 3 类字段(字段名建议 camelCase):

查询字段:

中文名 | 建议字段名(camelCase) | 组件类型 | 备注

组件类型对照(C_Form options 中使用):

原型表现type 值备注
普通输入框input默认类型
下拉选择select配 options 选项数据
单日期date—
日期范围daterange—
月份选择month—
数字输入inputNumber—
开关switch—
级联选择cascader—
树选择treeSelect—

表格列:

列名(中文) | 字段名(camelCase) | 宽度建议 | 是否可排序 | 渲染方式(tag/text/custom)

表单字段(弹窗/独立页面):

中文名 | 字段名(camelCase) | 类型 | 是否必填 | 校验规则 | 组件类型
5. 按钮提取

工具栏按钮(C_ActionBar):

按钮标签 | 类型(primary/default/error/warning) | 图标 | 权限码(可选)

操作列按钮:

按钮标签 | 类型 | 条件显示(show函数描述) | 权限码(可选)

⚠️ 注意事项:

  • Axure HTML DOM 顺序 ≠ 视觉顺序(绝对定位),以截图/实际渲染为准
  • 按钮颜色必须看原型实际颜色:primary=蓝, error=红, warning=橙
  • "新增"类按钮永远排 toolbarActions 第一个
  • 操作列按钮严格与原型一一对应,不可自编
6. 组件匹配

对照 Robot Admin 已有组件:

功能区组件来源
查询表单C_Form@robot-admin/naive-ui-components
操作工具栏C_ActionBar@robot-admin/naive-ui-components
数据表格C_Table@robot-admin/naive-ui-components
图标C_Icon@robot-admin/naive-ui-components
分割面板C_SplitPane@robot-admin/naive-ui-components
树形面板C_Tree@robot-admin/naive-ui-components
折叠面板C_CollapsePanel@robot-admin/naive-ui-components
步骤表单C_Form(steps layout)@robot-admin/naive-ui-components
Tab 表单C_Form(tabs layout)@robot-admin/naive-ui-components
文件上传C_Upload@robot-admin/naive-ui-components
签名C_Signature@robot-admin/naive-ui-components
弹窗NModal / NDrawernaive-ui
分页内置于 C_Table—
消息通知useMessage / useDialognaive-ui

输出格式:page-spec JSON

json
{
  "module": "模块中文名",
  "pages": [
    {
      "name": "kebab-case-页面名",
      "title": "页面中文标题",
      "path": "src/views/[domain]/[module]/[kebab-case-name]/",
      "mode": "LIST | MASTER_DETAIL | TREE_LIST | FORM_PAGE | FORM_MODAL | DETAIL_TABS | DASHBOARD | COMPOSITE",
      "routeMeta": {
        "title": "菜单中文名",
        "icon": "mdi:icon-name",
        "keepAlive": true
      },
      "query": [
        {
          "label": "字段中文名",
          "prop": "fieldName",
          "type": "input | select | date | daterange | ...",
          "options": "选项数据说明(如有)",
          "rules": "校验规则说明(如有)"
        }
      ],
      "columns": [
        {
          "title": "列标题",
          "key": "fieldName",
          "width": 120,
          "sortable": true,
          "render": "tag | text | custom",
          "tagMap": { "值": "success | warning | error | info" }
        }
      ],
      "toolbar": [
        {
          "label": "新增",
          "type": "primary",
          "icon": "mdi:plus",
          "permission": "sys:xxx:add"
        }
      ],
      "operations": [
        {
          "label": "编辑",
          "type": "primary",
          "show": "条件描述",
          "permission": "sys:xxx:edit"
        }
      ],
      "form": [
        {
          "label": "字段中文名",
          "prop": "fieldName",
          "type": "input | select | ...",
          "required": true,
          "rules": "PRESET_RULES.xxx"
        }
      ],
      "subTables": [
        {
          "title": "子表名称",
          "apiSuffix": "queryXxxList",
          "columns": []
        }
      ],
      "notes": "业务备注/特殊逻辑说明"
    }
  ]
}

输出后流转

page-spec JSON
  ├─→ api-contract SKILL → 生成 TypeScript 请求/响应契约与 API 函数
  ├─→ page-codegen SKILL → 生成 index.vue + data.ts + index.scss
  └─→ route-sync SKILL   → 注册到 dynamicRouter.json

注意:page-spec 是后续所有 Skill 的唯一输入源,确保数据准确完整。

© ChenyCHENYU, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .github/skills/prototype-scan of ChenyCHENYU/Robot_Admin.

Open the folder on GitHubat commit d9770ea

Compare with similar skills

Prototype Scan next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Prototype Scan compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Prototype Scan this skillChenyCHENYU/Robot_Admin1k—~1.6kAutomated safety check: PassMIT
Typescript Docsgiuseppe-trisciuoglio/developer-kit355—~2.1kAutomated safety check: NotesMIT
PR Design DocOpenHands/OpenHands90k—~2.4kAutomated safety check: PassMIT
Generate Release Notesteambit/bit18k—~2.2kAutomated safety check: PassCustom licence
Wagmi Feature Developmentwevm/wagmi6.8k—~3.8kAutomated safety check: PassMIT
Pnpm Engineteambit/bit18k—~1.9kAutomated safety check: PassCustom licence

Similar skills

  • Typescript Docs

    giuseppe-trisciuoglio/developer-kit

    Generates comprehensive TypeScript documentation using JSDoc, TypeDoc, and multi-layered documentation patterns for different audiences.

    355 GitHub stars~2.1k tokensUpdated 27 days ago
    DevelopmentAuto-check: notes
  • PR Design Doc

    OpenHands/OpenHands

    For a non-trivial pull request, write a self-contained HTML design doc under the temporary .pr/ directory and link a visibility-appropriate preview in the PR description, so maintainers grasp the…

    90k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check passed
  • Generate comprehensive release notes for Bit from git commits and pull requests.

    18k GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed
  • Walks through adding a Wagmi feature across its layers: a Viem-based core action, TanStack Query options, and React and Vue bindings.

    6.8k GitHub stars~3.8k tokensUpdated 6 days ago
    DevelopmentAuto-check passed
  • Pnpm Engine

    teambit/bit

    Work on the pnpm Rust engine (@pnpm/napi, the pacquet crates) that bit install runs through.

    18k GitHub stars~1.9k tokensUpdated today
    DevelopmentAuto-check passed
  • Cto Advisor

    Ibrahim-3d/orchestrator-supaconductor

    Technical leadership guidance for engineering teams, architecture decisions, and technology strategy.

    380 GitHub starsUsed in 4 repos~2.4k tokens
    DevelopmentAuto-check passed

More from ChenyCHENYU/Robot_Admin

  • API Contract

    ChenyCHENYU/Robot_Admin

    A skill your agent uses when: generating TypeScript API layer (type definitions + request functions) from page-spec JSON or Swagger/OpenAPI docs.

    1k GitHub stars~1.9k tokensUpdated today
    Auto-check passed
  • Branch Sync

    ChenyCHENYU/Robot_Admin

    A skill your agent uses when: upgrading dependencies, adding common features, or when the user explicitly requests branch sync check.

    1k GitHub stars~883 tokensUpdated today
    Auto-check passed
  • Convention Audit

    ChenyCHENYU/Robot_Admin

    A skill your agent uses when: reviewing code for compliance with Robot Admin project conventions, or when generating a compliance report.

    1k GitHub stars~1.5k tokensUpdated today
    Auto-check passed
  • Mock Codegen

    ChenyCHENYU/Robot_Admin

    A skill your agent uses when: generating mock data for development without a backend.

    1k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Page Codegen

    ChenyCHENYU/Robot_Admin

    A skill your agent uses when: generating Vue 3 page code from either a page-spec JSON or a natural language description.

    1k GitHub stars~3.5k tokensUpdated today
    Auto-check passed
  • Route Sync

    ChenyCHENYU/Robot_Admin

    A skill your agent uses when: registering new pages into the dynamic router system.

    1k GitHub stars~1.5k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Prototype Scan

What does Prototype Scan do?

A skill your agent uses when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec…. Prototype Scan is an agent skill from ChenyCHENYU/Robot_Admin. Use when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec JSON for Vue 3 + Naive UI development.

When should I use Prototype Scan?

Prototype Scan fits situations like: : analyzing Axure exported HTML prototype files; detailed design documents to extract page inventory; classify interaction patterns; produce a structured page-spec JSON for Vue 3 + Naive UI development.

How do I install Prototype Scan in Claude Code?

Run `npx skills add ChenyCHENYU/Robot_Admin --skill prototype-scan -a claude-code`. Or copy the skill folder (.github/skills/prototype-scan in ChenyCHENYU/Robot_Admin) into .claude/skills/prototype-scan in your project. Claude Code loads it when a task matches its description.

How do I install Prototype Scan in Codex?

Run `npx skills add ChenyCHENYU/Robot_Admin --skill prototype-scan -a codex`. Or copy the skill folder (.github/skills/prototype-scan in ChenyCHENYU/Robot_Admin) into .agents/skills/prototype-scan in your project. Codex loads it when a task matches its description.

Can I use Prototype Scan in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ChenyCHENYU/Robot_Admin --skill prototype-scan -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prototype-scan, .gemini/skills/prototype-scan, .github/skills/prototype-scan and .opencode/skills/prototype-scan in your project.

What does Prototype Scan need to run?

SKILL.md names no scripts, command-line tools or credentials: Prototype Scan is instructions for the agent only.

Does Prototype Scan access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Prototype Scan safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Prototype Scan use?

Prototype Scan is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Prototype Scan use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Prototype Scan?

Skills that share tags, products or a category with Prototype Scan: Typescript Docs (giuseppe-trisciuoglio/developer-kit, 355 stars), PR Design Doc (OpenHands/OpenHands, 90k stars), Generate Release Notes (teambit/bit, 18k stars) and Wagmi Feature Development (wevm/wagmi, 6.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Prototype Scan?

ChenyCHENYU (a GitHub user) maintains it in ChenyCHENYU/Robot_Admin, which has 1,020 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 8, 2026.

Source: ChenyCHENYU/Robot_Admin on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.