与 Kiro 一起开发：重建 CME Direct 风格的量化损益排行榜 UI

摘要： 本独立工作坊旨在教导专业开发人员使用 Kiro，将上传的 CME Direct 风格量化排行榜重建为 React 与 TypeScript 应用程序。开发人员将学习规格驱动的 UI 拆解、深色模式设计令牌 (Design Tokens)、响应式网格转换、无障碍搜索与排序控件、可复用的市场卡片、排行榜数据行、可展开的分析面板，以及用于保持 UI 一致性、文档化和产品级学习成果回归测试的 Kiro Hooks。

工作坊目的

这个 2 小时的工作坊专注于示范项目的前端系统设计。开发人员将把单文件的 HTML/CSS/JavaScript 实现转换为可维护的 React + TypeScript 应用程序，同时保留交易工作空间的用户体验：顶部栏、主视觉区 (Hero)、状态统计、市场卡片、控件、排行榜数据行、可展开的分析面板、SVG 图表容器、页尾免责声明、响应式布局以及实时钟表行为。

学习目标不只是“复制 UI”，而是教导开发人员如何使用 Kiro 规格驱动开发 (Spec-driven development)、指引文件 (Steering files) 和 Hooks，将密集的原型转化为产品级的组件边界。

示范范围地图

本工作坊涵盖上传的 HTML 示范项目中的以下部分：

• 页面外壳： .page、.terminal、深色网格背景、放射状高光背景。
• 固定顶部栏： CME 标志、产品名称、工作流程副标题、实时绿色状态点、HKT 时钟。
• 主视觉区 (Hero)： Institutional Trading Challenge、中文标题、副标题、工作流程标签、创始人想法卡片。
• 摘要统计数据： 参与者 (Participants)、最佳夏普值 (Best Sharpe)、平均胜率 (Avg Win Rate)、最佳 NAV (Best NAV)、工作空间 RFQ 开启 (Workspace RFQ ON)。
• 市场数据条： ES、CL、GC、BTC 卡片，带有“BID STACK (买盘堆叠)”和“OFFER HIT (卖盘被击)”标签。
• 控件： 搜索框以及用于 NAV、DAILY、SR、PF、WR、MAX DD 的排序按钮。
• 排行榜网格： 排名、姓名、策略、NAV、每日收益、走势图 (Sparkline)、SR、PF、WR、Max DD、分析。
• 可展开的详细信息面板容器布局。
• 支持桌面电脑、平板电脑和移动设备的响应式断点。
• 页尾免责声明与行动号召 (CTA)。

目标开发人员

• 构建金融仪表板的前端开发人员。
• 将原型 HTML 现代化为类型化应用程序的全栈开发人员。
• 学习 Kiro 如何协助处理规格、指引、Hooks 和重构的 UI 工程师。
• 需要在提高可维护性的同时，保留金融 UI 业务含义的开发人员。

两小时议程

架构

React application
├─ src/app/App.tsx
├─ src/styles/tokens.css
├─ src/styles/layout.css
├─ src/data/demoBoard.ts
├─ src/components/TopBar.tsx
├─ src/components/HeroPanel.tsx
├─ src/components/StatsStrip.tsx
├─ src/components/MarketStrip.tsx
├─ src/components/LeaderboardControls.tsx
├─ src/components/LeaderboardTable.tsx
├─ src/components/TraderRow.tsx
├─ src/components/AnalysisPanelShell.tsx
└─ src/components/FooterDisclaimer.tsx

Kiro workspace
├─ .kiro/steering/product.md
├─ .kiro/steering/ui-design-system.md
├─ .kiro/steering/accessibility.md
└─ .kiro/specs/leaderboard-ui/
   ├─ requirements.md
   ├─ design.md
   └─ tasks.md

此 UI 中使用的金融与交易工作空间术语

---

步骤 1 — 创建 React 应用程序脚手架

npm create vite@latest kiro-cme-quant-board -- --template react-ts
cd kiro-cme-quant-board
npm install
npm install -D vitest @testing-library/react @testing-library/jest-dom
mkdir -p .kiro/steering .kiro/specs/leaderboard-ui src/components src/data src/styles

