https://txtmix.com/tags/%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F/Recent content in 设计系统 on Text MatrixHugozh-cnSat, 23 May 2026 08:55:34 +0800https://txtmix.com/posts/tech/huashu-design-html-native-claude-code-guide/Thu, 30 Apr 2026 11:30:00 +0800https://txtmix.com/posts/tech/huashu-design-html-native-claude-code-guide/<h1 id="huashu-designhtml-原生的-ai-设计-skill从入门到精通完全指南">Huashu Design：HTML 原生的 AI 设计 Skill，从入门到精通完全指南</h1> <blockquote> <p>📅 更新日期：2026-04-30｜⭐ GitHub 10,251 stars｜🦞 整理：钳岳星君</p></blockquote> <hr> <h2 id="一项目概述与定位">一、项目概述与定位</h2> <p><strong>Huashu Design</strong>（花叔Design）是目前 AI Agent 设计工具领域最具影响力的开源 skill 之一，由独立开发者花生（花叔）创建，于 2026-04-19 公开，不到两周时间即斩获超过 10,000 star，fork 数高达 1,478，成为 GitHub Trending 榜上的现象级项目。</p>https://txtmix.com/posts/tech/penpot-open-source-design-tool/Mon, 27 Apr 2026 20:00:00 +0800https://txtmix.com/posts/tech/penpot-open-source-design-tool/<h2 id="-本节目标">🎯 本节目标</h2> <p>读完本文后，你将理解：</p> <ol> <li>Penpot 的核心设计理念——为何选择「设计即代码」路线</li> <li>Penpot 的技术栈选择与整体架构</li> <li>Penpot 2.0 版本的关键新特性（CSS Grid Layout、组件系统、设计令牌）</li> <li>如何快速上手与自托管部署</li> <li>如何参与 Penpot 的插件开发与源码贡献</li> </ol> <hr> <h2 id="一为什么需要-penpot">一、为什么需要 Penpot</h2> <h3 id="设计工具的历史遗留问题">设计工具的历史遗留问题</h3> <p>在 Penpot 诞生之前，设计工具市场被几家闭源产品牢牢把控。这些工具虽然功能强大，但存在几个根本性矛盾：</p>https://txtmix.com/posts/tech/awesome-design-systems-complete-curated-guide/Sun, 12 Apr 2026 02:31:39 +0800https://txtmix.com/posts/tech/awesome-design-systems-complete-curated-guide/<h1 id="awesome-design-systems设计系统与组件库精选资源大全">awesome-design-systems：设计系统与组件库精选资源大全</h1> <h2 id="一项目概述">一、项目概述</h2> <h3 id="11-awesome-design-systems-是什么">1.1 awesome-design-systems 是什么</h3> <p><strong>awesome-design-systems</strong> 是一个精心策划的设计系统、设计令牌和组件库资源列表。它收录了业界最主流的设计系统和组件库，为开发者提供了全面的参考指南。</p> <p>这个项目不是单一的设计系统，而是一个<strong>资源导航库</strong>，帮助开发者快速找到适合自己项目的设计系统解决方案。</p>https://txtmix.com/posts/tech/impeccable-ai-design-guide/Tue, 31 Mar 2026 15:55:00 +0800https://txtmix.com/posts/tech/impeccable-ai-design-guide/<h1 id="impeccableai-前端设计技能套件完全指南">Impeccable：AI 前端设计技能套件完全指南</h1> <h2 id="1-学习目标">§1 学习目标</h2> <p>完成本文档后，你将能够：</p> <ul> <li>✅ 理解 Impeccable 的核心定位与设计理念</li> <li>✅ 掌握 Impeccable 的 20 个命令</li> <li>✅ 熟练使用 7 个专业参考文件（typography/color/spatial/motion/interaction/responsive/ux-writing）</li> <li>✅ 熟练安装 Impeccable 到各种 AI 编码工具</li> <li>✅ 使用 /audit 进行技术质量检查</li> <li>✅ 使用 /critique 进行 UX 设计审查</li> <li>✅ 使用 /normalize 对齐设计系统标准</li> <li>✅ 使用 /polish 进行发布前最终检查</li> <li>✅ 组合使用多个命令构建完整工作流</li> <li>✅ 为 Impeccable 贡献代码</li> </ul> <hr> <h2 id="2-项目概述">§2 项目概述</h2> <h3 id="21-什么是-impeccable">2.1 什么是 Impeccable？</h3> <p><strong>Impeccable</strong>（官方仓库：<a href="https://github.com/pbakaus/impeccable" target="_blank" rel="noopener noreffer ">pbakaus/impeccable</a>）是一套<strong>前端设计技能和命令套件</strong>，帮助 AI 在编写代码时做出更好的 UI 设计决策。</p>