与 Kiro 一起构建：建立工厂自动化门户 React UI

仅供教育工程工作坊使用。本内容为软件架构演练，并非实际生产环境之发布建议。

摘要： 本独立工作坊旨在教授专业开发人员如何使用 Kiro，将最新的工厂自动化门户 (Factory Automation Portal) 重构为 React 与 TypeScript 应用程序。开发人员将学习规格驱动的 UI 分解、深色模式设计 Token、响应式网格转换、无障碍页签导览，以及如何构建可重复使用的 Runtime、工具 (Tools)、受控工作流 (Governed Workflows)、工艺窗口 (Process Windows) 与 Runbook 面板。此外，还包含可展开的分析列、SVG 图表容器、模拟的工艺窗口实时更新，并利用 Kiro Hook 来确保 UI 的一致性、文件化以及回归测试，从而达到生产级别的学习成果。

---

工作坊目的

这个为期 2 小时的工作坊专注于最新门户展示的前端系统设计。开发人员将把原本单一文件的 HTML/CSS/JavaScript 实施转换为易于维护的 React + TypeScript 应用程序，同时完整保留自动化门户的用户体验：

● 置顶列： 包含 AWS 标志、门户识别信息、工作流副标题、绿色实时状态点（Live Status Dot）以及 HKT 时钟。

● 主视觉区块（Hero Section）： 包含工厂工程定位、服务晶片标签（Chips）、任务卡片以及安全边界晶片标签。

● 状态条（Status Strip）： 包含六个精确的门户指标：Runtime 入口点、工具、专家、策略检查、评估集和会话状态。

● 页签导览（Tab Navigation）： 包含六个面板：总览 (Overview)、Runtime、工具 (Tools)、受控工作流 (Governed Workflows)、工艺窗口 (Process Windows) 和 Runbook。

● 总览卡片： 包含 Runtime 工作台、工具库存和受控工作流。

● Runtime 面板： 包含六个 Runtime 卡片、承载数据契约（Payload Contract）和确定性工具模式（Deterministic Tool Pattern）。

● 工具面板： 包含四个工具、工具流程（Tool Flow）和 JSON-RPC 调试承载数据。

● 受控面板： 包含四个专家、策略边界和遥测事件格式。

● 工艺窗口面板： 包含状态砖、可搜索/排序的自动化排行榜、可展开的分析面板、SVG 图表和模拟的实时更新。

● Runbook 面板： 包含 2 小时的构建路径、发布审查（Promotion Gate）和生产待办清单（Production Backlog）。

● 页尾边界： 声明展示数据和图表仅为预留位置（Placeholders），并未实施自主设备控制。

本课程的学习目标不仅仅是「复制 UI」，而是教导开发人员如何使用 Kiro 规格驱动开发（Spec-driven development）、引导文件（Steering files）和 Hook，将密集的原型转换为适合资深开发人员的生产级组件边界。

---

展示涵盖范围地图

本工作坊涵盖了最新门户展示的以下部分：

● 文件中介数据（Metadata）： 标题与描述皆使用 AWS 服务与技术术语：Amazon Bedrock、runtime、tooling、AWS Lambda、IAM、SigV4、Amazon SageMaker、Amazon Timestream、AWS Glue、AWS Lake Formation、AWS DataZone、OpenTelemetry、Apache Iceberg、Etch Process Window Automation。

● 页面外壳（Page Shell）： .page、.shell、深色网格背景、青色（Cyan）和绿色放射状渐层发光层、最大宽度 1440px、边框 #315875，以及深层阴影 0 26px 90px rgba(0,20,36,.72)。

● 固定置顶列： .topbar、.brand、.logo、.brand-main、.brand-sub、.status、.dot；AWS 标志区块；产品名称 FACTORY AUTOMATION PORTAL；副标题 RUNTIME / TOOLS / POLICY / MEMORY / OBSERVABILITY / EVALUATIONS；实时 HKT 状态。

● 主视觉区块（Hero）： 小标题 Automation Portal；主标题 Factory Engineering；服务晶片标签 RUNTIME、TOOLING、AI ASSISTANCE、TOOLS、SIGV4、JSON-RPC、AWS LAMBDA、AMAZON BEDROCK；任务卡片；边界晶片标签 NO EQUIPMENT COMMANDS、EVIDENCE FIRST、BOUNDED MEMORY、HUMAN REVIEW。

● 摘要统计数据： Runtime 入口点 3、工具 4、专家 4、策略检查 2、评估集 5、会话状态 ON。

● 页签导览： Overview、Runtime、Tools、Governed Workflows、Process Windows、Runbook。

● 总览面板： 企业自动化控制平面（Enterprise Automation Control Plane）、Runtime 工作台、工具库存、受控工作流、架构分层、采用说明。

● Runtime 面板： Runtime 自动化、Runtime 卡片、Runtime 承载数据契约、确定性工具模式。

● 工具面板： 工具库存、四个工具、工具流程、process_window_drift 的调试承载数据。

● 受控面板： 受控黄光微影漂移自动化（Governed Photolithography Drift Automation）、四个专家、策略边界、遥测事件格式。

● 工艺窗口面板： 蚀刻工艺窗口自动化排行榜（Etch Process Window Automation Leaderboard）、状态砖、搜索字段、排序按钮、自动化数据列、分析展开、图表。

● Runbook 面板： 自动化门户维运手册、时间轴步骤、发布审查、生产待办清单。

● 响应式断点（Breakpoints）： 桌上型电脑、平板电脑（最大宽度 1120px）和手机（最大宽度 560px）。

---

目标开发人员

● 正在构建云自动化仪表板的前端开发人员。

● 需要将原型 HTML 现代化为具备类型应用程序的全端开发人员。

● 想要学习 Kiro 如何协助处理规格、引导、Hook 和重构的 UI 工程师。

