#设计系统

avatar
还在处找风格不统一的 SVG 图标拼凑界面吗？ Phosphor Icons 是目前 Figma 社区和前端开发圈最受推崇的图标库之一，它不是简单的“图片集合”，而是一套严谨的“设计系统”。 它有什么特别厉害的特点？ 风格高度统一：拥有 6 种不同的粗细风格（从 Thin 到 Fill），完美适配从极简 App 到复杂 B 端后台的任何场景。 开发极其友好：除了 Figma 插件，它对 React, Vue, Flutter 等前端框架的支持极其完善，复制一行代码就能用，你的开发同事会感谢你的。 灵活易改：它的线条结构处理得非常干净，即使你把它放大 10 倍作为背景纹理，细节依然完美。 当你需要一套能伴随产品从小长到大的图标系统时，Phosphor 是最稳健的选择。
#SVG图标 #Phosphor Icons #Figma插件 #前端开发 #设计系统
avatar
赵纯想
4天前
纯ClaudeCode风味手搓设计系统。
AI编程工具激战：Claude Code、Gemini Cli崛起· 1203 条信息
#ClaudeCode #设计系统 #手搓 #技术 #中性
avatar
宝玉
1个月前
如何编写 prompt 才能让大模型更好地理解工具？ 这个问题的答案很简单：让模型来写 Prompt，让模型给你反馈。 举个案例，我上个帖子说到帮朋友做一个他们设计系统的 Coding Agent，初始提示词的产生是这样的： 1. 先让 Claude Code，去基于设计系统（Design System）做一个 Login 页面，要求只能用设计系统的组件，要求搜索、阅读设计系统的文档去了解怎么使用这个设计系统。 2. 当 Claude Code 完成这个任务后，实际上它已经收集够了基于这套设计系统完成一个登录页面所需要的所有信息，然后基于当前会话当前上下文，让 Claude Code 为一个 Coding Agent 写一个 System Prompt，让这个 Coding Agent 也能像它一样： - high level 的了解这套设计系统 - 知道去什么地方检索文档 - 常用的组件有哪些 - 最佳实践是什么 - 等等 3. 将 Claude Code 生成的 System Prompt 去测试，看差距在哪，然后回到之前 Claude Code 的会话，告诉它之前的 Prompt 存在的问题，让它优化，这样迭代几个版本就没问题了。 这就好比你先请一个开发高手来做一个项目，项目做完了，你让他们把文档写下来，写成说明书，其他人也能参考这个说明书像他们一样做好这个项目。
#大模型 #prompt编写 #Coding Agent #设计系统 #Claude Code
avatar
宝玉
1个月前
如果你想开发一个 Agent，无论你是打算做 CLI 还是做 Web 还是 Windows，都可以考虑使用 Claude Agent SDK，和 Claude Code 共享的底层代码，Claude Code 就是基于它之上加了个 CLI 的 UI，也就是说你完全可以基于它写一个 Claude Code 出来。 我昨天帮朋友花了几个小时就实现了个简单的 Agent，实现了输入提示词，就可以基于某个没训练的 Design System 写一套 UI 出来。 他写的这个 Agent 原理很简单，就是把这套设计系统的所有 Markdown 文档（几百个）放到一个它可以访问的目录，然后在 Systme Prompt 里面引导它去检索这个文档目录。 当用户输入提示词或者 Screenshot 要做一个 UI，Agent 就根据提示词规划可能要用到的组件，然后用 SDK 自带的 GREP 工具去检索文档库找到这些组件的 API，最后基于收集到的信息用这个 Design System 组件生成页面。 这个 SDK API 很简单，但很强大，你不止是可以用它内置的工具（Task、Grep、WebFetch 等等），你还可以添加自己的工具，还可以用 MCP。并且它可以把整个交互的结果通过 API 让你可以获取到原始的请求和返回消息，这样你可以自己实现一套比 CLI 更好用的交互 UI。 当然这个局限也有： 1. 只能用 Claude 模型兼容的 API，如果你想用 GPT-5 之类模型，估计效果不会太好 2. 只支持 Python 和 TypeScript 3. Tokens 消耗飞快 如果你只是做前期的 POC，强烈建议你试试。
AI编程工具激战：Claude Code、Gemini Cli崛起· 1203 条信息
#Claude Agent SDK #Agent开发 #UI设计 #设计系统 #Python/TypeScript