#设计工具

1周前

推荐 Top10：面向前端 / 产品 / UI 的 Agent Skills 这 10 个 Skills 考虑到设计落地频率、对视觉/交互质量的直接提升、在 Codex/Claude Code 等的高复用性。 1. frontend-skill 来自 OpenAI，适合做 landing page、品牌页、demo 页。强项是视觉论点、内容节奏、首屏质量。 2. frontend-design 来自 Anthropic，更偏“高完成度、强风格”的前端设计实现。适合你想把页面做得更有辨识度时用。 3. figma-implement-design 来自 OpenAI，设计稿到代码的核心 skill。凡是产品/设计/前端协作，这个都应该是常用项。 4. web-design-guidelines 来自 Vercel，做 UI 审查非常强。可访问性、表单、动效、排版、交互细节，都能系统性补漏。 5. react-best-practices 来自 Vercel，如果你做 React / Next.js，这个基本必装。它提升的是“实现质量”和“性能质量”。 6. playwright 来自 OpenAI，前端不是只写代码，还要验证真实浏览器行为。这个是 UI 流程调试和回归检查的通用执行层。 7. webapp-testing 来自 Anthropic，比 playwright 更贴近日常本地应用验证，适合检查页面行为、截图、日志和交互回归。 8. canvas-design 来自 Anthropic，适合更自由的视觉探索、展示型页面、画布式交互或概念设计，不是每个项目都需要，但做创意产品页很有价值。 9. brand-guidelines 来自 Anthropic，如果你在做官网、营销页、设计系统、品牌一致性，这个比单纯“写 UI”更上层，适合产品/品牌协同。 10. vercel-deploy-claimable 来自 Vercel，严格说它不是设计 skill，但对前端/产品工作流非常关键。做完页面立刻可部署预览，反馈闭环会快很多。 - 怎么选？- · 偏品牌官网/营销页：frontend-skill、frontend-design、brand-guidelines · 偏产品 UI/设计稿还原：figma-implement-design、react-best-practices、web-design-guidelines · 偏交互验证/可用性：playwright、webapp-testing · 偏创意探索：canvas-design

#前端开发 #产品设计 #UI设计 #人工智能 #设计工具 #代码复用 #视觉质量

1周前

设计这件事，开始从“操作工具”变成“表达想法”了。以前做 UI，你不管用不用 Figma，都得过一遍那套流程：线框 → 组件 → 间距 → 配色 → 原型 → 交付。说白了，是在“拼东西”。但这次Google Stitch 大改版，直接把入口改了——你不用拼了，你只要说：“我要一个健身 App 首页，要有今日训练、看起来有活力一点”，它直接给你一套能用的设计，甚至还能点、能跑流程。而且最离谱的是语音这一块。对着画布说话改设计，这件事一旦习惯了，你真的很难再回去慢慢拖组件。它不是在加一个功能，而是在改交互方式——从“手”变成“嘴”。这玩意儿不会马上干掉 Figma，但它会吃掉一大块原本属于 Figma 的“前期工作”。以前一个想法，从脑子到看到一个还不错的界面，可能要 1-2 小时，现在可能 5 分钟。 Google 这次不是在做一个工具，而是在补一整条链路。设计 → 原型 → 设计系统 → 开发对接（MCP + SDK）意味着它不是想做“Figma 替代品”，而是想做“从想法到产品的第一站”。

#设计工具 #用户界面 #Google Stitch #大改版 #自动化设计 #健身应用 #原型设计

1周前