● 需要在改善维维护性的同时，保留 Runtime、工具、策略、内存、可观测性和评估等业务意涵的开发人员。

---

两小时议程

---

架构

React 應用程式
├─ src/app/App.tsx
├─ src/styles/tokens.css
├─ src/styles/layout.css
├─ src/styles/portal.css
├─ src/styles/charts.css
├─ src/data/portal.ts
├─ src/domain/formatting.ts
├─ src/domain/charts.ts
├─ src/domain/simulator.ts
├─ src/components/GraphicWorkspaceShell.tsx
├─ src/components/TopBar.tsx
├─ src/components/HeroPanel.tsx
├─ src/components/StatsStrip.tsx
├─ src/components/PortalTabs.tsx
├─ src/components/OverviewPanel.tsx
├─ src/components/RuntimePanel.tsx
├─ src/components/ToolsPanel.tsx
├─ src/components/GovernedAgentsPanel.tsx
├─ src/components/ProcessWindowPanel.tsx
├─ src/components/StatusTileStrip.tsx
├─ src/components/AutomationCellRow.tsx
├─ src/components/AnalysisPanelShell.tsx
├─ src/components/RunbookPanel.tsx
└─ src/components/FooterBoundary.tsx
Kiro 工作區
├─ .kiro/steering/product.md
├─ .kiro/steering/ui-design-system.md
├─ .kiro/steering/accessibility.md
├─ .kiro/steering/automation-boundary.md
└─ .kiro/specs/factory-portal-ui/
   ├─ requirements.md
   ├─ design.md
   └─ tasks.md

---

门户使用的专业术语

---

步骤 1 — 初始化 React 应用程序

npm create vite@latest kiro-aws-factory-portal -- --template react-ts
cd kiro-aws-factory-portal
npm install
npm install -D vitest @testing-library/react @testing-library/jest-dom
mkdir -p .kiro/steering .kiro/specs/factory-portal-ui src/components src/data src/styles src/domain src/dev

商业逻辑： 原始的门户展示是一个单一的 HTML 文件。这对于快速建立原型很有用，但专业团队需要可分离的组件，以便工厂自动化门户可以在没有高回归风险的情况下进行演进。

代码逻辑： Vite 提供了一个快速的 TypeScript React 基准。文件夹结构将应用程序组合、组件转译、展示数据、领域辅助程序和 CSS Token 分开。

预期结果： npm run dev 启动一个空的 React 应用程序，Kiro 可以对其进行检查和修改。

系统设计原理解释：

● 选择本地 React 应用程序是因为工作坊时间为 2 小时，必须专注于提取 UI 架构，而非云部署。

● 项目从一开始就将数据、组件和样式分开。这可以防止 Kiro 生成一个将门户数据、转译逻辑和设计 Token 混在一起的大型组件。

● 在开始时就安装测试依赖软件包，因为无障碍和转译测试应该是迁移的一部分，而不是在 UI 完成后才加上。

---

步骤 2 — 新增 Kiro 引导文件

建立 .kiro/steering/product.md：

# 產品總覽
建構一個用於開發人員教育的工廠自動化入口網站。
UI 顯示展示架構遙測、製程視窗自動化資料以及受控 AI 工作流模式。
保留原始入口網站的概念：runtime、AWS 工具閘道、工具、AI 協助、策略、記憶體、可觀測性、評估、製程視窗遙測、runbook 以及頁尾邊界。
保留精確的導覽頁籤：Overview、Runtime、Tools、Governed Workflows、Process Windows、Runbook。

建立 .kiro/steering/ui-design-system.md：

# UI 設計系統
使用帶有青色、綠色、紅色、黃色、暗藍灰色和等寬指標文字的深色入口網站樣式。
使用 CSS 變數作為 Token。
保持視覺階層：置頂列 -> 主視覺 -> 統計數據 -> 頁籤 -> 入口網站面板 -> 頁尾。
保留與桌上型電腦、平板電腦和手機等效的頁籤導覽和響應式行為。
將原始的 `.shell` 入口網站框架、深色網格內文背景、卡片、資料列、晶片標籤和 SVG 圖表樣式對映到可重複使用的 CSS 模組中。

建立 .kiro/steering/accessibility.md：

# 無障礙規則
所有搜尋輸入都需要標籤。
頁籤按鈕需要有無障礙名稱和作用中狀態（Active State）。
分析按鈕必須使用 aria-expanded 顯示展開/收合狀態。
不要僅依賴顏色來表示正值/負值；保持加號/減號符號與標籤。
在頁籤、排序、搜尋和分析控制項上保持鍵盤可見焦點。

建立 .kiro/steering/automation-boundary.md：

# 自動化邊界
本入口網站用於工程分析、架構審查和測試自動化規劃。
請勿實作自主設備控制操作。
請勿隱藏策略、記憶體、可觀測性或評估邊界。
始終顯示展示數據和圖表僅為審查工作流的預留位置。
保留邊界晶片標籤：NO EQUIPMENT COMMANDS, EVIDENCE FIRST, BOUNDED MEMORY, HUMAN REVIEW。

给 Kiro 的提示词示例

讀取引導檔案並建立一個規格書，用於將單一檔案的工廠自動化入口網站轉換為 React 組件。保留版面配置區段、深色設計 Token、響應式行為、頁籤、製程視窗排行榜、Runtime/Tools/Governed/Runbook 面板、分析展開、SVG 圖表、狀態磚、runbook 時間軸和頁尾邊界。生成需求、組件設計和實作任務。

商业逻辑： 引导文件告诉 Kiro 哪些原型细节是强制性的：工作流标签、统计数据、页签、搜索、排序、分析展开、发布审查闸门和边界说明。

代码逻辑： 引导文件是 Kiro 应用于未来代码生成的 Markdown 指令。设计系统引导文件直接影响生成的 CSS 和组件边界。

