设计系统相关 AI 资讯 · AI 热点

8月19日

22:55

22:55

Lovable@lovable_dev

Lovable公司宣布设计系统功能现已加入所有付费计划。用户可上传品牌指南确保应用保持一致的排版、颜色和间距。该功能支持团队构建的所有应用保持设计一致性。

AI产品 Lovable 设计系统 UI/UX

推荐理由：Lovable给付费用户加设计系统功能，上传品牌指南就能让所有App保持统一设计风格，很实用。

8月15日

22:12

22:12

Viking@vikingmute

设计师Marek Minor发文详述他为Cursor绘制整套图标系统的过程，耗时约一年，纯手绘完成600多个图标。图标覆盖16px和24px两种尺寸，以及Outline线框和Filled填充两种风格。文章解释了为何描边宽度定为1.25px，并透露为了一个汉堡菜单图标迭代了156个几乎相同的版本。全文配有大量图示，展示从探索到最终实现的设计流程，且明确表示没有使用AI生成。

技巧 Cursor 图标设计设计系统

推荐理由：Marek Minor把Cursor图标设计讲透了：600多个图标画一年，连1.25px描边和156个汉堡图标都展示，没有AI味，全是人味。

7月30日

01:19

01:19

官方账号Replit@Replit

Replit 推出新产品 Replit Design，将 AI 设计流程整合进单一平台。用户可上传自有设计系统或从零创建，所有设计元素一键连接品牌资产。该工具解决了当前多工具间设计碎片化、传递丢失信息的问题。Replit Design 支持从提示、精修到发布的全流程闭环。

AI产品 Replit Replit Design 设计系统

推荐理由：Replit 新出的设计工具，内置设计系统，上传或新建后一键绑定品牌，省掉中间倒来倒去的麻烦。

7月27日

14:08

14:08

shao__meng@shao__meng

精选

Claude Design 作者 Nate Parrott 分享了使用该工具的十条最佳实践。他强调在 prompt 前先想清楚，有时用语音口述或录音转文字。他建议注入设计约束（如字体、颜色、moodboard）避免“AI 味”，将重复工作抽象为 design system 上传规范。他还提出一次性生成十个方案再 remix，以及用纸笔画出布局拍照上传。Nate 推荐开启听写配合指针指向元素，保真度低时先做线框，最后一公里用手动编辑工具调整。他提到连接 GitHub 获取真实上下文（组件、现有页面），并可并行发送多条消息与 Claude 协同工作。

技巧 Claude Design Nate Parrott Opus 4.5

推荐理由：Claude Design 作者亲授十条经验，从 prompt 技巧到设计系统、并行工作流，全是实战干货，比官方文档还实用。

7月21日

16:55

16:55

官方一手marktechpost@Michal Sutter

Meta开源了内部使用8年、覆盖13000多个应用的React设计系统Astryx。该系统提供150多个无障碍组件、7个主题和暗黑模式。Astryx还附带针对AI代理优化的CLI工具，并采用MIT许可。Astryx要求React 19+版本。

AI产品 Meta Astryx React

推荐理由：Meta开源Astryx，150+组件、Agent就绪CLI，React 19+，适合构建AI代理UI。

7月6日

11:54

11:54

Viking@vikingmute

开发者逆向工程了 Claude Design 的设计系统提示词，公开了一份包含20个章节的主 prompt 和14个独立技能。该提示词还提供了针对 Codex 的适配版本，但原作者推测在 Claude 上效果最佳。用户可在其他模型上测试该提示词的效果，以验证其通用性。

技巧 Claude 提示词工程设计系统

推荐理由：有人把 Claude Design 的设计系统提示词拆出来了，整整20章和14个技能，还有给 Codex 用的版本。拿去别的模型上玩玩看，挺有意思的。

6月26日

11:19

11:19

shao__meng@shao__meng

精选

v0 推出 Design Systems 2.0，该功能可让 v0 一次性学习你的设计系统（组件、tokens、约定），此后所有对话均使用真实组件库生成应用，无需重复描述或贴文档。它通过一个“适配器” skill 存储，指向真实源代码仓库（如 GitHub），声明可安全使用的组件/props/tokens，并告知接入方式（providers、全局样式等）。导入工作流包含5个步骤：收集来源（设计系统包、源码、Storybook 等）、配置环境变量、补充备注、自动生成 v0.json、审查启动应用。v0.json 仅含机器可复用部分，包括 referenceWorkspace.sources（最多3个只读源）、environment.providers、starter。更新 skill 不会自动迁移旧项目，需显式重写。

AI产品 v0 Design Systems 2.0 GitHub

推荐理由：v0 出了一招：把你的设计系统注册成一个 skill，之后每次生成 app 都用真组件，不用反复描述样式，省大事了。

6月18日

09:30

09:30

小互@imxiaohu

Anthropic 更新了 Claude Code 和 Claude Design 的集成，新增双向同步功能。运行 /design-sync 可将设计拉取到代码库，基于真实组件构建；使用 /design 可将代码推回 Claude Design 画布编辑。编辑器新增拖拽、缩放、对齐、修改字体和颜色等传统设计工具操作。导出格式扩展至 PDF、PPTX、Canva、HTML、Claude Code 五种。Claude Design 现在支持三种方式读取设计系统：指向 GitHub 仓库读取代码中的颜色变量、间距常量、组件样式；上传 Figma 文件；上传品牌规范文档，并在生成后自动对照设计系统检查并修正偏差。

AI产品 Claude Code Claude Design 设计系统

推荐理由：Claude 终于让设计师和开发者能双向同步了，还能直接读你 GitHub 的组件代码，自动检查设计偏差，省去手动对齐的麻烦。

