Canon Chong

Design Engineer · 吉隆坡 · GMT+8

产品是我设计的,也是我写出来的。

一个人,从第一张草图到上线的程式码,通常两到三週。我做的是领域本身就难的介面:交易、风控、agent 工具。资料密集、而且出错很贵的那种。

十二年设计经验,其中七年在产品介面,最近两年在金融科技。

设计系统,跑给你看

每个作品集都说自己会做设计系统。这是我的,现在就在跑。

动一下右边任一个控制项。一个元素上的一个属性改变,十二个组件同时重新调校——间距、字级、颜色、行高。没有任何一个组件知道自己在哪个主题里,它们读的是同一层语义 token。这就是 token 层存在的全部理由,而且亲手操作一次,比读一段说明快得多。

@canon/dsLive
Design systemTokensDensityDegradedFailed
InstrumentClassWeightP&L
NVDAEquity4.21%+2.84%
DE 10YFixed income2.08%-0.31%
USD/JPYFX1.44%+0.12%

主题

密度

刚刚变了什么

这些数值是每次变动后从浏览器读回来的,所以它没办法宣称一个样本其实没在用的值。另外注意这块面板在页面里保有自己的主题——这个可分区的能力,是在还没有任何理由需要它之前就决定好的。

作品

四个概念专案,每个只证明一件事。

四个都是自主发起的。客户案子有保密协议,而我宁可给你看一个我能诚实讨论的东西——包括做坏的部分。

01

Agent Console

Operations console for AI agent runs

That I understand the shape of agent products — and can make five surfaces agree by deriving them from one source instead of maintaining five.

Killer detail

Replayable execution trace

Stack

Next.js · React 19

Built in

~2 days

02

Portfolio Terminal

Multi-asset book, 2,000 positions

That dense financial data can stay legible, and that the keyboard can do everything the mouse does.

Killer detail

Brushing re-runs every panel

Rows

2,000 virtualised

Built in

~1 day

03

Canon DS

Design system with live theme and density

That I build the layer other people build on — and that I make a real product consume it first.

Killer detail

Two independent axes

Tokens

64 primitive · 37 semantic

Built in

~2 days

04

Aperture

Scroll-scrubbed WebGL launch page

That something can look expensive without being expensive, and that performance claims are measured.

Killer detail

120fps, 0 asset bytes

Draw calls

3

Built in

~half a day

我提供什么

三种合作方式。

固定报价,先有书面范围才动钱。任何会影响交期或价格的变更,都会先出书面修订。

怎么合作

没有简报,没有为了流程而流程。

01

先一份 brief,再一份书面范围

你寄一份 brief 给我,按钮会把该问的问题都填好,你只要作答,不用从空白开始。我会回覆:老实说我适不适合、一份书面范围、一个固定价格和日期。然后我们才通话——是确认,不是摸索。真正重要的东西在任何人上线开会之前就已经白纸黑字,你可以直接转给要签字的人,不必再转述一场对话。

两个工作天

02

设计过程是开着的

一週两三次看到进行中的东西,是可以点的连结不是简报页。回馈在还便宜的时候就进来。不会有两週的沉默再来一次揭晓。

第 1 週

03

边设计边做出来

因为是同一个人做,所以没有交接可以掉东西,也不会有一个设计在核准三週后才发现做不出来。你 review 的是跑得动的程式码。

第 1 – 3 週

04

交接连同判断理由

程式库、设计系统,加上每个决定为什么这样走的书面纪录。你的团队应该要能在没有我的情况下继续开发——那才是重点。

最后一週

快你八小时,而那是优势

我在吉隆坡。我的傍晚是欧洲的早上,跟英国和欧盟有真正的重叠时段。对美国团队重叠很薄——所以我用远端工作本来该有的方式做事:书面更新、每两天一个可以点的版本、只有真的需要决策才开会。多数週是零次。

0h

你会跟谁合作

十二年设计,其中七年都在补同一道缝

十二年设计,其中七年在产品介面。四年半在高流量消费级平台——那种「多一次点击」是真的有人在量的地方;最近两年半在金融科技,一家外汇券商,然后一家全球支付集团。再往前是印刷和品牌,那几年教会我一件事:做不出来的版面不叫设计。

2019 年,我那个团队还在用 Photoshop 出稿,交给工程师的是平面档。我自己利用下班时间学 Adobe XD,先在一个专案上试,试成了之后被指派去把整个七人设计团队转过来。我现在做的是同一件事,只是换了一套工具。设计出来的东西和真正做出来的东西之间那道落差,才是贵的地方——过去七年不管职称是什么,我实际在做的都是把它补起来。

我用中文和英文工作,而且有好几年是夹在中间:用中文替中国的开发团队写技术设计文件,同时用英文跟新加坡的行销团队敲策略。如果你的工程团队在海外,这件事不小。我的英文书写没问题,口说是堪用的程度——这也是为什么这里的一切都从书面开始。

我刻意一个人做。设计和实作在同一双手上,就没有交接——而交接正是大部分成本和几乎全部妥协发生的地方。

关于 AI,反正你会问

我用得很凶。一个两人份的工作能由一个人在两週内做完,就是因为它。

它同时也是为什么市面上现在到处都是能在一个下午生出一个看起来还行的介面的人。所以诚实的问题不是我用不用——是我在上面加了什么。

我加的是审核。知道一个没有产品在上面跑的设计系统只是一堆猜测。知道一个只算一次的相关性矩阵正在悄悄骗你。知道一个在连按方向键时会掉按键的表格,交易员第一天就会发现,然后再也不信任它。这三件事都不会出现在截图里,也都不是「生成」能抓到的。

十二年的经验,是让那个审核值得付钱的东西。AI 是一支比较快的铅笔。

直接的回答

上面那些是真实客户案子吗?

不是。四个都是自主发起的概念专案,目的是展示我怎么工作,而不是把别人的产品拿来装点门面。客户案子有保密协议,我宁可给你看一个我能诚实讨论的东西,包括出错的部分。

为什么是先写 brief,不是先通话?

因为通话是个很差的第一道筛选。你花四十五分钟问出来的东西,我两天内会白纸黑字写给你,而且通话结束后你没有任何可以转给别人的东西。先写,意味著范围、价格、日期在我们开口之前就已经存在——通话变成二十分钟的确认,而你手上有一份可以直接寄给要签字的人的文件。我人在吉隆坡,合作对象在欧洲;越少事情取决于我们同时清醒,这案子越顺。如果你就是想先聊,信里说一声,我们就聊。

我实际会拿到什么?

一个属于你的程式库,已部署且在跑,加上它建立在其上的设计系统,以及决策的书面纪录。不是一份 Figma 外加一场交接会议。

可以跟我们现有的工程师一起做吗?

那是常态。我接一个完整的介面,并且待在你们的惯例里——你们的技术栈、你们的 review 流程、你们既有的组件库(如果那套值得留)。

做到一半范围变了怎么办?

通常都会变。小的变更我吸收。任何会动到日期或价格的,会先出书面修订才开始做——所以不会有一张你没预期到的帐单。

可以只做设计或只做开发吗?

很少,而且只在真的合适的时候。价值在两件事合起来——拆开就等于把你付钱要我移除的那道交接放回去。

下一步

说说你在做什么

寄一份 brief 给我——按钮会把问题都填好,你不用面对一张白纸。两个工作天内给你范围和固定价格。如果我不是对的人,我会直说,而且通常认识一个是的人。