预期结果： Kiro 产出一个组件化的计划，而不是将展示重新编写为另一个大型文件。

系统设计原理解释：

● 产品引导与设计引导分开，因为产品需求描述了必须保留的内容，而设计系统引导则描述了它应该如何呈现和运作。

● 无障碍被视为第一等引导文件，因为自动化仪表板通常是键盘驱动的。

● 自动化边界文件可防止门户被误认为是实际的设备控制应用程序。

---

步骤 3 — 提取门户展示数据

建立 src/data/portal.ts：

export type PortalTab = 'overview' | 'runtime' | 'gateway' | 'governed' | 'leaderboard' | 'runbook';

export type PortalCard = {
  title: string;
  body: string;
  tags: string[];
};

export type ToolCard = {
  name: string;
  desc: string;
  signals: string[];
};

export type SpecialistCard = {
  name: string;
  focus: string;
  tools: string;
};

export type RunbookStep = [string, string, string];

export type AutomationCell = {
  name: string;
  strategy: string;
  indexPct: number;
  deltaPct: number;
  stability: number;
  processFactor: number;
  windowRatePct: number;
  skew: number;
  maxDriftPct: number;
  series: number[];
};

export type StatusTile = {
  key: 'RUNTIME' | 'GATEWAY' | 'POLICY' | 'EVAL';
  move: string;
  state: 'READY' | 'WATCH';
  up: boolean;
  series: number[];
};

export const runtimeCards: PortalCard[] = [
  { title: '同步 Runtime', body: 'app.py 中的 runtime 入口點負責驗證提示詞、植入請求與工作階段上下文、執行由 Amazon Bedrock 支援的 AI 助理，並回傳結構化工程分析。', tags: ['app.py', 'FactoryAutomationApp', 'boto3 invoke'] },
  { title: '串流 Runtime', body: '非同步入口點自 agent.stream_async 產生漸進式區塊，以便入口網站和聊天介面可以逐步轉譯分析。', tags: ['app_streaming.py', 'async', 'partial output'] },
  { title: '大型承載資料 Runtime', body: 'Base64 格式的 Excel 和圖片欄位會被解碼為具型別的文件和圖片內容承載資料，用於綜合工廠工程分析。', tags: ['xlsx', 'png', 'base64'] },
  { title: '承載資料驗證', body: '本地驗證器在 runtime 呼叫前檢查必要的提示詞欄位、選填的中介資料以及未知的頂層欄位。', tags: ['JSON Schema', 'fail fast', 'client contract'] },
  { title: '冒煙測試', body: '確定性測試可驗證承載資料契約和 Python 計算工具，無需模型呼叫、憑證或延遲。', tags: ['pytest', 'deterministic', 'local'] },
  { title: '工作階段清理', body: 'Runtime 工作階段被視為託管資源，並在工作流完成後明確停止。', tags: ['session ID', 'cleanup', 'operations'] }
];

export const tools: ToolCard[] = [
  { name: 'throughput_throughput', desc: '評估在製品 (WIP) 佇列壓力、工具可用性壓力、晶圓吞吐量和急件 (Hot-lot) 優先權。', signals: ['queue depth', 'tool availability', 'wafer throughput', 'hot-lot preference'] },
  { name: 'metrology_drift_widening', desc: '評估線內和批次級漂移擴大、CD-SEM 壓力、產量損失監控和測量產能。', signals: ['inline drift', 'lot drift', 'CD-SEM index', 'yield-loss watch'] },
  { name: 'process_window_drift', desc: '評估製程能力、重疊對準誤差、配方分歧、批次流動和製程視窗漂移。', signals: ['overlay error', 'process capability', 'recipe divergence', 'lot flow'] },
  { name: 'tool_to_tool_mismatch', desc: '評估機台間錯配、待辦壓力、基準偏移和控制上下文。', signals: ['overlay mismatch', 'baseline offsets', 'control context', 'tool matching'] }
];

export const specialists: SpecialistCard[] = [
  { name: '產能吞吐量 (Throughput)', focus: '產能吞吐量穩定性、在製品佇列壓力、急件優先權和工具產能深度', tools: 'bpu_change, throughput_buffer' },
  { name: '計量學 (Metrology)', focus: 'CD-SEM 漂移擴大、產量損失壓力、缺陷風險漂移和測量產能', tools: 'bpu_change' },
  { name: '重疊對準 (Overlay)', focus: '機台間錯配、批次流動、重疊對準漂移、基準偏移和控制上下文', tools: 'control_amount' },
  { name: '蝕刻製程 (Etch-process)', focus: '重疊對準誤差、製程能力、配方分歧、控制器反應和製程視窗漂移', tools: 'bpu_change' }
];

export const runbook: RunbookStep[] = [
  ['0-10', '環境與架構檢查', '確認 AWS 身分、區域、Python 環境、專案資源和角色邊界。'],
  ['10-25', '提示詞與結構描述契約', '建立 runtime 系統提示詞、協調器提示詞、標準工具結構描述和承載資料契約。'],
  ['25-45', '本地代理與工具建構', '實作 AI 協助工具、本地 runtime 邏輯、本地 FastAPI 工具伺服器和發現用戶端。'],
  ['45-65', '驗證、策略與冒煙測試', '執行承載資料驗證器、確定性工具冒煙測試、策略測試和工具結構描述檢查。'],
  ['65-85', '託管部署', '啟動 runtime、打包 Lambda 目標、建立 AWS 工具閘道並註冊工具目標。'],
  ['85-105', '呼叫與偵錯', '使用 boto3 呼叫 runtime、執行工具語意搜尋、直接進行 tools/call 和 tools/list 偵錯。'],
  ['105-115', '受控協調', '執行專家、有限記憶體、回應策略檢查和結構化遙測事件。'],
  ['115-120', '評估與交接', '執行安全和封鎖的評估固件、擷取工作階段 ID、清理和待辦後續任務。']
];

