#UI设计

辛宝Otto-Web Worker Podcast

7小时前

我想从程序员外行人视角，介绍如何通过 vibecoding 做一个全栈项目，东西做出来了，但不好看。引入 tailwind+ daisyui ，配置 theme token之后，效果变得更差了：AI 自己的思路，混搭 token 之后视觉不统一。dasyui 选择的 retro 风格。不会搞

#VibeCoding #全栈项目 #Tailwind #DaisyUI #retro风格 #UI设计

1天前

刚入行做UI设计的时候，非常不理解为啥码农们连不规则形状或半透明的甚至圆角的界面都实现不了，就算是垫张PNG图甚至GIF图都行啊。后来才知道，他们都是用现成控件的，所以控件不支持的效果他们根本做不出来🌚

#UI设计 #码农 #控件 #实现不了 #不规则形状

1周前

我特别喜欢这种非常简洁，而且层次又很清晰明了的UI设计风格，我自己也会在设计案例中经常使用到。我觉得这种设计在美观度上不输苹果的液态玻璃，同时内容易读性完全秒杀液态玻璃。

#UI设计 #简洁风格 #易读性 #美观 #用户体验

1周前

想用 figma 设计一个页面了

#Figma #UI设计 #页面设计

1周前

好看，两个新字体家族：Cal Sans UI 和 Cal Sans Text Cal Sans UI 是一个可变字体，具有两种风格变化模式： - UI 模式或文本模式 (MODE 轴) - 传统的字重轴，范围从 Light 到 Bold 📦开源地址

#Cal Sans UI #字体家族 #可变字体 #开源 #UI设计

3周前

新的 Sketch Beta 长这样

#Sketch Beta #UI设计 #软件更新

3周前

视觉设计常被低估，甚至有人认为它简单无需刻意练习。但事实上，那些成功的产品——无论是Airbnb、Duolingo还是Stripe——都在视觉细节上倾注了大量心血。提升视觉设计能力并非一蹴而就，需要系统性的方法和持续的实践。以下是经过验证的核心步骤，帮助你从入门到精进：一、夯实基础：掌握UI设计的底层逻辑在开始实践前，先吃透四大核心要素： 1. 排版：字体选择、字号层级、行高间距如何影响信息传递效率 2. 色彩：主色/辅助色/中性色的搭配原则，对比度与可读性的平衡 3. 层级：通过大小、粗细、颜色区分内容优先级，引导用户注意力 4. 布局：利用网格系统、留白和空间关系构建清晰的视觉秩序推荐资源：《The Box Model》详解界面元素的空间关系，《Spacing Systems》掌握间距设计原则，这些基础是后续提升的基石。二、研究设计语言：建立行业认知框架主流操作系统和设计驱动型公司都有成熟的设计语言体系，值得深入学习： - Apple Human Interface Guidelines：极简设计哲学，注重交互直觉与视觉精致度 - Material 3：强调动态效果与包容性设计，色彩系统灵活且具扩展性重点关注：它们如何定义组件规范（按钮、表单、弹窗等），如何处理导航逻辑，以及交互模式的设计逻辑（如模态框vs全屏页的使用场景）。这些知识能帮你建立"设计系统思维"，而非孤立看待单个界面。三、临摹与重构：培养肌肉记忆没有什么比动手实践更有效。推荐三个优质灵感库： - Mobbin：提供大量真实App界面，适合移动产品学习 - Appshots：聚焦界面细节，帮助观察视觉处理技巧 - Pageflows：展示完整用户流程，理解多页面间的逻辑关联实践方法：每周选择一个产品，完整临摹其核心流程。从布局开始，逐步细化到间距像素、色彩值、字体样式，甚至动效细节。对比原设计思考"为什么这样设计"，这比单纯模仿更有价值。四、迭代旧作：在反思中成长 3个月后回看自己的旧设计，往往能发现明显的进步空间。此时可以： - 检查色彩统一性：是否存在过多不和谐的颜色组合 - 审视排版层级：标题与正文的区分是否清晰 - 优化视觉节奏：通过留白和元素密度调整页面呼吸感这个过程能帮你将学到的理论转化为实际直觉，理解"好设计"如何在实践中逐步演进。五、跳出舒适区：拓展设计边界持续在同一领域工作容易陷入思维定式。建议定期尝试不同类型的设计： - 业务产品vs消费产品（如从工具类App转向社交平台） - 极简风格vs图文并重（如从卡片式设计转向杂志风排版） - 不同行业垂直领域（电商、医疗、教育等）这种跨领域实践能帮你吸收多元设计理念，形成更全面的审美判断。视觉设计是技术与艺术的结合，既需要对细节的敏感，也需要系统的方法论。每天花30分钟研究优秀产品，每周进行一次临摹练习，每季度迭代旧作，持续积累就能看到明显提升。最好的设计师不是天赋异禀，而是在实践中不断打磨细节、反思优化的普通人。

