finesse · 22 个官方风格示例

这是 finesse skill 自带的全部示例页，覆盖它的 4 个 register。每张卡点开就是一个完整可交互的页面（部分带动效）。这是 finesse「能做什么」的实物证据——不是模板，是坐标。

⚠️ 注意：这些是 finesse 自己的示例，不是我们赵阳智脑的页面。带 ✓ 我们可借鉴的是 product/H5 类（跟医疗扁平搭）；带 ✗ 越 H 线的是 brand 类（颗粒/浓色/hero 引擎，放医疗板会破坏 H）。

Brand 品牌页 9 · 设计即产品

最能体现 finesse 视觉野心的一组——但也几乎全部越我们 H 的线，看看它的"脸"能到什么程度。

电影感科技

近黑底 + 青/品红双色，Three.js 粒子星系，颗粒+暗角。

Three.js/GLSL✗ 越 H 线

单一霓虹绿 + 等宽字，Canvas 实时 K 线，CRT 扫描线。

Canvas 2D✗ 越 H 线

紫/青深墨，真·Navier-Stokes 流体解算器，零依赖 550 行。

WebGL FBO✗ 越 H 线

骨白/黑 + 一个烈色，超大 Anton 字体，混合模式导航。

GSAP✗ 越 H 线

奶油/墨色，衬线双搭（Playfair+Spectral），灰度摄影+首字下沉。

GSAP scroll✗ 越 H 线

米白 + 森林鼠尾草，极致留白，纯 CSS 双层鼠标遮罩。

CSS-only✗ 越 H 线

包豪斯几何

暖纸 + 五原色块，纯 CSS 几何拼贴 hero，非对称 12 栏。

CSS 几何✗ 越 H 线

近单色透明度阶梯，一个可变字体承担全部角色，实时字重波。

CSS 可变字体✗ 越 H 线

近黑 + 香槟金属，程序化 SVG 表盘，schematic 描边绘入。

SVG 零依赖✗ 越 H 线

Product 仪表盘 8 · 设计服务产品

✓ 这一组跟我们最搭——product register，扁平克制、KPI 瓦片、图表工艺，配色/密度是可借鉴的部分。

增长仪表盘（深色）

经典侧栏，线+面积绘入图、环形、5 个数字滚动 KPI、滑块。

监控仪表盘（深色）

发光 sparkline、高级旋钮滑块。

金融仪表盘（浅色）

堆叠柱+悬浮 tooltip、半环仪表、信用卡组件。

健康仪表盘 · 浮动面板

照片热点标注、强调色选择器+暗色开关、手绘 ECG/环。

✓ 最接近我们

API 控制台 · 真 Bento

2.15fr 非对称格、渐变主卡、同心用量环、延迟 sparkline。

知识库 · 三栏

296/1fr/320 三栏 masonry、CSS 浏览器预览+热点。

学习台 · 居中 Bento

彩色任务卡、多弧环、成对柱状、排行榜、语音波形。

订阅分析 · 非对称 Bento

色块卡、堆叠柱、可循环环形仪表、带动画迷你条的表格。

AI 控制台 1 · 你委派给它干活的页

✓ 如果以后做「AI 帮门店/家长自动跑活」的界面，这套运行流/审批卡/成本回执直接对口。

智能体控制台

三栏（队列/运行流/证据），9 个运行状态、常驻停止、流内审批卡、成本回执。

✓ 未来对口

H5 移动端 4 · 只活在手机上的页

✓ 这组跟我们赵阳手机端最直接相关——手机框/安全区/TabBar/底部栏这套「原生家具」可以直接学。

App 外壳（黑+珊瑚）

完整原生骨架：状态栏、悬浮胶囊 TabBar+中央 FAB、底部 sheet、home 条。

✓ 直接对口

每日记录台（浅色）

「工作台」的手机身体：11 段弧形仪表、浅色手机框、扫描 sheet。

✓ 直接对口

每日台（柔和渐变）

证明「高级」和「柔和」不冲突：多弧同心环、渐变卡面、心情/水/体重瓦片。

✓ 直接对口

移动端商详 PDP

SKU 选择 sheet、吸底购买条、scroll-snap 画廊、加购抛物线动效。

✓ furniture 可学

怎么用这个页：随便点开几张卡看 finesse 的实力范围。Product / H5 / AI 控制台三组（✓）是我们医疗产品能真正借鉴的——扁平、克制、数据密。Brand组（✗）看看就好，那些颗粒/浓色/WebGL 放到赵阳医疗板上会破坏 H 设计语言，不采纳。

下一步：你逛完告诉我哪个方向对你胃口，我按那个方向、在 H 约束内，给赵阳的卡片做真正的视觉升级。