Wiki 知识库

全部文档 / 标签: Design Token

3 篇
清除

用AI做小程序:7步补齐设计规范

本文介绍了用AI开发小程序时如何补齐设计规范,解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解:确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈,以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑(规范与代码各改各的)的解决方法、维护流程和一段可直接使用的提示词,帮助AI持续按同一套规则产出页面。

技术 › 前端 Adrian Punk 2026-10-0911.8 KB 21.1K 95 82

Polar: 如何让 LLM 写出的 UI 不偏离设计系统

本文翻译自 Polar 官方博客,介绍其新设计系统 Orbit 背后的思考。随着 LLM 和 Coding Agent 大量参与前端 UI 开发,传统基于 Tailwind 字符串的样式写法导致设计一致性难以保障。Orbit 的核心思路是:将设计规范从文档升级为代码约束——Token 按设计意图命名(如 background-card),通过 StyleX 构建类型安全的 Box 组件作为唯一样式入口,禁止直接使用原始 div,并在 CI 中以 Oxlint 规则强制执行,使偏离设计系统的代码在机制上无法通过。文章强调文档只是概率性建议,CI 才是确定性契约。

技术 › 前端 RicoUI 2026-09-2220.1 KB 19.1K 182 83

前端 UI/UX 设计:一套从灵感到落地的资源地图

作者整理了自己收藏的大量前端 UI/UX 设计资源,并借助 Codex 分类归纳,形成一张面向实际工作的资源地图。文章将设计资源分为五类:真实产品案例(UXSnaps、Mobbin、SaaSFrame)、设计模式与拆解(Design Spells、Component Gallery)、设计系统与 Design Token、组件实现(Base UI、React Aria、shadcn/ui 等)以及质量验收(WCAG 无障碍、性能测试)。作者强调有效的使用顺序是:真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收,帮助读者从'抄视觉'升级为'有理由的设计'。

技术 › 前端 meng shao 2026-08-2624.0 KB 29.9K 227 84