Vibe Coding 之后，下一个浪潮是 Vibe Design——对着画布说话就能做设计。我整理了一份 Vibe Design 工具 + 资源合集，覆盖从设计到落地的完整链路：一、Vibe Design 工具 Google Stitch 对着画布说话就能做设计，5 大核心能力：无限画布：参考图、文字、代码片段全扔上去，AI 结合上下文协作设计设计 Agent：记住项目修改历史，支持多方案并行推进语音交互：边看边说边改，无需停下来打字即时原型：设计稿一键变可交互原型，自动计算页面跳转 DESIGN.md：设计规范写成纯文本，Claude Code、Cursor 等 AI 工具都能读懂 Pencil 将设计画布集成到 IDE 中的 AI 设计工具，在画布上设计、直接落地为代码。支持自然语言 Prompt 生成页面或局部元素。官网： StyleSpark 面向设计师和开发者的在线设计工具平台，定位"创意与精准的结合"。官网：二、Vibe Design 增强 DESIGN.md 每个项目都有视觉风格（色彩、字体、间距、组件），传统上这些信息存在于 Figma 或设计师的头脑中，AI Agent 无法读取。DESIGN.md 是人类和 Agent 都能读、写、执行的纯文本设计规范——设计版的 AGENTS.md。 Impeccable 为 AI 编程工具设计的前端设计技能增强包，提供 20 项设计技能指令（/polish、/audit、/typeset、/optimize 等），让开发者用专业设计语言驱动 AI，避免千篇一律的"AI 风格"界面。官网：三、设计灵感与 UI 套件灵感网站网页设计 → 着陆页 → 设计系统 → variant 炫酷设计 -> AI 友好的 UI 套件

#VibeDesign #设计工具 #人工智能 #生成式设计 #AI协作

2周前

一句话生成海报，且可以编辑修改文字和元素。 “设计一个海报，关于中国第一界GEO大会，时间在4月11日，地点在中关村。” 这工具有点强啊！

#海报设计 #GEO大会 #中国 #中关村 #设计工具

4个月前

本来以为 Figma 可以做 Display P3 下的 HDR 高光效果放在 app 里用，试了一下午不行。换 Affinity 瞬间搞定😎

#Figma #Affinity #Display P3 #HDR #设计工具

4个月前

用GPT-5.1教我如何使用figma实现一个小feature. 虽然目前LLM无法控制浏览器替代人类在figma上完整地绘画，但是有视觉的LLM仍然可以看见，并且指导我这种小白用文字来step by step执行。缺点是GPT-5.1老是喜欢用Rect而不是Frame，而且经常忘记auto layout，小白一个。但整体用来练习小功能挺不错。类似的，可以用LLM来设计design system.

OpenAI GPT-5发布引发用户不满，阿尔特曼回应质疑· 158 条信息

#GPT-5.1 #Figma #LLM #设计工具 #Design System

4个月前

把一个设计稿移到了 Affinity 里，熟悉了一些基础操作。这么强一个工具免费用，让隔壁 Sketch 怎么活？

#Affinity #sketch #设计工具 #软件 #免费

5个月前

Figma收购以色列初创公司 Weavy 并将推出全新的工具 Figma Weave 你将可以在 Figma 画布中直接调用多个AI模型、更多工具，在同一界面完成生成、编辑与创作。设计、编辑、脑洞，全在一张画布搞定

#Figma #Weavy #Figma Weave #AI模型 #设计工具

5个月前

我让 ChatGPT Atlas 的 Agent 在 Figma 里画了一个爱心设计师要没工作了

#ChatGPT #Figma #AI设计 #爱心 #设计工具

5个月前

同样的提示词，Figma Make 也不差

#Figma #Figma Make #效率工具 #设计工具 #竞品分析

5个月前

开发完成，一个小红书和微信封面设计工具，内置AI生图，用于生成背景和元素。大量开源字体选择，可调整图层，每个元素都可以下载，哪怕是文字或emoji 再也不用为海报设计和封面设计发愁了。暂时开放给身边朋友用，生图API怕扛不住，哈哈哈。

#小红书 #微信封面 #AI生图 #设计工具 #海报设计

5个月前

谁能讲讲Figma 到底有什么moat护城河？它套壳一个GPT比自己用adobe加GPT有什么更大的优势？ $fig

#Figma #GPT #Adobe #设计工具 #技术分析

7个月前