export const automationCells: AutomationCell[] = [
  { name: 'Sofia Garcia', strategy: '蝕刻終點深度多步驟配方控制', indexPct: 18.4, deltaPct: 0.42, stability: 0.73, processFactor: 1.8, windowRatePct: 58, skew: 0.44, maxDriftPct: 18, series: [100,101,100.7,102.2,104,103.2,105.7,106.1,108,109.8,111,112.4,114.9,116.2,118.4] },
  { name: 'Lucia Fernandez', strategy: '黃光微影重疊對準漂移偵測', indexPct: 16.9, deltaPct: 0.88, stability: 0.91, processFactor: 1.7, windowRatePct: 61, skew: 0.31, maxDriftPct: 22, series: [100,102.1,101.5,103.8,102.9,106.4,108.2,107.5,110.8,112.2,111.6,114.1,115.2,116,116.9] },
  { name: 'Carmen Lopez', strategy: '反應室匹配 RF 功率壓力穩定性', indexPct: 14.2, deltaPct: -0.31, stability: 0.68, processFactor: 1.6, windowRatePct: 56, skew: 0.22, maxDriftPct: 25, series: [100,99.4,101.7,103.2,104.8,103.7,106.8,108.9,110.4,109.2,112.6,113.8,115.1,114.8,114.2] },
  { name: 'Elena Martin', strategy: '工廠生產線產量趨勢自動化', indexPct: 11.8, deltaPct: 0.17, stability: 0.62, processFactor: 1.5, windowRatePct: 54, skew: 0.18, maxDriftPct: 17, series: [100,100.8,101.1,102.5,103.2,104,103.8,105.4,106.2,107,108.9,109.3,110.2,111.1,111.8] },
  { name: 'Marta Sanchez', strategy: '配方參數相對穩定性', indexPct: 9.6, deltaPct: 0.09, stability: 0.57, processFactor: 1.4, windowRatePct: 53, skew: 0.09, maxDriftPct: 15, series: [100,100.2,99.9,101,101.8,102.5,102.2,103.6,104.1,105.4,106,106.8,108.2,109,109.6] },
  { name: 'Paula Romero', strategy: '計量特徵集成評分', indexPct: 7.1, deltaPct: -0.12, stability: 0.49, processFactor: 1.3, windowRatePct: 52, skew: -0.04, maxDriftPct: 14, series: [100,100.5,101.2,100.8,102.1,102.7,103.4,104.2,103.8,105,105.4,106.2,106.8,107.3,107.1] },
  { name: 'Ana Torres', strategy: '終點訊號突破警報系統', indexPct: 5.4, deltaPct: 0.28, stability: 0.42, processFactor: 1.2, windowRatePct: 51, skew: 0.12, maxDriftPct: 19, series: [100,99.1,100.4,101.6,100.8,102.2,101.5,103.4,102.8,104.2,103.8,104.7,105.1,105.2,105.4] },
  { name: 'Laura Navarro', strategy: '多機台均值回歸控制', indexPct: 3.8, deltaPct: -0.06, stability: 0.35, processFactor: 1.1, windowRatePct: 49, skew: -0.11, maxDriftPct: 16, series: [100,100.4,99.8,100.9,101.4,100.6,101.8,102.2,101.7,102.8,103.1,102.9,103.6,103.9,103.8] }
];

export const statusTiles: StatusTile[] = [
  { key: 'RUNTIME', move: '+0.38%', state: 'READY', up: true, series: [20,21,20,22,23,23,24,25,24,26] },
  { key: 'GATEWAY', move: '-0.22%', state: 'WATCH', up: false, series: [30,29,31,28,27,26,25,24,23,22] },
  { key: 'POLICY', move: '+0.62%', state: 'READY', up: true, series: [18,18.5,19,18.7,20,21,20.5,22,23,23.5] },
  { key: 'EVAL', move: '+2.18%', state: 'READY', up: true, series: [20,22,21,24,26,25,29,28,32,34] }
];

商业逻辑： 这保留了 Runtime 卡片、工具卡片、专家卡片、runbook 步骤、工艺窗口列数据和状态砖数值，同时为开发人员提供具类型的单一事实来源（Source of Truth）。

代码逻辑： 组件导入具类型的数组，而不是读取 DOM 或解析内嵌的脚本数据。

预期结果： UI 可以转译所有门户区段，包含 8 个自动化单元、4 个状态砖、4 个工具、4 个专家、6 个 Runtime 卡片和 8 个 runbook 步骤，而不需要在组件内部写死（Hardcode）数值。

系统设计原理解释：

● 将数据放置于单独的模块中，因为原始单一文件中的展示数据与转译逻辑是混在一起的。

● 字段名称明确标示了单位：indexPct、deltaPct 和 windowRatePct 是百分比，而 series 包含索引工艺窗口点。

● 状态砖类型将有效的键值限制为展示中的四个自动化通道。

● Runtime 卡片、工具、专家和 runbook 步骤皆已定义类型，因为门户面板应从数据生成，而非复制重复的 JSX。

---

步骤 4 — 建立 CSS 设计 Token

建立 src/styles/tokens.css：

