📚 Wiki 知识库

🏷️ 设计系统

13 篇

前端设计技能指南:拒绝 AI 烂俗审美

本文是一份前端设计系统技能指南,旨在创造具有鲜明视觉特征的生产级界面。文章强调从理解上下文、坚持极端艺术指导、发明标志性元素入手,严格规定字体、色彩、布局、动效及材质的硬性规则,要求摒弃 Inter 字体、紫色渐变等常见 AI 烂俗审美。同时明确了无障碍访问、响应式设计、性能优化及错误处理等生产要求,确保叙事一致性。

技术前端 ✍ JoePro🕐 2026-07-14

用 SKILL 一句话搞定书签整理,还能导出漂亮的导航站

本文介绍了一款名为 rico-bookmark-manager 的工具,旨在解决浏览器书签过多、难以整理的痛点。用户只需导出书签 HTML,通过 SKILL 简单指令,即可实现自动分类、死链检测及去重。此外,该工具还能利用内置的设计系统主题,一键生成个性化的本地静态导航站,确保数据的本地掌控与安全。

技术Skill ✍ RicoUI🕐 2026-07-02

改了 5年总裁汇报 PPT,我把精修经验做成了开源系统

作者基于 5 年大厂产品汇报经验,指出 AI 生成 PPT 常止步于 80 分,后续精修耗时耗力。为此开源了 Slides from Anything (SFA) 系统,集成 Design Vault 将美学抽象为 Agent 可复用的规则,通过先对齐目标、再结合手动微调与 Agent 批改的方式,打通从材料到多格式交付的全链路,解决演示文稿最后 20 分的交付难题。

技术工具与效率 ✍ 冯三秋🕐 2026-05-28

用 AI 写前端界面生成风格千篇一律

文章指出了利用 AI 编写前端界面时风格单一、提示词难以精确描述的问题。作者推荐了 'Awesome Design Skills' 合集,该合集包含 67 套设计系统技能文件,涵盖毛玻璃、极简等多种风格。用户只需一条命令即可引入这些规范,适配 Claude Code 等工具,从而让 AI 按照既定标准生成界面,极大提升了开发效率和风格的可控性。

技术前端 ✍ GitHubDaily🕐 2026-05-14

用好 Google DESIGN.md 与 Agent Skills 打造亿元公司质感的创业项目

文章介绍了 Google 开源的 DESIGN.md 标准,通过将设计系统的核心元素结构化,解决了 AI 生成 UI 时的一致性痛点。结合 Agent Skills,创业者可快速建立统一的设计语言,应用于官网、App、PPT 等多个触点,在 1 小时内大幅提升项目的视觉质感,使其具备独角兽公司的专业外观。

技术Agent ✍ meng shao🕐 2026-05-07

design.md:2026年的设计系统新原语

文章指出在2026年,项目中最重要的设计文件不再是 Figma 库,而是位于代码仓库根目录下的 design.md。文章解释了随着 Claude Code、Cursor 等 AI 编程工具的普及,通过 Markdown 文件定义视觉规则(如 Token、布局、组件样式)已成为让 AI 生成符合品牌 UI 的最佳实践。文中提供了 design.md 的标准五段式骨架,并详细说明了如何通过颜色、排版、组件和可访问性规则来约束 AI 生成结果。

技术工具与效率 ✍ rico🕐 2026-04-30

DESIGN.md:网页设计的极致工作流升级

文章介绍了一种通过创建 DESIGN.md 文件来规范 AI 辅助网页设计工作流的方法。作者指出,直接使用 AI 生成不同页面(如定价页、着陆页)时,往往会导致风格不统一。解决方法是将字体、配色、动画时间轴、布局规则等提取到 DESIGN.md 中,并将其作为上下文提供给 Claude Design。这样生成的所有页面都能保持一致的视觉风格(如 Liquid Glass 风格),从而实现从“逐个提示”到“系统化构建整个站点”的效率飞跃。

技术前端 ✍ Viktor Oddy🕐 2026-04-28

DESIGN.md:让 AI Agent 保持 UI 一致性的关键

文章指出 AI 生成 UI 的最大问题在于缺乏一致性,并引入了 Google Stitch 团队提出的 DESIGN.md 概念。DESIGN.md 是一种纯文本文档,包含机器可读的 YAML 代码(颜色、字体)和人类可读的 Markdown 规则(设计原则),用于指导 Agent 遵循统一的设计规范。文章详细阐述了 DESIGN.md 的结构、编写方法(如从现有 UI 推断、避免模糊的形容词)以及如何让 AI 引用该文档进行自我审查,强调它是辅助而非取代设计师的工具。

技术Agent ✍ George from prodmgmt.world🕐 2026-04-27

Claude Design 工程师实战指南:30个核心技巧与行业洞察

Anthropic 发布 Claude Design,通过自然语言生成原型、PPT 等设计,引发 Figma 股价下跌。作者深度体验后总结了 30 条实战建议:包括避开 Pro 用户的额度陷阱、利用自定义滑块、内联评论进行迭代、禁止默认的“通用 SaaS 风格”等。文章指出该工具擅长单屏设计,但弱于多页状态流,并强调了 HTML 导出与 Claude Code 联动的颠覆性,预示着设计与开发交接模式的根本变革。

技术Claude ✍ The Smart Ape🕐 2026-04-19

Claude Design 工程师实战指南:30 个关键要点

本文是针对 Claude Design 的深度实战指南,涵盖了 30 个关键知识点。作者分析了该工具对市场(如 Figma、Canva)的冲击,并详细介绍了 Prompt 策略、滑块交互、代码库集成、工作流优化等核心功能。文章还探讨了设计师职业角色的转变,强调了对齐与审美成为核心竞争力,而非单纯的执行速度。

技术Claude ✍ The Smart Ape🕐 2026-04-19

无需设计的设计:工程师如何用 Agent 框架搞定 UI/UX

文章分享了作者作为一名工程师,利用三层代理框架实现端到端设计交付的实践。第一层通过 Impeccable 等技能注入专业审美,第二层使用 Paper 或 Pencil 等画布工具构建可代码化的界面,第三层利用 Variant 和 Mobbin 提升设计品味。作者展示了如何在不成为专业设计师的情况下,通过工具链组合突破技能瓶颈,实现每周发布高质量作品。

技术Agent ✍ Neethan Wu🕐 2026-03-22