🍌你这！！！妈的，这效果还要什么渲染，这材质和光影质感…… ZH25O｜创意系列｜Gemini 2.5 Flash Image Creation 设计师狂喜！！！ nano-banana 用作设计快速验证/效果图太方便了，主要是这质感和真实感太好了! 图是用 Figma 花 2min 画的，渲染是🍌 1min 出的【Prompt】⬇️

#Gemini 2.5 #图像生成 #材质质感 #设计工具 #快速渲染

7个月前

朋友问我对于 Figma 生成代码有没有好的方法，他目前做法是：Figma 导出 HTML 代码，然后把导出的代码让 GitHub Copilot 按照代码库中的组件格式重写。他觉得这样还要复制粘贴代码，再写一堆提示词让 Copilot 重写很麻烦。我对 Figma 不是很熟悉，建议他可以试试把 Figma 的结果直接截图或者导出 PNG，然后把截图发给 Copilot，让 Copilot 根据截图一步到位生成 UI 代码。他说这样得到的样式不如从 Figma 导出的准确，毕竟 Figma 上有精准的颜色、尺寸，而 AI 生成的就没那么精准。我建议他可以考虑两者结合一下，同时导出代码和生成截图，然后把截图、Figma 导出代码和组件说明一起发给 AI（提示词中用 XML 标签隔开），这样就可以兼顾 UI 生成和样式准确性了。参考提示词如下： [UI 设计截图] <Figma导出代码> [Figma 代码……] </Figma导出代码> <UI组件说明> [React UI组件说明……] </UI组件说明> 上面是 UI 设计图、相应的 Figma 代码，请参考UI组件说明，使用我提供的 UI 组件重新生成 UI 代码。

#Figma代码生成 #GitHub Copilot #UI组件 #AI辅助编程 #设计工具

7个月前

感觉错过 Circle 的美股老哥，今晚全拥挤进 Figma 了，前段时间的打新也超级拥挤。目前观察到的： · 高达 40 倍的超额认购 · 刚上市那天仅约 6% 的流通 · 公司囤积了约 7000 万美元的比特币机构配售预计锁定 180 天，意味着大部分股票，至少半年内不能卖出。在 2022 年 Adobe 曾试图以 200 亿美元收购 Figma，最终因监管干预告吹。如果此次，Figma 开盘没有破发，维持 33 美金，那么市值将与 3 年前，Adobe 的尝试收购估值相当，都是约 200 亿。目前公司可能计划，再购买 3000 万美金的比特币。这意味着 Figma 是一家拥有比特币，又有众多用户的设计工具公司。

#Figma #比特币 #超额认购 #Adobe收购 #设计工具

7个月前

明天all in Figma

#Figma #All in Figma #设计工具

9个月前

Timeline 里各种通过 web 或设计工具仿 Liquid Glass 效果的，细节上和苹果的有很大的差距唉

#LiquidGlass #设计工具 #苹果

1年前

WindSurf Wave4 的大更新来了最大的更新是内置了一个可交互的预览功能，配合新的 Claude 3.7 可以说是如虎添翼。最近大家都在用 Claude 3.7 生成高保真原型或者设计图，但是如果要修改某个元素，描述起来是非常麻烦的。 wave4 的这个预览就解决了这个问题，只需要点击一下需要修改的元素，就可以在chat里直接针对这个元素输入指令进行更改。此外，网站出现错误的时候，也会自动和AI助手分享这个错误信息，方便排查。除此之外 WindSurf Wave4 还带来了这些新功能： - 新增了 tab 导入功能，可以通过 tab 添加新的依赖项目。 - 建议操作，模型完成输出后，会提供建议的操作按钮。 - Linter 集成，AI 助手写完代码之后，Linter 会自动检查并修复问题 - MCP 服务器的相关优化，可以更方便地添加 MCP 服务器 - 更方便的模型管理压力又给到了 cursor 那边。。。

#windsurf #Wave4更新 #预览功能 #Claude3.7 #高保真原型设计 #交互设计 #设计工具