业务逻辑： 原始示范项目是一个单文件 HTML。这对于快速创建原型很有用，但专业开发人员需要可分离的组件，以便交易看板演进时不会带来高回归风险。

代码逻辑： Vite 提供了一个快速的 TypeScript React 基础。文件夹结构分离了应用程序组合、组件渲染、示范数据和 CSS 设计令牌。

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

系统设计原理解析：

1. 选择本地 React 应用程序是因为工作坊只有 2 小时，必须专注于提取 UI 架构，而不是云端部署。开发人员稍后仍可将静态构建部署到 Amazon S3 和 CloudFront。
2. 项目从一开始就分离了 data、components 和 styles。这可以防止 Kiro 生成一个将交易数据、渲染逻辑和设计令牌混在一起的巨大组件。
3. 测试依赖项在开始时就已安装，因为无障碍和渲染测试应该是迁移的一部分，而不是在 UI 完成后才补上。

---

步骤 2 — 添加 Kiro 指引文件 (Steering Files)

创建 .kiro/steering/product.md：

# 产品概述

创建一个受 CME Direct 启发的量化损益排行榜，用于开发人员教育。
UI 仅显示示范交易分析，不得作为投资建议。
保留原始概念：期货、期权、大宗交易、RFQ、实时 NAV、损益分析、市场卡片、可排序排行榜和可展开分析。

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

# UI 设计系统

使用带有青色、绿色、红色、黄色、柔和蓝灰色和等宽指标文字的深色终端机风格。
使用 CSS 变量作为设计令牌。
保持视觉层级：顶部栏 -> 主视觉区 -> 统计数据 -> 市场数据条 -> 控件 -> 看板 -> 页尾。
使用等同于桌面电脑、平板电脑和手机的响应式断点。

创建 .kiro/steering/accessibility.md：

# 无障碍规则

所有搜索输入都需要标签。
排序按钮需要具备可访问名称和活动状态。
分析按钮必须使用 aria-expanded 显示展开/折叠状态。
不要仅依赖颜色来表示正/负值；保留加号/减号符号。

给 Kiro 的提示词示例

阅读指引文件并创建一个规格，将单文件的 CME Direct 风格量化看板转换为 React 组件。保留布局区块、深色设计令牌、响应式行为、排序/搜索控件、分析展开、市场卡片和页尾免责声明。生成需求、组件设计和实现任务。

业务逻辑： 指引文件告诉 Kiro 哪些原型细节是强制性的：工作流程标签、统计数据、搜索、排序和免责声明。这可以防止 AI 简化掉领域含义。

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

预期结果： Kiro 产生一个组件化的计划，而不是将示范项目重写为另一个大文件。

系统设计原理解析：

1. 产品指引和设计指引是分离的，因为产品需求描述的是必须保留什么，而设计系统指引描述的是它应该长什么样以及如何运作。
2. 无障碍被视为一等公民的指引文件，因为金融仪表板通常是键盘驱动的，交易员需要在压力下快速消费数据。
3. 指引文件刻意包含了原始的区块层级结构，以便 Kiro 可以将每个原型区块对应到组件中，避免意外遗失功能。

---

步骤 3 — 提取 UI 的示范数据

创建 src/data/demoBoard.ts：

export type TraderRow = {
    name: string;
    strategy: string;
    navPct: number;
    dailyPct: number;
    sharpe: number;
    profitFactor: number;
    winRatePct: number;
    skew: number;
    maxDrawdownPct: number;
    series: number[];
};

export type MarketTile = {
    symbol: 'ES' | 'CL' | 'GC' | 'BTC';
    move: string;
    state: 'BID STACK' | 'OFFER HIT';
    up: boolean;
    series: number[];
};

