关于AIGC人工智能、思维方式、知识拓展，能力提升等。投稿/合作： @inside1024_bot
AIGC 领域的最新工具、开源项目以及行业大事件
AIGC 领域的最新工具、开源项目以及行业大事件
1️⃣ 颜色变量：定义主色、辅助色、背景色、文字色等。
比如主色我设置为#FF6B35（活力橙），然后把所有需要用主色的地方（按钮、图标、强调文字等）都绑定这个变量。
以后如果要换主题色，只需要修改这一个变量，整个设计稿的颜色就会同步更新。
2️⃣ 数值变量：管理各种尺寸参数。
我一般会定义spacing-xs（4px）、spacing-sm（8px）、spacing-md（16px）、spacing-lg（24px）这样的间距变量，还有字号变量font-xs（12px）、font-sm（14px）、font-md（16px）等。
用了这些变量后，整个设计的间距和字号就会很规范，不会出现这里14px那里15px的混乱情况。
3️⃣ 文本变量：存储那些会重复出现的文案。
比如按钮上的"立即开始"、"查看详情"这些文字，定义成变量后，如果产品经理要改文案，你只需要改一次就行了。
这里要重点说一下变量的一个强大功能：模式切换。
比如我在做这个App的时候，希望同时设计深色和浅色两套主题。
传统做法需要复制一份设计稿，然后逐个修改颜色，工作量巨大，而且后期维护也很麻烦。
用变量系统就简单多了，我可以直接创建两个模式："浅色模式"和"深色模式"，然后给同一个颜色变量在不同模式下设置不同的值。
比如背景色变量，在浅色模式下设置为#FFFFFF，在深色模式下设置为#1A1A1A。
设置完成后，只需要在右侧面板切换模式，整个设计稿就会自动切换主题。
这个功能不仅可以节省时间，还能确保两套主题的设计一致性。
第四步：设计稿转代码
借助Pixso MCP，你可以直接把你的设计稿转成代码。
具体怎么操作呢？
首先确保你安装了最新版的Pixso客户端，然后在文件菜单里启用Pixso MCP。
启用后，画布底部会出现一个提示，说明MCP服务已经开启。
接下来需要把Pixso MCP集成到你的代码编辑器里。
我用的是Cursor，配置过程很简单。
打开Cursor的设置，找到Tools & MCP，添加一个自定义MCP，粘贴配置代码，保存后启动就可以了。
配置完成后，回到Pixso，选中你要转换的设计稿（一个容器或者组件），右键复制链接。
然后切换到Cursor，打开Agent模式，粘贴链接，告诉它"生成HTML代码"或者"生成React组件"。
几分钟后，Cursor就会自动生成对应的前端代码。
这个功能对前端工程师来说也很友好，可以直接在Cursor里获取设计稿数据，包括样式、间距、颜色等，不用再手动去量尺寸了。而且因为代码是AI生成的，命名规范、代码结构都比较标准。
特别是当你用了变量系统后，MCP在转换代码的时候也能识别这些变量，生成的CSS会使用CSS变量，这样前端后续维护起来也很方便。
当然，对于设计师来说，最终还是要看你能不能做出好的设计。
如果你现在正在寻找合适的UI设计工具，可以试试Pixso，个人版免费，上手成本低，功能也足够强大。
当然，工具会不断迭代，方法也会持续优化，保持学习的热情、享受设计的过程，才是最重要的。
比如主色我设置为#FF6B35（活力橙），然后把所有需要用主色的地方（按钮、图标、强调文字等）都绑定这个变量。
以后如果要换主题色，只需要修改这一个变量，整个设计稿的颜色就会同步更新。
2️⃣ 数值变量：管理各种尺寸参数。
我一般会定义spacing-xs（4px）、spacing-sm（8px）、spacing-md（16px）、spacing-lg（24px）这样的间距变量，还有字号变量font-xs（12px）、font-sm（14px）、font-md（16px）等。
用了这些变量后，整个设计的间距和字号就会很规范，不会出现这里14px那里15px的混乱情况。
3️⃣ 文本变量：存储那些会重复出现的文案。
比如按钮上的"立即开始"、"查看详情"这些文字，定义成变量后，如果产品经理要改文案，你只需要改一次就行了。
这里要重点说一下变量的一个强大功能：模式切换。
比如我在做这个App的时候，希望同时设计深色和浅色两套主题。
传统做法需要复制一份设计稿，然后逐个修改颜色，工作量巨大，而且后期维护也很麻烦。
用变量系统就简单多了，我可以直接创建两个模式："浅色模式"和"深色模式"，然后给同一个颜色变量在不同模式下设置不同的值。
比如背景色变量，在浅色模式下设置为#FFFFFF，在深色模式下设置为#1A1A1A。
设置完成后，只需要在右侧面板切换模式，整个设计稿就会自动切换主题。
这个功能不仅可以节省时间，还能确保两套主题的设计一致性。
第四步：设计稿转代码
借助Pixso MCP，你可以直接把你的设计稿转成代码。
具体怎么操作呢？
首先确保你安装了最新版的Pixso客户端，然后在文件菜单里启用Pixso MCP。
启用后，画布底部会出现一个提示，说明MCP服务已经开启。
接下来需要把Pixso MCP集成到你的代码编辑器里。
我用的是Cursor，配置过程很简单。
打开Cursor的设置，找到Tools & MCP，添加一个自定义MCP，粘贴配置代码，保存后启动就可以了。
配置完成后，回到Pixso，选中你要转换的设计稿（一个容器或者组件），右键复制链接。
然后切换到Cursor，打开Agent模式，粘贴链接，告诉它"生成HTML代码"或者"生成React组件"。
几分钟后，Cursor就会自动生成对应的前端代码。
这个功能对前端工程师来说也很友好，可以直接在Cursor里获取设计稿数据，包括样式、间距、颜色等，不用再手动去量尺寸了。而且因为代码是AI生成的，命名规范、代码结构都比较标准。
特别是当你用了变量系统后，MCP在转换代码的时候也能识别这些变量，生成的CSS会使用CSS变量，这样前端后续维护起来也很方便。
当然，对于设计师来说，最终还是要看你能不能做出好的设计。
如果你现在正在寻找合适的UI设计工具，可以试试Pixso，个人版免费，上手成本低，功能也足够强大。
当然，工具会不断迭代，方法也会持续优化，保持学习的热情、享受设计的过程，才是最重要的。
比如一个炒股工具，号称能有 20% 收益，就会有很多人去用。
如果少数人赚到了这个收益并传播出来，就会源源不断有人去用。直到大众发现，20% 收益是骗人的，还经常会亏钱。被勾起的动机一旦消失，工具就开始死去。
比如一个视频剪辑工具，通过短视频的网红和各种直播课程，勾起了你也想成为网红的动机，开始有欲望想去做视频，那么这个剪辑工具就会有人去用。哪怕非常难用，人也会去用。甚至因为难用，会激发出斗志。觉得自己如果能用起来，就有机会超越他人，有机会先一步成为网红。
然而一旦发现自己做的短视频始终没流量，动机淡去，工具变得非常简单了，也不会再去用了。
万千工具，都需要有使用的动机。厉害的工具，往往都是刻意或恰巧踩中了大量用户的某种欲望。
1、Excalidraw：可以手绘图绘制，一键导入笔记中，支持转图和内嵌。
2、Dataview：可自定义展示数据
3、calendar：在右边栏展示日历，可配合日记来使用
4、Better Word Count：取代官方的字数统计，能统计指定字数
5、Make.md：自定义视图，方便为笔记生成类似 notion 的封面等信息
6、 Hover Editor：鼠标放在超链接上按住 cmd，能直接预览链接的东西
7、Paste URL into selection：网页链接可先打说明文字，然后选中复制你的链接即可行程一个超链接了
8、Hider：隐藏一些你不想展示的东西
9、Easy Typing：中文和英文之间空格等优化编辑体验的插件
10、Image Auto Upload：需要配合 picgo，能直接将黏贴板的图片上传到图床
11、Weread：自动将微信读书的笔记等信息同步到 obsidian
