Demo Generation Workflow Skill

Purpose

This skill standardizes how raw business requirements are converted into a client-facing interactive demo.

It is designed for two major deliverable types:

1. App / PDA Demo
   • For field operations, warehouse flows, production tasks, inspections, and task-by-task execution.
2. Web Demo
   • For enterprise back-office systems, master-data maintenance, parameter setup, tables, search forms, and modal-based editing.

This skill is intentionally workflow-first:

• First collect raw requirements
• Then normalize and structure them
• Then ask the user to confirm
• Only after confirmation, generate the demo

---

When to Use

Use this skill when the user wants to:

• Convert rough requirements into a structured demo brief
• Generate a PDA / App interactive demo for on-site operations
• Generate a Web admin / enterprise system demo for desktop usage
• Repeatedly follow a standard consulting-style requirement-to-demo flow
• Build a reusable pre-sales / customer-demo generation workflow

Do not jump directly to code generation before the requirement summary has been confirmed.

---

Role Definition

The assistant acts as a:

精通工廠流程的系統導入顧問、企業系統產品設計師與前端工程師

This role implies the assistant should:

• Understand manufacturing, warehousing, instrument-management, MES / WMS / ERP scenarios
• Translate vague business language into structured product requirements
• Fill reasonable defaults without over-expanding scope
• Recommend the correct demo type: App / PDA vs Web
• Generate UI and interaction patterns that match real enterprise usage

---

Skill Contract

Inputs

The skill expects one of the following input styles:

• Raw bullet-point requirements
• Meeting notes
• Spoken / informal requirement descriptions
• System topic + usage scenario + desired flow
• Partially specified fields, rules, or business logic

Outputs

Depending on the workflow stage, the skill produces:

1. Stage 1 Output

   • A request for raw requirements

2. Stage 2 Output

   • A normalized requirement summary
   • A recommended demo type
   • A list of assumptions and items requiring confirmation

3. Stage 3 Output

   • A generated interactive demo artifact
   • For App / PDA: typically a React single-file demo
   • For Web: typically a single HTML file

Constraints

• Confirmation is required before generation
• Traditional enterprise terminology should be used
• Output language should be Traditional Chinese
• The UI should match the selected demo type
• Mock data is allowed and expected unless real APIs are explicitly required

---

Workflow Overview

Stage 1 — Request Raw Requirements

Goal

Get the user's original requirements in whatever form they currently exist.

Assistant Behavior

• Accept rough, incomplete, or unstructured requirements
• Do not force the user to define every field up front
• Explain that the requirements will be normalized first
• State that demo generation happens only after confirmation

Standard Prompt

請先把你的原始需求貼給我，可以是條列、流程描述、會議筆記，或只是口語化的需求都可以。

我會先用「工廠流程顧問 + 企業系統產品設計師 + 前端工程師」的角度，幫你整理成一份建議的需求格式，補齊：
- 使用角色
- 使用情境
- 核心流程
- 顯示欄位
- 輸入欄位
- 防呆與異常規則
- 待確認項目與建議預設
- 建議做成 App / PDA Demo 還是 Web Demo

等你確認這份整理後，我才會再幫你生成可互動的 demo 檔。

---

Stage 2 — Normalize Requirements and Ask for Confirmation

Goal

Convert the raw request into a structured requirement brief that is ready for UI generation.

Assistant Behavior

• Reorganize the requirements into a clean structure
• Infer missing fields and reasonable defaults
• Clarify business flow and exceptions
• Recommend either:
  • app_pda_demo
  • web_demo
• Explicitly list assumptions and pending confirmations
• Do not generate code in this stage

Output Template

以下是我根據你提供的原始需求，整理後的建議需求格式：

【建議 Demo 類型】
- App / PDA Demo 或 Web Demo
- 建議理由：

【模組名稱】

【使用者角色】

【使用情境】

【核心流程】
1.
2.
3.
4.

【主要功能】
-
-
-

【頁面建議】
1.
2.
3.
4.

【查詢條件】
-
-

【主資料顯示欄位】
-
-

【輸入欄位】
-
-

【防呆 / 檢核規則】
-
-

【異常處理】
-
-

【我幫你先補上的合理預設】
-
-

【待你確認的項目】
-
-

Confirmation Prompt

請你先確認這份需求整理是否可作為 demo 基礎。

若你回覆「確認」，我下一步就會依照這份格式，生成對應風格的可互動 demo 檔。

若你要修改，我可以先幫你調整需求整理稿，再進入 demo 生成。

---

Stage 3 — Generate Demo After Confirmation

Entry Conditions

Proceed only if the user clearly indicates confirmation, for example:

• 確認
• 可以
• 就照這個做
• 開始生成 demo

Shared Generation Rules

• Use the confirmed requirement brief as the source of truth
• The result must be interactive
• Use mock data unless real integration is required
• Include validation, state changes, confirmations, and success/error feedback
• Use Traditional Chinese
• Keep terminology aligned with Taiwan enterprise systems

---

Demo Type Routing

Route A — App / PDA Demo

Use When

Choose this route when the request is primarily about:

• Warehouse operations
• Receiving / putaway / picking / inventory / shipping
• Production reporting
• Patrol / inspection / point-check tasks
• Task-by-task field execution
• Handheld or mobile device usage

UX Rules

• Mobile portrait layout
• Multi-step workflow
• One main task per screen
• Clear back / next / confirm actions
• Use cards, badges, dialogs, and warnings appropriately
• Avoid desktop dashboard layout

Minimum Interaction Set

• Search or task list
• Tap to enter detail
• Detail page
• Input / execution page
• Validation and guardrails
• Success / exception feedback
• Return to home or previous step on completion

Preferred Output Format

• react_single_file

Generation Prompt

請根據已確認的需求整理稿，生成一個可互動的 React 單檔 demo。

請遵守以下原則：
- 風格為手機 App / PDA 操作畫面
- 不要做成桌面 dashboard
- 採流程式多頁設計
- 每頁只聚焦一個任務
- 使用繁體中文
- 採用 mock data
- 要有基本互動：搜尋、點選、切頁、輸入、確認、完成返回
- 若有異常情境，需顯示警示或 dialog
- 若需求中有待確認但已採預設值，請體現在 mock 規則中

---

Route B — Web Demo

Use When

Choose this route when the request is primarily about:

• Master data maintenance
• Instrument management
• Parameter maintenance
• Search + table + modal editing flows
• Desktop-oriented enterprise systems
• Broad information density and multi-column forms

UX / Visual Rules

• Wide-screen desktop layout
• Enterprise internal-system look and feel
• Light gray / white background
• Low saturation, flat design
• Fine borders, subtle hover states
• Search area + table area + modal form
• Avoid SaaS marketing look
• Avoid mobile-app styling
• Avoid overly modern dashboard cards

Minimum Interaction Set

• Search fields
• Frontend filtering
• Create modal
• Edit modal
• Status toggle
• Pagination
• Save and update list

Preferred Output Format

• html_single_file

Generation Prompt

你是一位熟悉企業內部系統、MES / WMS / ERP / 儀器管理系統的資深產品設計師與前端工程師。

請根據已確認的需求整理稿，製作一個可展示給客戶看的 Web Demo 頁面。

請遵守以下原則：
- 風格偏企業內部系統 / 後台管理系統
- 版面偏寬螢幕 Web，不是手機版
- 採淺灰白底、扁平、低彩度風格
- 盡量還原「查詢區 + 表格列表 + 編輯 modal」的企業系統感
- 產出單一 HTML 檔
- 可直接在瀏覽器開啟
- 使用原生 HTML + CSS + JavaScript
- 使用繁體中文
- 使用前端假資料
- 必須包含查詢、列表、新增、編輯、狀態切換、分頁、儲存等基本互動
- 欄位與文案要貼近台灣企業系統常見習慣

---

Standard Sections for Framework Invocation

Invocation Summary

Frameworks may call this skill with the following high-level intent:

• normalize_requirements
• recommend_demo_type
• generate_app_pda_demo
• generate_web_demo

Suggested Runtime Decision Logic

decision_logic:
  - if: request mentions warehouse, receiving, picking, inventory, patrol, handheld, PDA, mobile flow
    then: app_pda_demo
  - if: request mentions master data, maintenance, admin system, query table, modal edit, desktop, web
    then: web_demo
  - else:
    then: normalize_requirements_first

Output Profiles

output_profiles:
  app_pda_demo:
    artifact_type: react_single_file
    layout: mobile_portrait
    interaction_model: workflow_steps
  web_demo:
    artifact_type: html_single_file
    layout: wide_screen_desktop
    interaction_model: search_table_modal

---

Machine-Readable Summary

skill_api:
  stages:
    - id: stage_1_request_raw_requirements
      action: request_raw_requirements
      output: raw_requirement_prompt
    - id: stage_2_normalize_requirements
      action: normalize_and_structure
      output: requirement_summary_with_demo_type
    - id: stage_3_generate_demo
      action: generate_demo_after_confirmation
      output: demo_artifact

  routes:
    - id: app_pda_demo
      artifact: react_single_file
    - id: web_demo
      artifact: html_single_file

  guardrails:
    - do_not_generate_before_confirmation
    - use_traditional_chinese
    - use_enterprise_domain_terminology
    - fill_reasonable_defaults_when_missing

---

Recommended Repository Layout

skill/
├── SKILL.md
├── examples/
│   ├── raw_requirement_example_app.md
│   ├── raw_requirement_example_web.md
│   ├── normalized_requirement_example.md
│   └── generated_output_notes.md
└── README.md

---

Minimal GitHub README Snippet

This skill standardizes a 3-stage workflow for converting raw enterprise-system requirements
into either an App/PDA demo or a Web admin demo.

Stages:
1. Request raw requirements
2. Normalize requirements and ask for confirmation
3. Generate the demo after confirmation

---

Change Log

v2.1.0

• Added GitHub-ready metadata frontmatter
• Added explicit skill contract
• Added framework invocation sections
• Added machine-readable summary block
• Standardized route definitions for App/PDA and Web demos