Acausa.io · Personal Tooling

Trading
Console

交易执行控制台

A pre-execution gate for a £50 CFD account. Also the first shipped, end-to-end instance of a cross-media generative system — and the portfolio piece that proves it. 一个 £50 CFD 账户的下单前置闸门。同时也是跨媒介生成系统的第一个端到端交付实例——以及证明它存在的那件作品。

PLAN v1.1 DATE 2026-08-22 STACK Next.js 16.3 · React 19.2 · Supabase · Vercel TOTAL ≈ 6 weeks / 约 6 周（晚间）
01

Build sequence 构建顺序

Not fully sequential, not fully parallel. One thin slice through every layer first — then it forks once, at Phase 2, and rejoins. 不是纯串行，也不是全并行。先打一根穿透所有层的细桩——然后只在 Phase 2 分叉一次，再合流。

0

Pipeline 管道

≈ 2 hours / 2 小时

No features. Only the delivery chain. Most projects die here, and it has nothing to do with your idea — so clear it first. 不写任何功能，只打通交付链路。大多数项目死在这一步，而它跟你的想法毫无关系——所以先把它排掉。

  • Private GitHub repository建一个私有 GitHub repository（代码仓库）
  • Create the Next.js 16.3 project locally在本地建 Next.js 16.3 项目
  • Connect the repo to Vercel → first deploy把仓库接到 Vercel → 第一次部署上线
  • Point your domain at it把 acausa.io 指向它
  • Change one word → git push → watch the live site change改一个字 → git push → 看着线上跟着变
ExitYou edit one word, push, and 30 seconds later your own domain shows it.退出条件：改一个字、push，30 秒后你自己的域名上显示出来了。
Note: a critical Next.js security patch lands 26 Aug 2026. Start now, upgrade that day. 注意：Next.js 有一个「严重」级安全补丁在 2026年8月26日 发布。现在就开工，那天记得升级。
1

Skeleton 骨架

≈ 4 hours / 4 小时

Deliberately ugly. White background, black text, no styling at all. One thin slice that goes all the way through the stack — a walking skeleton. 故意做得很丑。白底黑字，零样式。一条穿透整个技术栈的细切片——这叫 walking skeleton（能走路的骨架）。

  • Supabase project + one table: trades建 Supabase 项目 + 一张 trades 表
  • One form: instrument, direction, entry, stop, target一个表单：品种、方向、入场、止损、止盈
  • Submit → emit(event) → write to the table提交 → emit(事件) → 写入表
  • A plain list that reads the rows back一个朴素列表，把记录读回来显示
ExitYou log one trade, refresh the page, and it is still there.退出条件：记录一笔交易，刷新页面，它还在。
Do this now, not later: build the event bus (~30 lines). Today it has one subscriber. Adding an output later becomes one line instead of a rewrite. 这一步就要做，别拖：建 event bus（事件总线，约 30 行）。今天它只有一个订阅者。以后加任何输出口都只是加一行，而不是重写。
2

┌ FORK · two tracks run in parallel for ~1 week 分叉 · 两条轨道并行约 1 周

2A

Engine 引擎

≈ 1 week / 1 周

The actual logic. Still unstyled. 真正的逻辑。依然不做样式。

  • instruments.json — real numbers: TECH100 min 0.001 / £21.53 · Gold min 0.0296 / £100 · 5% margin · expiry 17 Sep instruments.json —— 真实参数：TECH100 最小 0.001 手 / £21.53 · 黄金最小 0.0296 盎司 / £100 · 保证金 5% · 9月17日到期
  • Node 0 — Admission gate. Locked out? The flow won't even open. Node 0 准入闸。处于锁定状态时，整个流程根本打不开。
  • Node 3 — Sizing. Inverted: you type the level that invalidates the trade → it returns the position size → it rejects anything under 2:1. Node 3 仓位计算。方向是反的：你输入这笔交易的失效价位 → 它算出手数 → R:R 不足 2:1 直接拒绝。
  • Node 6 — Reconciliation. Did you actually take it as specified? Did you move the stop? Outcome? Node 6 事后对账。实际是否照卡片执行？有没有挪过止损？结果如何？