6月16日

13:28

13:28

宝玉@dotey

baoyu-design skill 近期更新，支持在本地运行 Claude Design 的功能。用户可以借助 Cursor 或 Codex 内置浏览器预览 PPT，按 F 键全屏播放，并能导出为可编辑的 PPTX 文件。新版本还支持导入 Figma 本地 .fig 文件，根据设计系统在本地重建，效果与 Claude Design 在线版一致。作者指出该功能复杂，没有 Claude Fable 5 难以实现，且 token 消耗较大。

技巧 baoyu-design Claude Design Figma

推荐理由：宝玉这个 Skill 更新很实用，本地就能跑 Claude Design，还能导入 Figma 做设计系统，用 Cursor 预览 PPT，导出 PPTX，赶紧试试。

13:11

13:11

@zarazhangrui@zarazhangrui

一位AI专家建议，跨职能团队应为彼此构建专属智能体/技能，例如设计团队可为营销团队创建一个基于品牌指南和设计模式的设计智能体。这样营销团队能自主产出符合品牌规范的素材，无需频繁打扰设计师。这种模式适用于任何紧密协作且相互抱怨资源有限的团队，帮助团队转向“循环”而非“职能”的组织方式。

技巧智能体跨职能团队设计系统

推荐理由：设计师可以给营销团队建个智能体，把品牌规范喂进去，他们就能自己出图不用老来喊你。

6月14日

12:51

12:51

宝玉@dotey

设计师dotey分享用AI Agent辅助设计后，修改字型字号颜色的新方式。首先，使用设计系统规范按钮圆角、字号、间距，避免3px、5px等随意值。其次，设计师通过文字指令指挥Agent修改，Opus 4.8+结合设计系统可做到“言出法随”。最后，设计师负责把控大方向和验收结果，Agent执行具体调整。

技巧 AI Agent 设计系统 Opus 4.8

推荐理由：设计师用Agent改设计的新思路

6月11日

14:58

14:58

宝玉@dotey

baoyu-design skill 新增支持导入 Figma 本地 .fig 文件，用户可将设计系统的 Figma 文件在本地重建为设计系统，效果与 Claude Design 在线版一致。该功能实现复杂，开发者表示没有 Claude Fable 5 的帮助难以完成。使用方式简单：安装 skill 后，将 Figma 文件路径发送给 skill，导入为 Design System，后续新建设计项目即可直接使用。该更新解决了本地设计系统与 AI 设计工具衔接的问题，适合设计师和前端开发者。

AI产品 Claude Design Figma 设计系统

推荐理由：设计师和前端开发者终于可以在本地用 AI 重建 Figma 设计系统了，效果媲美在线版，而且操作简单——把 .fig 文件路径丢给 skill 就行，值得一试。

09:20

09:20

宝玉@dotey

Claude Design 交付的设计结果是 HTML + CSS + React + data.js 的组合，而非传统图片或 Figma 文件。这种文本格式让开发者能通过 CSS 看清设计系统规范，通过 React 理解组件结构，通过 data.js 掌握数据结构。更重要的是，所有文件都是纯文本，可以提交到 Git 做版本管理，用 git diff 清晰追踪设计变更。相比 Figma，这种格式对 AI 和开发者都更友好，建议设计交付时采用。

AI产品 Claude Design 设计系统 Git版本管理

推荐理由：做设计系统或前端开发的团队，用 Git 管理设计稿比 Figma 更高效——文本格式让 AI 也能看懂变更，建议试试 Claude Design 的交付方式。

6月8日

21:16

21:16

官方一手歸藏(guizang.ai)@op7418

笑林老师结合自身在字节跳动8年经验，调研并总结了设计工程师的5种典型画像：AI Design Engineer、Product UI Craft Engineer、Design Systems Engineer、Creative Technologist、AI Design Workflow Architect。每种画像都有明确的定位、典型任务、关键证据和不适合信号。文章旨在帮助求职者理解不同方向的设计工程师岗位要求，并提供了豆包手机团队招聘设计工程师的信息。

行业设计工程师 AI产品动效设计

推荐理由：设计工程师是AI时代的热门岗位，但很多人不清楚具体方向。笑林老师用实战经验拆解了5种画像，想做AI产品、动效、设计系统或创意技术的开发者都能找到自己的定位，建议仔细对照评估。

10:52

10:52

宝玉@dotey

宝玉指出，使用 Claude Design 的关键前提是拥有自己的设计系统（Design System）。一旦设计系统定义好 UI 规范，设计师就可以将更多精力放在用户体验（UX）设计上，而非重复的 UI 细节。这为 AI 辅助设计工具的正确使用指明了方向，即让工具服务于更高层次的设计决策。

AI产品 Claude Design 设计系统 UX设计

推荐理由：如果你在用 AI 做设计却感觉效率提升有限，问题可能出在缺少设计系统——这篇观点点出了关键，做 UI/UX 的设计师值得一看。

6月7日

11:12

11:12

宝玉@dotey

Claude Design 分享了8条产品设计核心原则，涵盖交互本质、设计系统、字体搭配、像素克制、发布意义、留白艺术、色彩法则和用户心理模型。这些原则简洁而深刻，直击设计本质，适合所有产品设计师、开发者和创作者反思。每条都配有中英文对照，便于理解。

技巧产品设计 UI/UX 设计系统

推荐理由：这8条心法戳中了产品设计中最容易被忽视的底层逻辑，做UI/UX的设计师和产品经理看完会重新审视自己的设计决策，建议收藏反复看。