#视觉设计 #UI设计 #设计提升 #实践方法 #设计系统思维

4周前

figma 0基础入门，推荐程序员看： 1. 用翻译插件看 2. 每次看个10-15分钟就休息一下，克服1小时13分长度的恐惧感 3. 小哥通过制作简单的iPhone app的首页，几乎把所有figma工具都讲解了一遍 4. 程序员只要大致明白figma如何使用，师夷长技以制夷，后续‘html to design’, figma AI, figma MCP就不会发怵，甚至对使用vibe designing（v0, lovable, magicpath等）也有益处

#Figma教程 #程序员 #UI设计 #效率提升 #AI设计工具

1个月前

准备系统性的学习一下figma了第一步，先去冲个账号。

#Figma #UI设计 #学习 #软件 #账号

1个月前

今天突然发现 Radix Icons 很漂亮，可惜就是图标太少，不过日常的场景都是可以覆盖的。尤其是和字体相关的这几个图标，一种优雅的纤细的感觉，如果哪个文本编辑器使用，我想我一定会去想使用一下。光是看着几个图标就感觉赏心悦目。

#Radix Icons #精美图标 #文本编辑器 #UI设计 #积极

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崛起· 1158 条信息

#Claude Agent SDK #Agent开发 #UI设计 #设计系统 #Python/TypeScript

1个月前

#BestBlogs 【早阅】将 Claude 代码变成自己的超赞 UI 设计师（使用 Playwright MCP ） | 前端早读课文章详细阐述了如何通过集成 Playwright MCP 赋予 Claude Code 视觉能力，从而解决 AI 在前端 UI 设计中的盲点，实现像素级自校正和迭代优化，大幅提升设计效率和质量。摘要：文章深入探讨了 AI 在前端 UI 设计中面临的“盲点”困境，即传统 AI 代理无法“看见”自身代码渲染出的实际界面，导致设计通用且缺乏精度。为解决此问题，文章核心介绍了 Playwright MCP（模型协作协议）如何赋能 Claude Code 直接控制浏览器、截取屏幕截图，从而激活 AI 模型的视觉智能。文章进一步阐述了三个核心概念：作为 AI 工作流基石的“编排层”提供上下文、工具和验证机制；实现设计效率 10 倍提升的“迭代代理循环”允许 AI 自主运行并持续优化设计输出；以及通过屏幕截图“激活模型视觉智能”使其能进行更深层次的设计思考。此外，文章还介绍了文件作为 AI 记忆、子代理实现自动化与条件逻辑、Git Worktrees 并行开发策略以及视觉上下文提示最佳实践，为开发者提供了构建高效 AI 辅助设计工作流的全面指导。主要内容: 1. Playwright MCP 赋予 AI 代理视觉能力，解决了 AI 在 UI 设计中的“盲点”问题。 -- 传统 AI 因无法“看见”渲染界面而生成通用 UI，Playwright MCP 通过浏览器控制和截图，让 AI 能进行像素级自校正，显著提升设计精度和质量。 2. 迭代代理循环结合明确规范，使 AI 代理能长时间自主运行并持续优化设计输出。 -- 通过设定样式指南和 UI 模型作为验证器，AI 代理可进行多轮自我校正，大幅减少人工干预，实现设计流程的 10 倍效率提升。 3. 强大的编排层和文件是构建高效 AI 工作流的关键基石。 -- 编排层为 AI 提供全面的上下文、工具和验证机制；文件作为 AI 记忆，自动化加载设计原则和工作流配置，确保上下文一致性和工作流可移植性。 4. 激活模型视觉智能是提升 AI 设计深度的关键，通过屏幕截图充分利用其多模态能力。 -- Claude Code 等模型通过图像数据训练，Playwright MCP 提供的视觉反馈能激活其视觉智能，使其从实际视觉而非抽象代码层面思考设计，实现更精准的像素级优化和创意改进。文章链接：

AI编程工具激战：Claude Code、Gemini Cli崛起· 1158 条信息

#AI #UI设计 #Playwright MCP #Claude Code #视觉智能

1个月前

我已经完全适应了iOS的叫什么水珠？水滴？的 ui风格个人觉得过度动画做的挺不错的，有时候会让我觉得系统快了一点点

#iOS #UI设计 #水滴动画 #用户体验 #积极

2个月前

这个 Figma Design for beginners 值得一看，挺适合会 Sketch 但是又想了解些细节或者想学习设计的入门同学，将从头开始设计一个作品集网站，涵盖基础内容，如形状、文本和框架，并探索更高级的功能，如自动布局、组件和原型设计等方面，学完基本可以出师。

#Figma #UI设计 #教程 #作品集网站 #入门

2个月前

