作者整理了自己收藏的大量前端 UI/UX 设计资源，并借助 Codex 分类归纳，形成一张面向实际工作的资源地图。文章将设计资源分为五类：真实产品案例（UXSnaps、Mobbin、SaaSFrame）、设计模式与拆解（Design Spells、Component Gallery）、设计系统与 Design Token、组件实现（Base UI、React Aria、shadcn/ui 等）以及质量验收（WCAG 无障碍、性能测试）。作者强调有效的使用顺序是：真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收，帮助读者从'抄视觉'升级为'有理由的设计'。
作者作为探索 AI 与设计工程化的设计师，复盘了三次搭建自有设计组件库的尝试：第一次直接基于 shadcn/ui 纯 vibe 开发，因现成视觉规范黑盒与覆盖负担而放弃；第二次回到 Figma 定义颜色、变量与基础组件，通过 Figma MCP 交给 AI 批量转换代码，并按视觉骨架将组件分类，但自搭预览环境成为维护包袱；第三次引入 Base UI 无头组件库接管行为结构、以语义 Token 命名视觉规则、用 Storybook 建立反馈回路，一天完成组件库开发。文章总结出关键经验：把设计判断抽象为可命名的 Token 契约、选用无审美包袱的无头底座、用切片沙箱建立反馈回路，为后续 Design Harness 打下稳固基石。
本文介绍用AI搭建个人网站的最佳实践：先整理个人内容到飞书文档，再参考优质网站让AI抓取代码与风格。作者系统整理了8大类60多个网页设计资源，涵盖组件库（shadcn/ui、Aceternity UI、Magic UI等）、动效与3D工具（Motion、GSAP、Three.js、Spline等）、整站灵感网站（Awwwards、Land-book等）、产品界面参考（Mobbin、Page Flows等）以及配色素材、AI建站和Claude Skills等类别。每个资源均附特色说明与具体用法，可让AI直接复用代码和Prompt，适合从零搭建或迭代优化个人网站时收藏使用。
本文是一份前端设计系统技能指南，旨在创造具有鲜明视觉特征的生产级界面。文章强调从理解上下文、坚持极端艺术指导、发明标志性元素入手，严格规定字体、色彩、布局、动效及材质的硬性规则，要求摒弃 Inter 字体、紫色渐变等常见 AI 烂俗审美。同时明确了无障碍访问、响应式设计、性能优化及错误处理等生产要求，确保叙事一致性。
文章介绍了一套高效的 Claude Design 工作流，通过建立设计系统、构建模板和使用技能预定义文案三个步骤，避免无休止的迭代，实现从想法到高保真响应式设计的快速落地。
文章指出了利用 AI 编写前端界面时风格单一、提示词难以精确描述的问题。作者推荐了 'Awesome Design Skills' 合集，该合集包含 67 套设计系统技能文件，涵盖毛玻璃、极简等多种风格。用户只需一条命令即可引入这些规范，适配 Claude Code 等工具，从而让 AI 按照既定标准生成界面，极大提升了开发效率和风格的可控性。
文章介绍了一个名为 UI UX Pro Max 的项目，它通过为 AI 编程助手内置包含 161 条行业规则、67 种风格和 161 套配色的大型设计推理引擎，解决了 AI 写前端代码“功能强但审美差”的痛点。安装该 Skill 后，AI 能根据产品类型自动匹配专业的设计系统、风格、字体及色彩方案，并自动进行反模式检查，支持 React、Vue、SwiftUI 等 13 种技术栈。
文章分享了作者作为一名工程师，利用三层代理框架实现端到端设计交付的实践。第一层通过 Impeccable 等技能注入专业审美，第二层使用 Paper 或 Pencil 等画布工具构建可代码化的界面，第三层利用 Variant 和 Mobbin 提升设计品味。作者展示了如何在不成为专业设计师的情况下，通过工具链组合突破技能瓶颈，实现每周发布高质量作品。
作者精选10个设计师宝藏资源，覆盖配色（Coolors）、字体、图标、插画、动效、3D设计、图片、CTA按钮、品牌视觉管理和AI交互模式等领域。文章强调审美提升靠日复一日的浸泡，每个资源都附推荐理由与使用建议，帮助读者建立自己的资源库与判断标准，逐步将好设计运用到作品中。
本文介绍了用AI开发小程序时如何补齐设计规范，解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解：确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈，以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑（规范与代码各改各的）的解决方法、维护流程和一段可直接使用的提示词，帮助AI持续按同一套规则产出页面。
文章以Punk咖啡馆点单小程序为例，沿着菜单、规格、购物袋、确认订单四个页面，图文讲解15个布局与视觉设计名词，包括信息架构、用户流程、线框图、首屏、视觉层级、栅格、对齐、留白、响应式布局、安全区域、设计变量、语义色、字阶、行高及Padding/Margin。作者还指出固定底栏遮挡内容的常见坑，并给出从定入口、画线框、定边距对齐到小程序内验证的完整排版流程，帮助读者用具体语言描述布局需求，让AI能精准修改页面。
本文翻译自 Polar 官方博客，介绍其新设计系统 Orbit 背后的思考。随着 LLM 和 Coding Agent 大量参与前端 UI 开发，传统基于 Tailwind 字符串的样式写法导致设计一致性难以保障。Orbit 的核心思路是：将设计规范从文档升级为代码约束——Token 按设计意图命名（如 background-card），通过 StyleX 构建类型安全的 Box 组件作为唯一样式入口，禁止直接使用原始 div，并在 CI 中以 Oxlint 规则强制执行，使偏离设计系统的代码在机制上无法通过。文章强调文档只是概率性建议，CI 才是确定性契约。
作者在推特上分享了一套多领国（Duolingo）风格的 shadcn 组件库，其特点是游戏卡通风格。作者推荐喜欢这种设计风格的开发者不要错过，并附上了组件库的链接和展示图片。这是一条简短的前端 UI 组件资源分享内容，适合正在寻找特色设计组件库的前端开发者参考使用。
