一套 CSS，
换掉管理端的
全部质感。
配色、圆角、切角、发光、纹理、动效，一次换齐。 68 个组件直接抄，18 套皮肤即时切，业务代码一行不动。 交付是一份 18.3 KB（gzip）的样式表，Vue、React、原生页面都能接。
不碰你的 JS · 不碰你的构建 · 明暗双体系 · 低功耗降级内置
data-skin="starry"
接入的全部成本，就这两行
不用装包，不用改构建，不用动路由。右边的开关就是这两个属性。
引入一份 CSS
<link rel="stylesheet" href="dianjiang.scoped.css">，单文件，含全部变量与组件样式。
给容器挂两个属性
class="cf-root" data-skin="starry"。scoped 版把样式全部锁在这个容器里，碰不到你已有的任何元素。
把组件标记抄进你的模板
每个组件卡片都能直接复制 HTML 和 CSS（变量已解析成字面值）。换皮肤只改 data-skin 一个值。
<link rel="stylesheet" href="dianjiang.scoped.css"> <div class="cf-root" data-skin="hud"> <!-- 你的页面，原样放进来 --> </div>
关掉就是你的页面现在的样子——右边实时对比
▲ 没有点绛的样子：浏览器默认样式，每个项目都要从这开始重写一遍。
| 单号 | 金额 | 状态 |
|---|---|---|
| SO-2026-1018-041 | ¥ 12,800.00 | 已支付 |
| SO-2026-1018-040 | ¥ 3,299.00 | 待发货 |
| SO-2026-1017-227 | ¥ 899.00 | 已退款 |
质感样板间
玻璃、背景光、指标磁贴、光斑跟随——下面这块仪表盘，没有一个像素是图片。
模糊、高光、噪声、渐变，全是 CSS。
data-skin="starry"
68 个组件，8 个分类
管理端真正要用的都齐了——包括最容易做丑的信息展示与选择类。
报表图全部手写 SVG、零图表库依赖——这是刻意的：图表必须吃到皮肤的五色系
--cf-s1..s5，引第三方库就没法这样换肤。10 个选择/交互类组件在工作室里是真交互（卡片标 LIVE），
不是静态示意。进工作室逐个试 →
三个真跑得起来的后台
不是组件陈列。素材库、订单履约、集群运维，都是把组件按真实业务拼完之后的样子——每页右上角可直接切皮肤。
18 套皮肤，同一份标记
下面 18 块用的都是同一组 HTML。切换皮肤 = 改一个 data-skin 值。前 8 块是亮色，对齐主流后台的亮色风格。
starryDARKdaylightLIGHTfrostLIGHTskyLIGHTslateLIGHTceladonLIGHTvioletLIGHTpaperLIGHTsandLIGHThudDARKneonDARKcrtDARKquantumDARKvenomDARKabyssDARKamberDARKmonoDARKcrimsonDARK18 套是内置的上限，不是你的上限。没有一套对味，就说一句你要的气质。
让 AI 长第 19 套 →没有一套对味，就长一套
内置 18 套是终点也是起点：说一句你要的气质，配方出来再进工作室细调。
说清场景，不用懂术语
冷静克制的医疗后台，浅色，信息密度高，不要花哨
——像跟设计师提需求那样说就行。
拿到一份语义配方
模型只做翻译：深色还是浅色、主色冷暖、圆角几档、要不要发光。它不猜 hsl() 和 px。
落到皮肤，再接着调
配方直接生成可用的皮肤，68 个组件与 63 个 token 一起跟着走；不满意就继续对话，或拖滑块。
- Key 自填，存在你本机 localStorage，纯前端直连模型，不经过任何中转。
- 代码是护栏：主色与危险色色相过近会被强行拉开，对比度不够会被提亮，改了什么都写在配方卡上。
- 可解释：每条配方都带一句取舍理由；增量调整只改相关字段，不是抽卡。
三选一，约 43 秒出包
医疗场景优先可读性与低刺激：冷青灰打底、单点青作指示色，收敛发光与圆角。
运维大屏要一眼抓到异常：深底 + 高对比青色信号，等宽字体与宽字距强化终端感，纹理给到微网格。
无色相要求下把主色收进单色族、饱和度压到最低；层级靠字重与边框，不靠颜色。
三种接法，按你项目的现状选
从「只换色」到「整套换掉」，工作量从 30 分钟到每页 2–4 小时。
只引变量，保留现有组件库
项目已用 Element Plus / Antd，只想统一色调与字体
- 得到
- 配色、字体、圆角全部对齐
- 不做
- 切角、发光、纹理等形状特征
- 成本
- 30 分钟（dianjiang-theme.css + 一段桥接）
:root {
--el-color-primary: var(--cf-accent);
--el-bg-color: var(--cf-bg);
--el-border-radius-base: var(--cf-r);
}
变量 + 组件 CSS，接到老项目
任意技术栈，样式锁在 .cf-root 容器内，逐页替换
- 得到
- 全部视觉特征，包括玻璃与光效
- 不做
- 交互行为仍用你现有的（无 JS）
- 成本
- 每页 2–4 小时
<link href="dianjiang.scoped.css" rel="stylesheet"> <div class="cf-root" data-skin="starry"> … </div>
全新项目，直接用
新后台没有历史包袱，标记即文档
- 得到
- 全套组件 + 换肤 + 导出包
- 不做
- 路由、请求、权限——那是你的事
- 成本
- 引 CSS 即可，当天见效
<html data-skin="starry"> <link href="dianjiang.css" rel="stylesheet">
先把边界说清楚
这是一份 CSS。下面两栏,比任何卖点都重要。
你拿到的
- 0163 个 design token，默认即当前皮肤——不写 data-skin 也是这套配色，不会整页失色
- 0268 个组件的完整样式（含玻璃、光效、图表），scoped 版不碰你的既有元素
- 0318 套皮肤（8 亮 + 10 暗）+ 低功耗降级 + @layer 隔离（业务样式永远优先）
- 04Tailwind preset 与 dianjiang-theme.json（拖回工作室继续调）
你要自己写的
- 01全部交互逻辑：开关状态、弹层开关、表单校验、数据请求
- 02图表的数据到坐标换算（样式类名是现成的）
- 03浮层 teleport 后要补挂 cf-root cf-portal（文档有现成写法）
- 04与既有组件库共存量级冲突时的 z-index 对齐（--cf-z-* 已对齐 EP 刻度）
为什么没有 JS？因为一旦带上 JS，接入就从「引一份 CSS」变成「引入一个框架的组件库」—— 版本、依赖、构建链全被绑住。我们只卖质感，逻辑留给你。
为什么叫点绛
点绛：唇上一点朱。一阕词牌，千首词。
格律是死的，词是无穷的。50 个 token 是格律，68 个组件是填进去的词—— 换一套皮肤，等于同一副格律换一首词：韵脚换了，平仄不动。
点绛出自南朝江淹写美人的一句「明珠点绛唇」，后来成了词牌《点绛唇》。 词谱上，一个空格就是一个字的位置——标志取的就是那一格：细线方框是格律，顶部留一道口，词从那里进来， 正中的一点朱是落下的那一笔（朱批）。朱只作点，不作面，所以整套视觉里朱只出现在这一个圆上。 它和资源平台琅嬛是一对：琅嬛藏万卷，点绛点一色。琅嬛反其道——闭口环只开一线，是「藏」。一藏一显，一方一圆。