一套数据源喂多个端
4 篇文章3 款软件
一套设计令牌同时喂 Web、小程序与原生，改一处颜色，三端一起生效。
把色彩、排版、圆角收敛成单一数据源，用脚本产出两边样式。
2026-10-03·762·陈默
纯反色看久了眼睛累。对比度要降、阴影要换、强调色得单独调一版，这里记下取舍。
2026-08-11·874·陈默
把 12 列栅格换成 16 列，配合间距分级，同样面积能多放三成内容。
2026-09-19·595·陈默
媒体查询看的是视口，组件其实更该看自己有多宽。把断点从页面搬进组件里。
2026-09-01·744·陈默
一份数据源产出 Web、小程序与原生样式
2026-02-04·v0.9 · 跨平台·22 MB·4.8
截图取色，直接生成设计令牌
2026-01-14·v1.3·6.9 MB·4.7
实时预览中文字重与行高效果
2026-01-26·v1.2·7.6 MB·4.7
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2230%22%20y%3D%2232%22%20width%3D%2240%22%20height%3D%2236%22%20rx%3D%226%22%2F%3E%3Ccircle%20cx%3D%2241%22%20cy%3D%2243%22%20r%3D%224%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M34%2060l12-12%208%208%206-5%206%209%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2241%22%20cy%3D%2241%22%20r%3D%2211%22%2F%3E%3Ccircle%20cx%3D%2259%22%20cy%3D%2259%22%20r%3D%2211%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M38%2068%2050%2032%2062%2068%22%2F%3E%3Cpath%20d%3D%22M43%2056h14%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2213%22%2F%3E%3Cpath%20d%3D%22M50%2026v8M50%2066v8M26%2050h8M66%2050h8M33%2033l6%206M61%2061l6%206M67%2033l-6%206M39%2061l-6%206%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2254%22%20r%3D%2217%22%2F%3E%3Cpath%20d%3D%22M50%2054v-9%22%2F%3E%3Cpath%20d%3D%22M44%2030h12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M34%2040h20M34%2050h32M34%2060h14%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M32%2064V46M44%2064V34M56%2064V52M68%2064V26%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2228%22%20y%3D%2242%22%20width%3D%2244%22%20height%3D%2216%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M38%2042v7M48%2042v10M58%2042v7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2232%22%20y%3D%2232%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2253%22%20y%3D%2232%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%20opacity%3D%220.65%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2253%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%20opacity%3D%220.65%22%2F%3E%3Crect%20x%3D%2253%22%20y%3D%2253%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2228%22%20y%3D%2240%22%20width%3D%2244%22%20height%3D%2222%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M38%2040v8M48%2040v12M58%2040v8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)