
效果预览
运行于
生成模型
宿主 Agent 模型
相似 Skill
查看全部 Skills你将获得
- Activity Calendar Chart 的完整源码:组件文件加一个可直接运行的用法示例,粘进项目就能改。
- 一份视觉契约:配色、字号阶梯、圆角、icon 描边与动效时长,集中成 token。
- 响应式断点已经调好,从桌面收到手机都不会塌。
适合
- 你要在页面里放一个数据可视化区块,不想自己接图表库。
- 你希望图表的配色和排版和页面其余部分一致。
- 你想拿到可读、可改的源码,而不是再多一个需要跟着升级的依赖。
不适合
- 已经在跑成熟设计系统的团队——这里的配色和字号阶梯会和你的打架。
- 想要可版本化升级的 npm 包的人;这交给你的是需要自己维护的源码。
- 需要导航、表单、登录或结账流程的项目,这个区块都不覆盖。
客户交付与管理层汇报科研出版与技术说明数字出版物与网页展示制作信息图/速读海报制作界面原型与界面插画制作网页/单页站/仪表盘成果可编辑视觉精美低门槛Warm NeutralTeal AccentEditorial
关于此 Skill

粘一个区块,页面上就出现一个真正的数据可视化,是画出来的,不是用 SVG 拼的。把你的数字放进去,图形自己重画。
你会得到什么
- Activity Calendar Chart 的完整源码:组件文件加一个可直接运行的用法示例,粘进项目就能改。
- 一份视觉契约:配色、字号阶梯、圆角、icon 描边与动效时长,集中成 token。
- 响应式断点已经调好,从桌面收到手机都不会塌。
怎么用
- 告诉助手这个区块放在哪,它会先读你的项目,再按项目本来的写法写出来。
- 把文案换成你的。字号和间距自己站得住。
- 强调色只改一处,整个区块跟着变。
- 上线前在手机上看一眼,它本来就是按这个宽度做的。
开始前需要准备什么
- 最近实测
- v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…