export const traders: TraderRow[] = [
    { name: 'Sofia Garcia', strategy: 'Cross-Asset Convex Macro Alpha', navPct: 18.4, dailyPct: 0.42, sharpe: 0.73, profitFactor: 1.8, winRatePct: 58, skew: 0.44, maxDrawdownPct: 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: 'Crypto Momentum Rotation', navPct: 16.9, dailyPct: 0.88, sharpe: 0.91, profitFactor: 1.7, winRatePct: 61, skew: 0.31, maxDrawdownPct: 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: 'Crypto Carry & Volatility', navPct: 14.2, dailyPct: -0.31, sharpe: 0.68, profitFactor: 1.6, winRatePct: 56, skew: 0.22, maxDrawdownPct: 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: 'Global Macro Trend Rider', navPct: 11.8, dailyPct: 0.17, sharpe: 0.62, profitFactor: 1.5, winRatePct: 54, skew: 0.18, maxDrawdownPct: 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: 'Rates & FX Relative Value', navPct: 9.6, dailyPct: 0.09, sharpe: 0.57, profitFactor: 1.4, winRatePct: 53, skew: 0.09, maxDrawdownPct: 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: 'Equity Factor Ensemble', navPct: 7.1, dailyPct: -0.12, sharpe: 0.49, profitFactor: 1.3, winRatePct: 52, skew: -0.04, maxDrawdownPct: 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: 'Commodity Breakout System', navPct: 5.4, dailyPct: 0.28, sharpe: 0.42, profitFactor: 1.2, winRatePct: 51, skew: 0.12, maxDrawdownPct: 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: 'Multi-Asset Mean Reversion', navPct: 3.8, dailyPct: -0.06, sharpe: 0.35, profitFactor: 1.1, winRatePct: 49, skew: -0.11, maxDrawdownPct: 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 markets: MarketTile[] = [
    { symbol: 'ES', move: '+0.38%', state: 'BID STACK', up: true, series: [20,21,20,22,23,23,24,25,24,26] },
    { symbol: 'CL', move: '-0.22%', state: 'OFFER HIT', up: false, series: [30,29,31,28,27,26,25,24,23,22] },
    { symbol: 'GC', move: '+0.62%', state: 'BID STACK', up: true, series: [18,18.5,19,18.7,20,21,20.5,22,23,23.5] },
    { symbol: 'BTC', move: '+2.18%', state: 'BID STACK', up: true, series: [20,22,21,24,26,25,29,28,32,34] }
];

业务逻辑： 这保留了示范项目中所有的参与者和市场卡片信息，同时为开发人员提供了一个类型化的单一事实来源。

代码逻辑： 数据模块对交易员数据行和市场卡片使用 TypeScript 类型。组件导入类型化数组，而不是读取 DOM 或解析嵌入的脚本数据。

预期结果： UI 可以渲染所有 8 个参与者和 4 个市场，而无需在组件内部硬编码数值。

系统设计原理解析：

1. 数据被放置在独立模块中，因为原始的单文件原型中数据和渲染混在一起。将其提取出来是迈向可维护架构的第一步。
2. 字段名称明确了单位：navPct、dailyPct 和 winRatePct 是百分比，而 series 包含索引 NAV 点。这可以防止格式化时产生混淆。
3. 市场卡片类型将有效代码限制为四个示范商品，这有助于 Kiro 生成更安全的代码并减少组件 Props 中的意外拼写错误。

---

步骤 4 — 创建 CSS 设计令牌 (Design Tokens)

创建 src/styles/tokens.css：

:root {
    --bg: #061018;
    --panel: #081522;
    --panel2: #0c1f31;
    --line: #28465f;
    --soft: rgba(40,70,95,.62);
    --text: #edf6ff;
    --muted: #9fb3c8;
    --cyan: #38bdf8;
    --cyan2: #77c7ff;
    --green: #31c48d;
    --red: #f05252;
    --yellow: #f6c85f;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Noto Sans SC", 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 10% 0, rgba(56,189,248,.2), transparent 30%),
            radial-gradient(circle at 88% 10%, rgba(49,196,141,.12), transparent 26%),
            var(--bg);
    background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.metric { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 900; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.cyan { color: var(--cyan2); }

业务逻辑： 设计令牌保留了机构交易终端的外观，同时使视觉语言可复用。

代码逻辑： CSS 变量取代了重复的十六进制值。组件可以一致地对金融数字使用 .metric、.pos 和 .neg。

预期结果： 应用程序符合深色网格、青色/绿色/红色的交易看板美学。

系统设计原理解析：

1. 使用 CSS 变量而不是组件局部颜色，以便可以在一个地方进行视觉变更。这对于可能需要品牌或无障碍调整的仪表板非常重要。
2. 指标文字使用等宽数字 (Tabular Numerals)，因为金融数值在数据行更新时应保持视觉对齐。这提高了实时更新下的可读性。
3. 正值和负值类别是根据语义命名的，而不是颜色名称。这使设计更容易适应非红/绿主题或色盲模式。

---

步骤 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('zh-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">CME</div><div>
            <div className="brand-main">CME DIRECT STYLE QUANT BOARD</div>
            <div className="brand-sub">FUTURES / OPTIONS / BLOCKS / RFQ / P&amp;L ANALYTICS</div>
        </div></div>
        <div className="status"><span className="dot" />{clock}</div>
    </header>;
}

创建 src/components/HeroPanel.tsx：

export function HeroPanel() {
    const chips = ['CME DIRECT MODE', 'FUTURES', 'OPTIONS', 'BLOCKS', 'RFQ', 'LIVE NAV'];
    const quoteChips = ['DEPTH', 'RFQ', 'GREEKS', 'VaR', 'CALMAR'];
    return <section className="hero">
        <div className="hero-grid">
            <div>
                <div className="eyebrow">Institutional Trading Challenge</div>
                <h1>AWS 金融量化怪杰<br /><span>P&amp;L 排行榜</span></h1>
                <p className="subhead">天啊，我们要真的拿一点钱出来做实盘。百家争鸣，每天公布 NAV。Crypto、宏观、Cross-Asset、Convex Alpha 同场陪跑，大家互相学习。🍻</p>
                <div className="chips">{chips.map(c => <span key={c} className={c === 'CME DIRECT MODE' ? 'chip hot' : 'chip'}>{c}</span>)}</div>
            </div>
            <aside className="quote">
                <div><div className="quote-label">Founder Idea</div>
                    <p><strong>“听说 Carmen Lopez, Lucia Fernandez 也在做 Crypto 实盘，</strong>那我就用宏观策略下场陪跑。每天公布 NAV，大家互相学习。”</p></div>
                <div><div className="chips">{quoteChips.map(c => <span key={c} className="chip hot">{c}</span>)}</div>
                    <div className="quote-foot">WORKSPACE: FUTURES · OPTIONS · BLOCKS · RFQ / DEMO DATA</div></div>
            </aside>
        </div>
    </section>;
}

业务逻辑： 顶部栏和主视觉区在用户检查数字之前告诉他们交易工作空间的上下文。文字将看板框架定位为用于示范或内部分析的学习竞赛。

代码逻辑： TopBar 拥有时钟状态和清理机制。HeroPanel 是静态的，并从数组中渲染标签和引言内容。

预期结果： 应用程序顶部在视觉上与原始示范项目相符，包含实时状态、HKT 时钟、标题、中文文案、创始人引言和工作流程标签。

系统设计原理解析：

1. 时钟逻辑被隔离在 TopBar 中，因为它具有计时器副作用。保持副作用局部化使测试和清理更容易。
2. 即使主视觉内容是静态的，也将其组件化，因为产品文案通常独立于交易看板的其余部分进行更改。
3. 工作流程标签是数组而不是重复的 JSX，以便 Kiro 或开发人员轻松新增或重新排序标签，而无需编辑布局结构。

---

步骤 6 — 创建统计数据条、市场数据条、控件与表格

import { markets, traders } from '../data/demoBoard';

export function StatsStrip() {
    const bestSharpe = Math.max(...traders.map(t => t.sharpe));
    const avgWinRate = traders.reduce((s, t) => s + t.winRatePct, 0) / traders.length;
    const bestNav = Math.max(...traders.map(t => t.navPct));
    return <section className="stats">
        <div className="stat"><div className="stat-label">Participants</div><div className="stat-val">{traders.length}</div></div>
        <div className="stat"><div className="stat-label">Best Sharpe</div><div className="stat-val pos">{bestSharpe.toFixed(2)}</div></div>
        <div className="stat"><div className="stat-label">Avg Win Rate</div><div className="stat-val cyan">{avgWinRate.toFixed(1)}%</div></div>
        <div className="stat"><div className="stat-label">Best NAV</div><div className="stat-val pos">+{bestNav.toFixed(1)}%</div></div>
        <div className="stat"><div className="stat-label">Workspace</div><div className="stat-val cyan">RFQ ON</div></div>
    </section>;
}

export function MarketStrip() {
    return <div className="market">{markets.map(m => <div className="mcard" key={m.symbol}>
        <div className="mhead"><span>{m.symbol}</span><span>{m.state}</span></div>
        <div className={m.up ? 'mval pos' : 'mval neg'}>{m.move}</div>
    </div>)}</div>;
}

业务逻辑： 摘要统计数据在进入个别数据行之前，提供了快速的交易台级别概览。市场卡片显示了股指、原油、黄金和比特币代理市场的宏观背景。

代码逻辑： 统计数据衍生自交易员数据，而非硬编码。市场卡片对应到类型化的市场数据。

预期结果： UI 显示 8 个参与者、最佳夏普值 0.91、平均胜率 55.8%、最佳 NAV +18.4%、RFQ 开启，外加四张市场卡片。

系统设计原理解析：

1. 摘要统计数据是计算出来的，因此如果示范数据行发生更改，它们仍保持正确。这避免了过时的页首数字。
2. 市场卡片与排行榜数据行分离，因为它们代表环境上下文，而非参与者绩效。
3. 工作空间状态在此工作坊中保持为静态指示器，因为 RFQ 工作流程是一个标签，而不是真正的交易连接。

---

步骤 7 — 添加用于 UI 质量的 Kiro Hooks

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

# Hook: UI 回归审查

触发条件：当 src/components/*.tsx 或 src/styles/*.css 保存时
执行动作：
要求 Kiro 检查变更是否保留了：顶部栏、主视觉区、统计数据、市场数据条、搜索、排序按钮、排行榜字段、可展开的分析、响应式标签、深色令牌和免责声明。

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

# Hook: 无障碍审查

触发条件：当 src/components/*.tsx 保存时
执行动作：
要求 Kiro 审查键盘操作、输入标签、aria-expanded、活动排序状态以及正值/负值的语义。

业务逻辑： UI 回归 Hooks 有助于保护原型的覆盖范围。开发人员在重构过程中不太可能意外删除某个功能。

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

预期结果： 当组件缺失标签、删除必要区块或破坏交互语义时，Kiro 会建议修正方案。

系统设计原理解析：

1. UI 迁移有许多小细节，因此文件保存审查可在上下文仍记忆犹新时捕捉到回归错误。
2. 无障碍审查是分开的，因为视觉上的对等并不保证键盘或屏幕阅读器的质量。
3. Hooks 是建议性质的，而不是自动重写代码，因为开发人员应该控制金融仪表板行为的变更。

---

最终实验挑战

询问 Kiro：

将 React UI 与原始的单文件示范清单进行比较。生成一个涵盖布局区块、标签、市场卡片、控件、排行榜字段、响应式能力、实时钟表、免责声明和分析面板预留位置的差异清单。然后针对剩余的差异生成实现任务。

---

完成检查清单

• [ ] 所有 8 位交易员和 4 张市场卡片皆已呈现。
• [ ] 固定顶部栏和 HKT 实时时钟运行正常。
• [ ] 主视觉区、创始人引言、标签和页尾免责声明皆存在。
• [ ] 统计数据条从数据中计算数值。
• [ ] 搜索和排序控件具备无障碍功能。
• [ ] 排行榜字段与示范项目相符。
• [ ] 响应式布局涵盖桌面电脑/平板电脑/移动设备。
• [ ] Kiro Hooks 审查 UI 和无障碍功能的变更。

原始示范项目参考

本工作坊基于上传的 aws_quant_pnl_leaderboard_v3.html 示范项目。该示范项目包含一个 CME Direct 风格的深色工作空间、参与者排行榜、市场卡片、可排序/可搜索的损益看板、进阶分析面板、图表功能、响应式 CSS、实时 HKT 时钟以及模拟的定期 NAV 更新。所有数据均视为示范占位符数据，不构成投资建议。

---

进阶开发人员附加实作实验 — HTML 图形分析

这些实验扩展了 UI 工作坊，对上传的 HTML 文件的视觉系统进行更深入的分析。它们专注于深色交易工作空间的图形构建：分层背景、渐变、终端机框架、颜色语义、响应式组合、视觉层级和 CSS 驱动的能动性 (Affordances)。它们不会重复基础 React 迁移或分析引擎实验。

进阶图形分析目标

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

• 将 HTML 文件的视觉语法逆向工程为可复用的设计令牌。
• 解释网格背景、发光效果、边框和面板如何营造出 CME Direct 风格的终端机感。
• 建立一个将 CSS 选择器映射到图形意图的视觉资产清单。
• 验证桌面电脑、平板电脑和移动设备断点处的响应式图形行为。
• 建立 Kiro 审查提示词，在重构时保持视觉忠实度。

来自 HTML 文件的图形资产清单

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

• 终端机框架： .terminal 建立了一个带有边框、深色半透明背景和大阴影的受限交易工作空间。
• 分层主体背景： 多个线性渐变建立了一个微妙的网格，而放射状渐变则建立了青色和绿色的光晕。
• 固定命令栏： .topbar、.logo、.status 和 .dot 确立了实时工作空间的能动性。
• 主视觉区组合： .hero、.hero-grid、.eyebrow、h1、.chips 和 .quote 定义了仪表板的品牌故事和工作流程上下文。
• 指标颜色语言： .pos、.neg、.cyan 和 .metric 编码了正值、负值、醒目提示和等宽数字文字。
• 看板密度： .row、.cell、.rank、.strategy、.barwrap 和 .bar 建立了一个密集的金融网格。
• 响应式转换： 在 1120px 和 560px 处的媒体查询将看板从类似表格的网格转换为移动设备的数据行卡片。

进阶实验 1 — 创建视觉令牌提取报告

目标： 将 HTML 的 CSS 值转换为记录完善的设计令牌报告，解释每种颜色、字体、间距、边框、阴影和背景层。

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

# HTML 图形令牌报告

## 颜色令牌

| 令牌 | 数值 | 图形角色 |
|---|---:|---|
| --bg | #061018 | 工作空间背景 |
| --panel | #081522 | 主要面板表面 |
| --panel2 | #0c1f31 | 突出的控件表面 |
| --line | #28465f | 网格与边框系统 |
| --cyan | #38bdf8 | 交互式发光与主要醒目提示 |
| --green | #31c48d | 正值指标状态 |
| --red | #f05252 | 负值指标状态 |
| --yellow | #f6c85f | 保留的警告强调色 |

## 字体排版

- `--mono` 用于指标、控件、状态和密集的交易标签。
- `--sans` 用于正文、主视觉文字和策略描述。
- `.metric` 通过 `font-variant-numeric: tabular-nums` 启用等宽数字扫描。

## 表面语言

- 深色面板使用 `--line` 边框进行分隔。
- 柔和的内部网格使用 `--soft` 以减少视觉噪声。
- 青色发光保留给活动控件、主视觉区强调和实时工作空间识别。

Kiro 提示词：

分析上传的 HTML CSS 并创建一个设计令牌报告。解释每个根变量、主要面板颜色、边框、阴影、字体家族、指标类别以及正/负状态的视觉目的。保持报告面向实现，供 React 开发人员参考。

预期结果： 开发人员可以在更改原始图形系统之前对其进行描述。

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

目标： 将 HTML 文件的网格与发光背景隔离到一个具名的 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="terminal graphic-terminal">{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 10% 0, rgba(56,189,248,.2), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(49,196,141,.12), transparent 26%),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.graphic-terminal {
  border: 1px solid #315875;
  background: rgba(4,14,23,.95);
  box-shadow: 0 26px 90px rgba(0,20,36,.72);
}

图形逻辑： 前两个渐变建立网格。接下来的两个放射状渐变建立了大气的青色和绿色深度。最后一个颜色层锚定了深色终端机环境。

Kiro 提示词：

将 HTML 主体背景和终端机框架提取到具名的 React/CSS 外壳类中。保留确切的渐变顺序、background-size 行为、框架边框、半透明终端机表面和块阴影。添加注释以解释每个图层的图形角色。

预期结果： 背景变成了一个可移植的视觉原语，而不是未记录的主体样式。

进阶实验 3 — 创建视觉层级标注覆盖层

目标： 添加一个仅在开发时显示的覆盖层，用于标记视觉区块：顶部栏、主视觉区、统计数据、市场、控件、看板、详细信息面板和页尾。

创建 src/dev/VisualHierarchyOverlay.tsx：

const zones = [
  ['topbar', '命令 / 实时状态'],
  ['hero', '叙事识别与工作流程标签'],
  ['stats', '交易台级别摘要指标'],
  ['market', '市场内容条'],
  ['controls', '搜索与排名控件'],
  ['board', '密集的损益表格'],
  ['footer', '免责声明与导航'],
] as const;

export function VisualHierarchyOverlay() {
  return (
    <aside className="visual-audit-panel" aria-label="Visual hierarchy audit panel">
      <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(360px, 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：

# 响应式图形审计

## 桌面电脑视图

- 看板页首行可见。
- 十栏网格支持交易员比较。
- 主视觉区使用双栏组合。
- 市场数据条使用四栏。

## 平板电脑视图，最大宽度 1120px

- 主视觉区、图表网格和风险网格折叠为单栏。
- 统计数据变为双栏。
- 市场卡片变为双栏。
- 看板页首隐藏，每行公开移动设备标签。

## 手机视图，最大宽度 560px

- 状态文字和品牌副标题隐藏以节省空间。
- 统计数据和市场使用单栏卡片。
- 排序按钮变为双栏网格。
- 页尾 CTA 堆叠在免责声明下方。

Kiro 提示词：

从上传的 HTML 创建响应式图形审计。对于每个断点，记录哪些视觉结构发生了变化、为什么该变化保护了可读性，以及回归测试应该验证什么。

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

进阶实验 5 — HTML 外观的回归检查清单

目标： 创建一个检查清单，供开发人员在接受 UI 重构之前使用。

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

# HTML 外观回归检查清单

## 必须保留

- 带有青色和绿色光晕层的深色网格主体背景。
- 终端机边框和深阴影。
- 带有实时绿色点的固定顶部栏。
- 带有青色次要线条的高对比主视觉区大标题。
- 具有正常和热门状态的工作流程标签。
- 带有等宽数字的密集指标排版。
- 带有加号和绿色的正值。
- 带有减号和红色的负值。
- 看板数据行分隔线和柔和的内部单元格分隔线。
- 页首行消失时的移动设备标签。
- 页尾免责声明的可见性。

## 绝不能引入

- 真实的市场数据声明。
- 交易建议。
- 没有文字符号或标签的纯颜色含义。
- 隐藏免责声明或分析按钮的断点行为。

Kiro 提示词：

将 React UI 与上传的 HTML 图形系统进行比较。创建一个涵盖背景、框架、顶部栏、主视觉区、标签、统计数据、市场卡片、控件、看板数据行、响应式标签、详细信息面板和页尾免责声明的回归检查清单。

进阶最终挑战 — HTML 外观忠实度审查

询问 Kiro：

对 React UI 进行针对上传的 HTML 文件的图形忠实度审查。仅专注于视觉系统行为：背景层、终端机框架、颜色语义、字体排版、间距、层级、响应式断点、密集看板布局、焦点状态和免责声明可见性。生成一个按严重性排序的差异清单。

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

• [ ] 设计令牌报告解释了 HTML 视觉系统。
• [ ] 背景和终端机框架已提取到具名、可复用的类中。
• [ ] 视觉层级覆盖层记录了页面的图形区域。
• [ ] 响应式审计涵盖了两个断点层级。
• [ ] 回归检查清单保护了原始外观和非咨询性的页尾。