:root {
  --bg: #061018;
  --panel: #081522;
  --panel2: #0c1f31;
  --line: #28465f;
  --soft: rgba(40,70,95,.62);
  --text: #edf6ff;
  --muted: #9fb3c8;
  --muted2: #668197;
  --cyan: #38bdf8;
  --cyan2: #77c7ff;
  --green: #31c48d;
  --red: #f05252;
  --yellow: #f6c85f;
  --orange: #fb923c;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 8% 0, rgba(56,189,248,.19), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(49,196,141,.13), transparent 28%),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}
.metric { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 950; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.cyan { color: var(--cyan2); }
.yellow { color: var(--yellow); }

商业逻辑： 设计 Token 保留了企业级深色门户的外观，同时使视觉语言具备可重复使用性。

代码逻辑： CSS 变量取代了重复的十六进位（Hex）颜色值。组件一致地使用 .metric、.pos、.neg、.cyan 和 .yellow 来表示工艺指标和状态值。

预期结果： 应用程序符合深色网格、青色/绿色/红色/黄色的自动化门户美学。

系统设计原理解释：

● 使用 CSS 变量而非组件局部颜色，以便可以在同一个地方进行视觉变更。

● 指标文字使用等宽数字（Tabular numerals），因为当数据列更新时，数值在视觉上应保持对齐。

● 正值和负值的类别是根据语义命名，而非颜色名称。

---

步骤 5 — 构建置顶列、主视觉与页签导览

建立 src/components/TopBar.tsx：

import { useEffect, useState } from 'react';

export function TopBar() {
  const [clock, setClock] = useState('LIVE');

  useEffect(() => {
    const tick = () => setClock(`LIVE ${new Date().toLocaleString('en-HK', {
      hour12: false,
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })} HKT`);
    tick();
    const id = window.setInterval(tick, 1000);
    return () => window.clearInterval(id);
  }, []);

  return <header className="topbar">
    <div className="brand">
      <div className="logo">AWS</div>
      <div>
        <div className="brand-main">FACTORY AUTOMATION PORTAL</div>
        <div className="brand-sub">RUNTIME / TOOLS / POLICY / MEMORY / OBSERVABILITY / EVALUATIONS</div>
      </div>
    </div>
    <div className="status"><span className="dot" />{clock}</div>
  </header>;
}

建立 src/components/HeroPanel.tsx：

export function HeroPanel() {
  const chips = ['RUNTIME', 'TOOLING', 'AI ASSISTANCE', 'tooling', 'SIGV4', 'JSON-RPC', 'AWS LAMBDA', 'AMAZON BEDROCK'];
  const boundary = ['NO EQUIPMENT COMMANDS', 'EVIDENCE FIRST', 'BOUNDED MEMORY', 'HUMAN REVIEW'];

  return <section className="hero">
    <div className="hero-grid">
      <div>
        <div className="eyebrow">Automation Portal</div>
        <h1>AI-assisted<br /><span>Factory Engineering</span></h1>
        <p className="subhead">專為建構蝕刻製程視窗測試自動化、工具庫存和受控黃光微影漂移協調的資深開發人員所設計的單一自動化入口網站。該入口網站連接了 runtime 部署、工具發現、確定性計算、策略閘門、記憶體摘要、遙測、評估以及企業採用模式。</p>
        <div className="chips">{chips.map(c => <span key={c} className={c.includes('AWS') ? 'chip hot' : 'chip'}>{c}</span>)}</div>
      </div>
      <aside className="panel">
        <div className="panel-title">入口網站任務</div>
        <p><strong>將工作坊資產轉換為企業自動化主控台。</strong> 操作人員可在同一個便於稽核的介面中，獲取部署狀態、工具庫存、受控工作流控制、評估就緒狀態以及原始製程視窗排行榜遙測數據。</p>
        <div className="chips">{boundary.map(c => <span key={c} className={c === 'HUMAN REVIEW' ? 'chip warn' : 'chip ok'}>{c}</span>)}</div>
      </aside>
    </div>
  </section>;
}

商业逻辑： 置顶列与主视觉区块在用户检查面板或工艺窗口数据之前，先为其提供自动化工作区的上下文背景。

代码逻辑： TopBar 拥有时钟状态和清理机制。HeroPanel 是静态的，并从数组中转译晶片标签。

预期结果： 应用程序顶部在视觉上与最新的门户相符，包含实时状态、HKT 时钟、标题、服务晶片标签、任务卡片和边界晶片标签。

系统设计原理解释：

● 时钟逻辑被隔离在 TopBar 中，因为它具有计时器副作用。

● 主视觉区块内容被组件化（即使它是静态的），因为产品文案通常独立于门户面板而变更。

● 工作流晶片标签使用数组而非重复的 JSX，以便 Kiro 或开发人员轻松新增或重新排序标签。

---

步骤 6 — 构建统计数据条、门户面板、工艺窗口列与页尾

建立 StatsStrip：

export function StatsStrip() {
  return <section className="stats">
    <div className="stat"><div className="stat-label">Runtime 入口點</div><div className="stat-val cyan">3</div></div>
    <div className="stat"><div className="stat-label">工具</div><div className="stat-val pos">4</div></div>
    <div className="stat"><div className="stat-label">專家</div><div className="stat-val pos">4</div></div>
    <div className="stat"><div className="stat-label">策略檢查</div><div className="stat-val yellow">2</div></div>
    <div className="stat"><div className="stat-label">評估集</div><div className="stat-val cyan">5</div></div>
    <div className="stat"><div className="stat-label">工作階段狀態</div><div className="stat-val pos">ON</div></div>
  </section>;
}

建立以下组件：

● PortalTabs：控制作用中面板状态和易于键盘操作的页签行为。

● OverviewPanel：转译企业自动化控制平面、Runtime 工作台、工具库存、受控工作流、架构分层和采用说明。

● RuntimePanel：对映 runtimeCards 并显示 Runtime 承载数据契约和确定性工具模式。

● ToolsPanel：对映 tools 并显示工具流程和 JSON-RPC 调试承载数据。

● GovernedAgentsPanel：对映 specialists 并显示策略边界和遥测事件格式。

● ProcessWindowPanel：转译状态砖、搜索、排序控制项、工艺窗口列和分析展开。

● RunbookPanel：转译构建时间轴、发布审查和生产待办清单。

● FooterBoundary：保留自动化边界和「无自主设备操作」说明。

商业逻辑： 这些面板将门户展示转换为可重复使用的企业级导览模型。

代码逻辑： 静态门户数据对映到卡片，而工艺窗口列则保留搜索、排序、可展开的分析、SVG 火花线（Sparkline）和实时模拟行为。

预期结果： UI 显示与展示相同的门户区段，同时其实施变得易于维护和测试。

系统设计原理解释：

● 页签面板可防止页面变成单一的大型组件。

● Runtime、工具和受控内容是独立的审查表面，因为每个部分都属于不同的平台拥有者。

● 工艺窗口面板保留了原始互动式排行榜行为，作为一个专注的组件。

---

步骤 7 — 新增 Kiro Hook 以确保 UI 质量

建立 .kiro/hooks/ui-regression-review.md：

# Hook: UI 回歸審查
觸發條件：當 src/components/*.tsx 或 src/styles/*.css 被儲存時
執行動作：
要求 Kiro 檢查變更是否保留了：置頂列、主視覺、統計數據、頁籤、總覽卡片、runtime 卡片、工具庫存、受控工作流卡片、製程視窗排行榜、runbook 時間軸、響應式標籤、深色 Token、SVG 圖表表面和頁尾邊界。

建立 .kiro/hooks/accessibility-review.md：

# Hook: 無障礙審查
觸發條件：當 src/components/*.tsx 被儲存時
執行動作：
要求 Kiro 審查鍵盤存取、搜尋輸入標籤、頁籤作用中狀態、aria-expanded、焦點可見性以及正值/負值的語意。

建立 .kiro/hooks/automation-boundary-review.md：

# Hook: 自動化邊界審查
觸發條件：當 src/components/*.tsx、src/data/*.ts 或 src/styles/*.css 被儲存時
執行動作：
要求 Kiro 驗證是否未新增自主設備操作文字或控制項，且 evidence-first、策略、記憶體、可觀測性、評估和人工審查邊界仍然清晰可見。

商业逻辑： UI 回归 Hook 有助于保护原型涵盖范围和自动化安全消息。

代码逻辑： Hook 在文件存储事件时执行 Kiro 审查提示词。它们不能取代单元测试，但能提供实时的代理辅助审查。

预期结果： 当组件遗失标签、移除必要区段或破坏互动语义时，Kiro 会建议修正方法。

系统设计原理解释：

● UI 迁移包含许多小细节，因此文件存储审查能在开发上下文记忆犹新时立即捕获回归错误。

● 无障碍审查独立分开，因为视觉上的相似性并不保证键盘或屏幕阅读器的质量。

● 自动化边界审查可防止门户变成暗指具备设备控制功能的 UI。

---

最终实验室挑战

询问 Kiro：

將 React UI 與最新的工廠自動化入口網站展示清單進行比較。產生一個涵蓋版面配置區段、服務晶片標籤、狀態統計數據、頁籤、Runtime 卡片、工具卡片、受控代理卡片、製程視窗列、runbook、響應式、即時時鐘、頁尾邊界、狀態磚、SVG 圖表表面和分析面板的差異清單。然後針對剩餘的差異生成實作任務。

---

完成检查清单

● [ ] 置顶列与 HKT 实时时钟运作正常。

● [ ] 主视觉、任务卡片、晶片标签和页尾边界皆存在。

● [ ] 统计数据条能重现门户的数值。

● [ ] 页签导览具备无障碍设计。

● [ ] Overview、Runtime、Tools、Process Windows 和 Runbook 面板与展示相符。

● [ ] 所有 8 个自动化单元和 4 个状态砖皆已呈现。

● [ ] 所有 6 个 runtime 卡片、4 个工具、4 个专家和 8 个 runbook 步骤皆已呈现。

● [ ] 搜索和排序控制项具备无障碍设计。

● [ ] 可展开的分析列保留了图表和自动化说明插槽。

● [ ] 响应式版面配置涵盖桌上型电脑/平板电脑/行动装置。

● [ ] Kiro Hook 能审查 UI、无障碍和自动化边界的变更。

---

进阶开发人员专属动手操作实验室 — HTML 图形分析

进阶图形分析目标

在本节结束时，进阶开发人员将能够：

● 将门户 HTML 文件的视觉语法逆向工程为可重复使用的设计 Token。

● 解释网格背景、发光效果、边框、面板、状态卡片、页签和 SVG 图表表面如何营造出工厂自动化控制台的感觉。

● 建立一个将 CSS 选择器对映到图形意图的视觉清查清单。

● 验证在桌上型电脑、平板电脑和行动装置断点下的响应式图形行为。

● 建立 Kiro 审查提示词，在重构时保留视觉精确度和自动化边界语言。

来自门户 HTML 文件的图形清查

上传的门户 HTML 使用了一个紧凑但丰富的图形系统：

● 门户框架： .shell 建立了一个有边界 的自动化工作区，带有边框、深色半透明背景和大型方块阴影。

● 分层内文背景： 多个线性渐层建立了一个细微的网格，而放射状渐层则建立了青色和绿色的光晕。

● 固定命令列： .topbar、.logo、.status 和 .dot 确立了实时工作区的直观功能（Affordance）。

● 主视觉组合： .hero、.hero-grid、.eyebrow、h1、.chips 和 .panel 定义了门户的识别信息与边界故事。

● 指标颜色语言： .pos、.neg、.cyan、.yellow 和 .metric 编码了正值、负值、醒目提示、警告和等宽数字文字。

● 页签导览： .nav、.tab、.portal 和 .portal.active 控制了门户的面板模型。

● 看板密度： .row、.cell、.rank、.strategy、.barwrap、.bar 和 .mlabel 建立了一个密集的工艺窗口网格。

● SVG 图表语言： .spark、.eq、.dd、.hist、.line、.fill、.axis、.gridline、.ddarea、.ddline、.bp、.bn、.lbl 提供了可重复使用的图表语义。

● 响应式转换： 在 1120px 和 560px 的媒体查询将看板从类似表格的网格转换为行动装置的数据列卡片。

进阶实验室 1 — 构建视觉 Token 提取报告

目标： 将门户 HTML 的 CSS 数值转换为一份文件化的设计 Token 报告，解释每种颜色、字体、间距、边框、阴影、背景层和图表标记。

建立 docs/html-graphic-token-report.md：

# 工廠自動化入口網站 HTML 視覺 Token 報告

## 顏色 Token
<table>
  <thead>
    <tr>
      <th scope="col">Token</th>
      <th scope="col">數值</th>
      <th scope="col">圖形角色</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>--bg</td>
      <td>#061018</td>
      <td>工作區背景</td>
    </tr>
    <tr>
      <td>--panel</td>
      <td>#081522</td>
      <td>主要面板表面</td>
    </tr>
    <tr>
      <td>--panel2</td>
      <td>#0c1f31</td>
      <td>凸起的控制表面</td>
    </tr>
    <tr>
      <td>--line</td>
      <td>#28465f</td>
      <td>網格與邊框系統</td>
    </tr>
    <tr>
      <td>--soft</td>
      <td>rgba(40,70,95,.62)</td>
      <td>低對比度內部微調分隔線</td>
    </tr>
    <tr>
      <td>--text</td>
      <td>#edf6ff</td>
      <td>主要文字</td>
    </tr>
    <tr>
      <td>--muted</td>
      <td>#9fb3c8</td>
      <td>次要文字</td>
    </tr>
    <tr>
      <td>--muted2</td>
      <td>#668197</td>
      <td>三級文字</td>
    </tr>
    <tr>
      <td>--cyan</td>
      <td>#38bdf8</td>
      <td>互動式發光與主要醒目提示</td>
    </tr>
    <tr>
      <td>--cyan2</td>
      <td>#77c7ff</td>
      <td>次要青色標題醒目提示</td>
    </tr>
    <tr>
      <td>--green</td>
      <td>#31c48d</td>
      <td>正值指標狀態與即時狀態點</td>
    </tr>
    <tr>
      <td>--red</td>
      <td>#f05252</td>
      <td>負值指標狀態與漂移壓力</td>
    </tr>
    <tr>
      <td>--yellow</td>
      <td>#f6c85f</td>
      <td>警告與審查強調色</td>
    </tr>
    <tr>
      <td>--orange</td>
      <td>#fb923c</td>
      <td>保留的警報強調色</td>
    </tr>
  </tbody>
</table>

## 字體排版
- `--mono` 用於指標、控制項、狀態、程式碼區塊、遙測範例和密集標籤。
- `--sans` 用於內文、主視覺文字、卡片描述和製程模式描述。
- `.metric` 透過 `font-variant-numeric: tabular-nums` 啟用等寬數字掃描。

## 表面語言
- 深色面板使用 `--line` 邊框進行分隔。
- 軟性內部底線使用 `--soft` 以減少視覺雜訊。
- 青色發光保留給作用中控制項、主視覺強調、即時工作區識別和時間軸圓點。
- 綠色和紅色與加/減符號配對，因此其意涵不僅僅依賴顏色。

Kiro 提示词：

分析入口網站 HTML CSS 並建立一份設計 Token 報告。解釋每個根變數、面板顏色、邊框、陰影、字型系列、指標類別、正/負狀態、頁籤狀態和 SVG 圖表類別的視覺目的。為 React 開發人員保持報告的實作導向。

预期结果： 开发人员可以在变更原始视觉系统之前先对其进行描述。

进阶实验室 2 — 将分层背景重构为组件

目标： 将门户文件的网格与发光背景隔离到一个具名的 React 外壳类别中，以便对其进行测试和重复使用。

建立 src/components/GraphicWorkspaceShell.tsx：

import type { ReactNode } from 'react';

export function GraphicWorkspaceShell({ children }: { children: ReactNode }) {
  return (
    <main className="page graphic-workspace" id="top">
      <section className="shell graphic-portal-shell">{children}</section>
    </main>
  );
}

建立 src/styles/graphic-background.css：

.graphic-workspace {
  min-height: 100vh;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 8% 0, rgba(56,189,248,.19), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(49,196,141,.13), transparent 28%),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.graphic-portal-shell {
  max-width: 1440px;
  border: 1px solid #315875;
  background: rgba(4,14,23,.96);
  box-shadow: 0 26px 90px rgba(0,20,36,.72);
  overflow: hidden;
}

图形逻辑： 前两个渐层建立了网格。接下来的两个放射状渐层建立了具有氛围深度的青色和绿色。最后一个颜色层锚定了深色自动化环境。

Kiro 提示词：

將入口網站 HTML 內文背景和外殼框架提取到具名的 React/CSS 外殼類別中。保留精確的漸層順序、background-size 行為、框架邊框、半透明外殼表面、1440px 最大寬度和方塊陰影。新增註釋以解釋每層的圖形角色。

预期结果： 背景变成一个可携式的视觉基元，而不是未经文件的内文样式。

进阶实验室 3 — 建立视觉阶层标记图层

目标： 新增一个仅限开发环境使用的图层，用于标记视觉区域：topbar、hero、stats、tabs、portal panel、status tiles、controls、board、detail panels、runbook 和 footer。

建立 src/dev/VisualHierarchyOverlay.tsx：

const zones = [
  ['topbar', '命令 / 即時狀態'],
  ['hero', '入口網站識別資訊與服務晶片標籤'],
  ['stats', '自動化摘要指標'],
  ['nav', '入口網站頁籤導覽'],
  ['portal', '作用中內容面板'],
  ['market', 'Runtime/Tools/Policy/Eval 狀態磚'],
  ['controls', '搜尋與權重排序控制項'],
  ['board', '密集製程視窗表格'],
  ['detail', '展開的分析面板'],
  ['timeline', 'Runbook 時間軸'],
  ['footer', '邊界與導覽']
] as const;

export function VisualHierarchyOverlay() {
  return (
    <aside className="visual-audit-panel" aria-label="視覺階層稽核面板">
      <h3>圖形階層</h3>
      <ol>
        {zones.map(([selector, role]) => (
          <li key={selector}><code>.{selector}</code> — {role}</li>
        ))}
      </ol>
    </aside>
  );
}

新增开发环境 CSS：

.visual-audit-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 99;
  width: min(380px, calc(100vw - 24px));
  border: 1px solid var(--line);
  background: rgba(4, 16, 26, .94);
  color: var(--text);
  padding: 12px;
  font-family: var(--mono);
  font-size: 11px;
}

预期结果： 开发人员学会将页面视为视觉区域的阶层结构，而不仅仅是组件清单。

进阶实验室 4 — 响应式视觉行为审计

目标： 验证 HTML 断点在门户变更图形图案时，是否仍保留视觉意涵。

建立 docs/responsive-graphic-audit.md :

# 工廠自動化入口網站 響應式圖形稽核

## 桌上型電腦檢視 (Desktop)
- 看板標頭列清晰可見。
- 十欄網格支援自動化單元比較。
- 主視覺區塊使用雙欄組合。
- 總覽/runtime/工具/專家卡片在適用的地方使用三欄網格。
- Runtime/Tools/Policy/Eval 狀態磚使用四欄。
- 頁尾使用雙欄版面配置，右側帶有呼籲字句（CTA）。

## 平板電腦檢視 (Tablet)，最大寬度 1120px
- 主視覺、卡片網格和圖表網格收合為單欄。
- 統計數據變為雙欄。
- 狀態磚變為雙欄。
- 看板標頭隱藏，且每列公開行動裝置標籤。
- 指標網格變為雙欄。
- 分析按鈕展開至全寬。

## 手機檢視 (Phone)，最大寬度 560px
- 頁面邊距縮小。
- 狀態文字和品牌副標題隱藏以保護空間。
- 統計數據和狀態磚使用單欄卡片。
- 排序按鈕變為雙欄網格。
- 頁尾 CTA 堆疊在邊界說明下方。
- 指標網格變為單欄。

Kiro 提示词：

從入口網站 HTML 建立一個響應式圖形稽核。針對每個斷點，記錄哪些視覺結構發生了變化、為什麼該變化能保護可讀性，以及回歸測試應該驗證什麼。

预期结果： 响应式设计被视为图形行为，而不仅仅是 CSS 机制。

进阶实验室 5 — 门户外观的视觉回归检查清单

目标： 建立一个开发人员在接受 UI 重构前可以使用的检查清单。

建立 docs/html-look-regression-checklist.md：

# 工廠自動化入口網站 外觀回歸檢查清單

## 必須保留
- 帶有青色和綠色發光層的深色網格內文背景。
- 入口網站外殼邊框、最大寬度、半透明背景和深層陰影。
- 帶有 AWS 標誌、綠色即時點、品牌名稱和工作流副標題的固定置頂列。
- 帶有青色次要文字行的高對比度大型主視覺標題。
- 具有正常和熱點（Hot）狀態的服務晶片標籤。
- 邊界晶片標籤：NO EQUIPMENT COMMANDS, EVIDENCE FIRST, BOUNDED MEMORY, HUMAN REVIEW。
- 六個帶有正確標籤和數值的摘要統計數據。
- 具有作用中狀態和懸停（Hover）狀態的頁籤導覽。
- Overview、Runtime、Tools、Governed Workflows、Process Windows 和 Runbook 面板。
- 使用等寬數字的密集指標排版。
- 帶有加號和綠色的正值。
- 帶有減號和紅色的負值。
- 看板列分隔線和軟性內部單元格分隔線。
- 當標頭列消失時顯示行動裝置標籤。
- 用於火花線、索引路徑、漂移吃水線和每日差值直方圖的 SVG 圖表表面。
- 頁尾邊界的可見性。

## 絕不可引入
- 自主設備控制操作項。
- 隱藏的策略、記憶體、可觀測性或評估邊界。
- 缺乏文字符號或標籤的純顏色意涵。
- 會隱藏頁尾邊界或分析按鈕的斷點行為。

Kiro 提示词：

將 React UI 與入口網站 HTML 圖形系統進行比較。產生一個涵蓋背景、外殼、置頂列、主視覺、晶片標籤、統計數據、頁籤、卡片、狀態磚、控制項、看板列、響應式標籤、詳細資訊面板、runbook、SVG 圖表和頁尾邊界的回歸檢查清單。

进阶最终挑战 — HTML 图形精确度审查

询问 Kiro：

針對 React UI 與最新工廠自動化入口網站 HTML 檔案進行圖形精確度審查。僅專注於視覺系統行為：背景層、入口網站外殼、顏色語意、字體排版、間距、階層、響應式斷點、密集製程視窗版面配置、頁籤狀態、焦點狀態、SVG 圖表表面和頁尾邊界可見性。產生一個按嚴重程度排序的差異清單。

进阶图形分析完成检查清单

● [ ] 设计 Token 报告解释了门户 HTML 视觉系统。

● [ ] 背景和门户外壳已提取到具名的可重复使用类别中。

● [ ] 视觉阶层标记图层文件化了页面的图形区域。

● [ ] 响应式审计涵盖了这两个断点层级。

● [ ] 回归检查清单保护了原始外观和页尾边界。

● [ ] UI 审查确认未引入任何自主设备控制界面。