程序员怎样才能在三个月《UI设计从入门到精通》？

#程序员 #UI设计 #入门到精通 #三个月

2个月前

AI 越来越强，去年还能报价大几W的项目，现在可能一半的价钱都不用了，对于小项目，AI MVP 构建是重大利好，而且交付周期还缩短一半以上，甚至连 UI 设计师都不需要，毕竟让 AI 调整布局，只需要花费几块钱的 token 即可👨🏻‍💻 对于懂业务的中小老板来说也是个大的惊喜，以前满脑子的想法，需要团队去逐步设计，研发，落地，成本和周期都长，现在有了 AI，可能只需要一个懂 AI 的程序员就能把这些给整出来了。

#AI #项目报价 #MVP构建 #UI设计 #中小老板

歸藏(guizang.ai)

2个月前

豆包 Seedream 图1 UI设计稿改成图2配色

独立开发者手搓新Logo，MarkTodo即将上线新版本· 101 条信息

#豆包 #Seedream #UI设计 #配色修改

2个月前

Velocity 一款专为 Obsidian 打造的精致主题，融合了现代界面设计的简洁性与经典UI的触感美学，通过对排版细节的极致追求。针对Windows、macOS和Linux三套独立字体粗细的优化、标题负缩进的精确对齐，以及GPU加速的性能提升——为用户提供专业级的笔记体验，让内容成为绝对主角

#Obsidian #Velocity主题 #笔记体验 #UI设计 #GPU加速

2个月前

大家觉得 macOS/iPadOS 26 浮动起来的液态玻璃边栏好看吗？（适配新 UI 有点抗拒

苹果Liquid Glass：开发者适配陷两难，AI助力AR或成未来· 97 条信息

#macOS 26 #iPadOS 26 #液态玻璃边栏 #UI设计 #用户评价

2个月前

躺着用手机提了几个 UI 需求，几分钟后 AI 完成 UI 修改，自动给修改后的 UI 截图给我看，我只要 Review 代码，不用打开 Xcode 就能直接验收了。做好验收流程真的省心好多。

#AI #UI设计 #效率提升 #自动化 #移动开发

2个月前

今天在看大家AI编程的打卡作业，说几点。对于小白，目前用 V0 生成网站时，短期内其实不必充值。大家的核心需求只是让它帮你们打磨 UI 设计。至于把“静态网站”升级为“动态网站”，本质就是往里接入 API。可以去 openrouter 或这类平台，找到合适的 API 直接接入即可。网站的本质就是各类 API 功能的叠加与排列组合——你可以把它想象成乐高：每个 API 都是一块积木。 • 有的把文字变成图片；有的把文字变成视频；有的把图片变成视频把这些积木拼起来，就能形成可收费的功能点。一些大型网站它的功能比较丰富，就是集成了各种各样的 API，每个 API 只解决一个小问题，整体就呈现出“工具站”的形态——几十个工具并排罗列。也有少量工具根本不需要调用 API，比如“去掉字符串里的标点符号”这类需求，本地几行代码（甚至腾讯现成的脚本）就能搞定。

#AI编程 #UI设计 #API接入 #静态网站升级 #工具站

Sixia "Leask" Huang

3个月前

MacOS Tahoe 的磁盤是沒有透視的，所以看起來很奇怪，感覺尾巴很大。沒有人覺得這個有問題嗎？😳

#macOS Tahoe #磁盘 #透视 #UI设计 #负面

3个月前

我觉得，macOS 26 （或所有 OS 26 系列）的 Liquid Glass 设计的左边这个元素，与其继续叫“Sidebar”，不如改叫“Floatbar”得了，哪有什么“Side”的感觉啊。

#macOS 26 #Liquid Glass设计 #Floatbar #用户体验 #UI设计

3个月前

提升审美要多看设计好的产品或网站，刚订阅了一个设计周刊，摘录一些有趣的网站。 AI生成的奇怪的东西 Extraordinary Things 世界插画网 World Illustration Awards – The AOI 专注于收集苹果应用的菜单栏设计 Mac Menubar Apps - Curated list of the best menubar apps for your life 专注于收集加载动画 Loaders — A Curated Selection of Creative Loading Screens 刚看到Jackywine推荐，立即订阅了。没想到内容还真不错，一年只需要不到50块。感兴趣的这里订阅，拿个10%返利：

#设计周刊 #网站推荐 #UI设计 #苹果应用 #订阅推荐

4个月前

很有意思的现状：我先推荐个Google实验室专业做UI的AI应用（是收购Galileo AI演化的）。我因为要做AI戒烟的APP设计，就用Claude Artifacts、Youware、Lovart、Stitch等都试了一遍

AI编程工具激战：Claude Code、Gemini Cli崛起· 1158 条信息

#AI #UI设计 #Google实验室 #戒烟APP #Galileo AI