ExitYou can run one real trade end to end through it.退出条件：能用它完整走完一笔真实交易。
2B

Visual lab 视觉实验室

≈ 1 week · timeboxed / 1 周 · 限时

A separate route at /lab. Pure experiment, connected to nothing. This is where you learn the reference language, in this order: 一个独立的 route（路由）：/lab。纯实验，不接任何东西。在这里按顺序学参考里的视觉语言：

  • Mesh gradient — several radial-gradients stacked网格渐变 —— 多个 radial-gradient 叠加
  • Grain — feTurbulence first, to learn the parameters颗粒 —— 先用 feTurbulence 摸清参数
  • Glass card + liquid-glass refraction (see budget, §03)玻璃卡片 + liquid glass 折射（预算见 §03）
  • Annotation leader lines — SVG path + stroke-dasharray标注引线 —— SVG path + stroke-dasharray
  • Numeric type — big figure, whispered unit, tabular-nums数字排版 —— 大数字、耳语般的小单位、必开 tabular-nums
ExitOne tokens.css file you're happy with.退出条件：一份你满意的 tokens.css。
Hard rule: visual work is bottomless and it feels like progress. Phase 3 cannot start until 2A passes its gate — no matter how good 2B looks. 硬规则：视觉是无底洞，而且它感觉上很像在推进。2A 没通过退出条件，Phase 3 就不许开始——不管 2B 做得多好看。
3

Merge 合并

≈ 2–3 days / 2–3 天

Apply the tokens to the tool. Because you used CSS variables from the start, this is mostly swapping one file — not a rewrite. 把 tokens 应用到工具上。因为你从第一行起就用 CSS 变量，这基本上只是换一个文件——不是重构。

ExitIt looks right and it still works.退出条件：好看了，而且还能用。
4

Differentiators 差异化层

≈ 2 weeks / 2 周

The part that makes this a portfolio piece rather than a form. Strict order — each one earns its place against a specific job requirement. 让它从「一个表单」变成「一件作品」的部分。严格按顺序——每一项都对应某份 JD 里的一句具体要求。

  • State shader (Layer B). The grain moves in here. → "shaders, real-time scenes" 状态 shader（Layer B）。颗粒搬进这里。→ 对应「shaders / 实时场景」
  • LLM reviewer. You write the thesis in prose; it extracts the structured fields and argues the opposite side. Runs server-side. → "LLM workflows" LLM 审查者。你用自然语言写交易论证；它抽取结构化字段，并论证反方。跑在服务端。→ 对应「LLM 工作流」
  • Eval harness. Log prompt version + eventual trade outcome. Did v2 catch more bad trades than v1? → "running evaluations" 评测框架。记录 prompt 版本 + 这笔交易最终结果。v2 比 v1 拦下了更多坏交易吗？→ 对应 Apple 的「运行评测」
  • Observatory (Layer C). D3 computes, WebGPU draws. → "D3.js" 观测台（Layer C）。D3 算数据，WebGPU 画像素。→ 对应 FIELD.IO 点名的「D3.js」
ExitEach of the four maps to a named line in a real job description.退出条件：四项各自能指向某份真实 JD 里的一句原话。
5

Case study 案例研究

≈ 1 week / 1 周

A public page at acausa.io/ that anyone can read — no login. The tool itself sits behind login at /app. One deployment, two audiences. This is the concrete reason the stack is Next.js. 一个公开页面 acausa.io/，任何人都能看，不用登录。工具本体在 /app，要登录。一次部署，两类受众。这就是选 Next.js 唯一实打实的理由。

  • Screen recordings of the real tool running — the strongest evidence you have 真实工具运行的屏幕录像 —— 你手上最强的证据
  • Motion rationale document. Every state transition: named curve, duration, one written sentence of why. Almost nobody writes this, and it is a literal phrase in the FIELD.IO listing. 动效理由文档。每个状态转场：命名曲线、时长、一句书面理由。几乎没人写这份东西，而它是 FIELD.IO 招聘启事里的原话。
  • The decision log: what you chose, what you rejected, why 决策日志：选了什么、否掉了什么、为什么
ExitYou can send someone a single link.退出条件：你能给别人发一个链接就够了。
02

Three layers 三层架构

A separation that also answers the hardest question a creative director will ask: why is this here? 这个分层同时回答了创意总监最难的那个问题：这东西为什么在这儿？

Layer A · the tool / 工具

Console 控制台

DOM + SVG

Checklist, figures, command card, leader lines. Cold, legible, fast. No WebGL anywhere near it. 检查单、数字、指令卡、标注引线。冷、可读、快。WebGL 完全不许靠近。

Layer B · the signature / 签名

State field 状态场

WebGPU + TSL

A shader behind the console. Not decoration — it is the status indicator. Still and grey with no position; slow drift when live; frozen amber while cooling; fully desaturated when locked out. You read system state with peripheral vision, at zero attention cost. It also provides the varied backdrop that makes the glass above it read as glass. 控制台背后的一层 shader。不是装饰——它就是状态指示器。无持仓时灰而静止；持仓中缓慢漂移；冷却时凝滞成琥珀色；全局锁定时完全去饱和。你用余光就能读到系统状态，注意力成本为零。同时它也提供了让上层玻璃「像玻璃」所必需的、有变化的折射底。

Layer C · the portfolio piece / 作品件

Observatory 观测台

D3 + WebGPU

A separate route. Renders the accumulated log: R-multiple distribution, time-of-day performance, process-adherence rate. Built in Phase 4, once there is data worth looking at. 一个独立路由。渲染积累的交易日志：R 值分布、按时段的表现、流程依从率。到 Phase 4 才建，等有值得看的数据再说。

03

Glass budget 玻璃预算

Liquid glass is affordable here — but only because this interface happens to be its best case. Keep inside these limits or drop the effect. Liquid glass 在这里是负担得起的——但仅仅因为这个界面恰好是它的最佳情况。守住下面的边界，守不住就砍掉。

≤ 3 surfaces
Glass on the top-level card only. Secondary elements use plain translucency. Fifty glass cards will spin a laptop's fans. 只在最上层卡片用玻璃，二级元素用普通半透明。五十张玻璃卡片会让笔记本风扇转起来。
blur ≤ 10px
On mobile, above ~10px drops frames. 移动端超过约 10px 就会掉帧。
never position:fixed
A documented iOS Safari bug — it repaints the blurred region on every scroll frame. Use sticky or an opaque bar. iOS Safari 有一个记录在案的 bug —— 它会在每一个滚动帧重绘模糊区域。改用 sticky 或者不透明工具条。
never opacity
Setting opacity below 1 turns the element into a "backdrop root" and the effect silently vanishes. Put transparency in the background-color alpha instead. This catches nearly everyone. 把 opacity 设成小于 1，元素会变成 "backdrop root"，效果直接静默消失。透明度要写在 background-color 的 alpha 通道里。这条几乎绊倒所有人。
size ≠ animated
Moving a glass panel is free. Resizing it regenerates the displacement map. Animate position, never dimensions. 移动玻璃面板是免费的。改变尺寸会重新生成位移图。可以动位置，绝不动尺寸。
-webkit- prefix
Ship both -webkit-backdrop-filter and the unprefixed property. 两个都写：-webkit-backdrop-filter 和不带前缀的版本。
refraction = decoration
True refraction only renders in Chromium; Safari and Firefox fall back to plain blur. So never encode meaning in the glass — meaning lives in Layer B, which works everywhere. 真折射只在 Chromium 渲染，Safari 和 Firefox 退回普通模糊。所以永远不要把含义编码进玻璃——含义住在 Layer B 里，那个到处都能跑。
04

Vocabulary 术语表

repository (repo)
A folder whose entire history is recorded. Living on GitHub, it is also the trigger for deployment. 代码仓库。一个完整记录了修改历史的文件夹。放在 GitHub 上时，它同时也是部署的触发器。
commit / push
Commit = save a labelled snapshot locally. Push = send those snapshots to GitHub. Pushing is what starts a deploy. commit = 在本地存一个带标注的快照。push = 把这些快照送到 GitHub。push 这个动作会启动部署。
deploy
Turning your code into the live site people can visit. Here it is automatic: push, wait ~30s, done. 部署。把代码变成别人能访问的线上网站。这里是自动的：push，等约 30 秒，完成。
Vercel
The host. Watches your repo, rebuilds on every push, serves the result. No server to rent or maintain. Free at this size. 托管方。盯着你的仓库，每次 push 就重新构建并上线。不用租服务器、不用运维。你这个体量免费。
Supabase
The database, hosted for you. Your trade log lives here so it survives across devices. Free at this size. 托管的数据库。你的交易日志住在这里，所以换设备也还在。你这个体量免费。
route
A URL path inside one app. / is the public case study, /app is the tool, /lab is the sandbox — all one project, one deployment. 路由。同一个应用里的一段网址路径。/ 是公开案例页，/app 是工具，/lab 是沙盒——同一个项目，同一次部署。
Route Handler
A small piece of code that runs on the server, not in the browser. Required for the LLM, because an API key must never reach a browser. 跑在服务端而不是浏览器里的一小段代码。LLM 必须用它，因为 API key 绝不能进浏览器。
design tokens
Named values — --ink, --accent — instead of raw hex codes scattered through the code. Change the name once, everything follows. 设计令牌。用有名字的值（--ink、--accent）代替散落在代码各处的色号。改一次，全部跟着变。
CSS variable
How tokens are written in CSS. The :root{} block at the top of this file is exactly that. tokens 在 CSS 里的写法。这个文件顶部的 :root{} 就是。
walking skeleton
The thinnest possible version that still runs through every layer of the system. Built first so that anything broken breaks in hour two, not week three. 能走路的骨架。最薄的、但仍然穿过系统每一层的版本。先建它，是为了让出问题的东西在第 2 小时暴露，而不是第 3 周。
event bus
Instead of writing data directly, you announce that something happened. Whoever is listening reacts. Adding a new listener later — a device, a screen, a log — costs one line. 事件总线。不直接写数据，而是宣告「发生了某件事」，谁在听谁反应。以后加新的监听者（设备、屏幕、日志）只要一行。
shader
A tiny program that runs on the graphics card, once per pixel, sixty times a second. How Layer B is drawn. 跑在显卡上的一小段程序，每个像素跑一次，每秒六十次。Layer B 就是这么画出来的。
TSL
Three.js Shading Language. Write shaders as JavaScript node graphs; it compiles to WebGPU and falls back to WebGL from the same source. Three.js 着色语言。用 JavaScript 的节点图写 shader；同一份源码编译到 WebGPU，并能降级到 WebGL。
feTurbulence
An SVG filter that generates noise procedurally. It makes the grain on this page — no image file involved. 一个程序化生成噪声的 SVG 滤镜。这个页面上的颗粒就是它做的——没有用任何图片。
exit criterion
One sentence that is either true or false. If it is false, the phase is not finished, however good it looks. 退出条件。一句非真即假的话。它为假，这个阶段就没完成——不管看起来多好。
timebox
A fixed number of hours, decided in advance. When they run out you stop, finished or not. 限时盒。事先定好的固定小时数。用完就停，做没做完都停。
05

Standing rules 常驻纪律

  1. Semantic class names and CSS variables from the first line, even while every value is grey. This is what makes Phase 3 cheap. 从第一行代码起就用语义化 class 名和 CSS 变量，哪怕值全是灰的。这是 Phase 3 便宜的唯一原因。
  2. Never write state directly. Emit an event, let a subscriber write it. One discipline, all future outputs stay open. 永远不直接写状态。发一个事件，让订阅者去写。一条纪律，换未来所有输出口都不堵死。
  3. Phase 1 is deliberately ugly. Styling it early is the surest way to never finish it. Phase 1 故意做得丑。太早做样式，是最可靠的永远做不完的方法。
  4. Deploy from day one. Every phase ends with something live at a URL, not on your laptop. 第一天就部署。每个阶段的结束物都在一个网址上活着，不在你笔记本里。
  5. A phase is done when its exit criterion is true. Not when it feels done. 阶段完成的标准是退出条件为真，不是「感觉做完了」。
  6. The tool is not a prerequisite for discipline. Run the checklist on paper starting this week — those records become your first data. 工具不是纪律的前提。这周就开始用纸跑检查单——那些记录就是你的第一批数据。