独立开发如何搞定 UI 设计
作者以设计师视角分享独立开发者搞定 UI 设计的三个实用工具：找参考用 Mobbin，收录上千款优秀 iOS、Android 和 Web 产品的完整流程截图，可直接参考交互和排版；定框架用 shadcn/ui，开源组件库颜值高、代码可控，配合主题生成器可快速搭建高级感界面；抠细节用 Lucide Icons，极简统一的开源矢量图标集，避免图标风格不一致。作者还附上了自己整理的图标库网站，并与网友互动讨论独立项目中最难的设计环节。
技术 / 前端
123 篇
如何榨出 AI 设计的 99% 创造力：一套三阶段工作流
作者受前苹果设计师 Anshu Chimala 启发，指出 AI 设计产出平庸的根源在于 LLM 作为下一个词元预测器、经 RLHF 对齐后天然倾向安全解。文章借鉴设计双钻模型，提出三阶段工作流：探索、确立、交付。核心技法包括：注入随机种子字符串打破思维定势、用大胆具象的提示词激发创意、三步发散法生成设计概念、引入'设计挑刺官'子智能体构建独立评审反馈闭环，以及调用图像生成工具提升视觉质感。通过多智能体协同与成本控制，可在极短轮次内产出超越常规 AI 模板的高水准设计。
AI 不是没审美，只是不懂方块字
文章探讨 AI 生成中文页面排版难看的根本原因：不是审美问题，而是语言结构问题。作者指出 AI 默认的 CSS 参数（负字距、1.4 行高、Inter 字体栈）都是为拉丁文设计的，而汉字等宽、信息密度高、可用的层级手段少，与字母排版从根上不同。文章分析了标题过长、断行不当、细字重浅灰、照搬多列网格等常见症状，并给出可直接使用的排版处方：正文 16–18px、行高 1.75–2.0、字距为 0、一行 30–45 字、字体栈首位用 PingFang SC，以及给 AI 修改中文排版的速查表。
我做了一个开源的设计工作台：管理 & 编辑 & 生成 DESIGN.md
作者开源了 RICOUI DESIGN，一个基于 DESIGN.md 的设计系统工作台。DESIGN.md 是一种结构化 Markdown 文档，集中记录品牌的颜色、字体、间距、组件规则与设计约束，人和 AI 都能读取。工作台支持创建、编辑、预览 DESIGN.md，浏览内置品牌设计参考库，可通过 AI 从公开网站生成初稿，并将文档派生为 Design Tokens、CSS 和 ZIP 供前端与 AI 工具使用。文章详细介绍了 DESIGN.md 的结构约定、从品牌参考到自有设计库的使用流程、AI 生成与安全边界、派生检查机制及云端存储方案，强调以 DESIGN.md 作为唯一源文件维护设计规范。
Figma Motion、AE、Rive 到底怎么选？一个五年设计师的经验
文章系统对比了 Figma Motion、After Effects 和 Rive 三款动效工具的定位与适用场景。Figma Motion 定位轻量，适合 UI 日常动效的快速交付，支持导出 CSS、React 代码并兼容 MCP；Rive 凭借状态机、骨骼动画和高性能运行时渲染，适合产品级交互动画；AE 则仍是品牌宣传片和复杂视觉特效的首选。作者给出了三步选择框架：无交互的 UI 动效用 Figma Motion，有交互逻辑的去 Rive，复杂特效开 AE，帮助设计师减少工具切换和沟通成本。
UX设计：让 AI 成果从做出来到用起来
文章指出AI生产力已远超大多数人的落地能力，技术跑通不代表成果真正完成。作者提出用UX思维（进入→理解→行动→反馈→验证）构建交付闭环，并分别应用到AI工程、Artifact、网页、App和写作五个场景：AI工程要从执行成功走到任务完成；Artifact要拿来就能用；网页每屏推动一次理解；App要设计状态与后果；写作要有读者路径。最后给出交付前的UX最小闭环五步法和判断标准：用户能否在无解释的情况下独立完成任务。
如何打造高级感 Landing Page（blume.codes 实战）
设计工程师 Olav 分享了 blume.codes 落地页的构建经验，阐述核心设计理念：注意力是零和的，想脱颖而出必须提升标准。文章详解四大独特元素：视差 Hero 效果（用 Codex 生成分层图像并合成滚动视差）、完全可交互的产品演示（通过 Turborepo monorepo 复用 UI 包，使落地页与 Electron 应用共享组件并自动更新）、花朵主题的旅程矢量线，以及主题切换器。作者强调 AI 编码工具（Codex、Claude Code）让高质量建站变得触手可及，并分享了借助提示词工程实现视觉效果的完整流程与迭代经验。
Wise 靠什么让 1900 万用户相信它？
作者通过对比 Wise 网页与手机 App 的异同，探讨金融产品如何建立用户信任。一致性来自底层架构的自然结果，而差异处才蕴含设计决策。文章分析了 Wise 注册前的汇率计算器如何用透明证据完成营销、价格透明但到账时间成黑箱的矛盾、账户冻结时'无法解释'与透明品牌的冲突、轻量冻结卡片带来的用户行为改变，以及 2023 品牌改版对信任的影响。作者认为真正的信任建立在产品无法给出完整答案的时刻，这些才是最值得设计的地方。
一面97米长的壁画，画了290位神祇，为什么看起来不乱？
作者借助AI拆解东方壁画的构图秩序，回答为何《朝元图》等大型壁画容纳数百人物却不显杂乱。文章提炼三种方法：群像层级——以主像为锚点，人物按大中小分级并分组生成；空间纵深——前景给尺度、中景给事件、远景给世界，靠遮挡与信息递减建立层次；夜景留白——保留大面积低信息区域，只允许一处最高亮度焦点。文中附有可直接复用的AI绘图提示词与自检方法，强调分区生成、逐区检查的重要性。
The Frontier Design System（前沿设计系统）
作者提出一种新型设计系统理念——前沿设计系统（Frontier Design System）。它不只是 tokens 和组件的集合，而是对整个产品的活态上下文模型，涵盖组件行为、模板、流程、信息架构、本地化规则与业务逻辑。基于这一模型，设计产物（静态地图、轻量原型、数据绑定原型直至生产应用）都成为同一上下文的不同视图，弥合设计与开发之间的鸿沟。设计师的输入从具体界面变为声明意图，由 LLM 基于上下文生成原型供设计师评判迭代。该模型最适合具有稳定语法的产品（如媒体、电商、出行），挑战在于维护上下文的准确性与保留创新空间，设计师的核心工作将转向构建和维护这一产品上下文模型。
不会前端设计没关系会抄作业就行
文章指出程序员最缺的往往不是代码能力而是审美，提出将优秀 UI 组件当作乐高，直接交给 AI Agent 挑选并整合进项目的方法。作者推荐了 5 个 UI 组件资源网站：Beautiful UI、BeUI、Rare UI、Transitions 和 shadcn/ui，只需把链接发给 Claude Code、Codex 这类 Agent，让它们自动查找组件、获取代码、修改样式并整合进项目。核心观点是：你不需要成为设计师，只需要知道去哪里找好设计。
AI 做海报、HTML 构图手册：16 种控制网格、图文关系与信息密度的海报构图——下册
本文是海报构图系列的下册，涵盖第 17–32 种构图方法，重点讲解 Grid System 与构图的关系。上册聚焦焦点、平衡与视线动势，下册处理内容增多时的秩序问题。文章分为三部分：分割与条带（上下分屏、水平带状）、网格系统（单栏手稿、多栏编辑、模块网格、瑞士非对称网格、Bento 层级卡片、棋盘交替）以及图文关系（满版主视觉、大字主导等）。每种构图均提供视线路径分析、适用场景、避坑指南，并给出图像模型提示词和可直接落地的 HTML/CSS 提示词两套表达方案。
How I Design with AI
工程师 Matt Dailey 分享如何避免 AI 生成的设计沦为千篇一律的“slop”。他提出七个实践方法：1) 从整体约束出发进行设计，借鉴 Christopher Alexander 的《Notes on the Synthesis of Form》，避免打地鼠式修补；2) 主动删除 Agent 过度添加的冗余元素；3) 在 Figma 等专业设计工具中迭代，避免代码库中的原型引力；4) 使用组件库保持视觉一致性；5) 利用 preview deploy 用真实数据验证设计；6) 收集优秀产品截图作为参考与上下文；7) 通过反复实践和反思培养个人设计品味。文章强调用 AI 做设计需保持人的判断力与整体思维。
designlang：一条命令提取网站设计系统
介绍开源工具 designlang，只需一条命令即可从任意网站提取 17 个以上的界面设计文件，包括 Tailwind 配置、Figma 变量、shadcn 主题，以及供 v0 或 Cursor 使用的提示词。工具还能分析四个断点下的响应式表现、悬停点击状态、无障碍对比度，并对整站设计一致性打分。提供演示 Demo，贴网址即可观看设计系统被逐步提取，过程可录像分享。适合想学习优秀网站设计语言或为老项目补充设计规范的开发者，比手动在开发者工具中逐个查找元素省事得多。
前端 UI/UX 设计：一套从灵感到落地的资源地图
作者整理了自己收藏的大量前端 UI/UX 设计资源，并借助 Codex 分类归纳，形成一张面向实际工作的资源地图。文章将设计资源分为五类：真实产品案例（UXSnaps、Mobbin、SaaSFrame）、设计模式与拆解（Design Spells、Component Gallery）、设计系统与 Design Token、组件实现（Base UI、React Aria、shadcn/ui 等）以及质量验收（WCAG 无障碍、性能测试）。作者强调有效的使用顺序是：真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收，帮助读者从'抄视觉'升级为'有理由的设计'。
AI 海报构图手册（上）：16 种控制焦点与动势的构图及提示词
作者系统梳理经典设计理论、格式塔原理与网格系统，整理出 32 种可直接写入 AI 提示词的海报构图，本文为上册，介绍前 16 种。文章先讲解海报的六个可控变量（焦点、层级、分组、平衡、动势、空间）及总提示词模板，再分“平衡与焦点”和“几何骨架”两组详解中轴对称、非对称平衡、三分法、黄金螺旋、大留白、边缘锚定、三角构图、倒三角、同心环绕、框中框等构图，每种均附视线路径、适用场景、避坑要点及图像模型与 HTML/CSS 提示词，帮助用户把视觉需求清晰传达给 AI。
Nexus Dashboard 4.1 发布
daisyUI 团队发布 Nexus Dashboard 4.1，包含 8 种仪表盘布局（CRM、电商、Gen-AI、增长、AI Ops、财务、SRE、安全运营）、落地页、文件管理器与聊天应用布局、Gen-AI 应用页面、认证页面等，并提供 15+ UI 区块、50+ 布局示例、100+ 交互示例及 10 个额外仪表盘模板，支持 HTML、React、Next.js、SvelteKit 等多种技术栈。
设计师审美灵感网站推荐（第二期）
作者分享了第二批提升审美的设计灵感网站，包括全球顶级网页设计平台Awwwards、快速浏览最新设计的Recent design、Chrome插件Muzli、类似Pinterest的Designspiration、专注动效细节的Design spells，以及收录实验性前卫设计的Load more。这些网站涵盖UI、平面、配色、排版等方面，适合设计师日常刷找灵感、制作moodboard或研究高级感设计的细节。
个人网页设计建议：留白、突出重点与个人风格
作者针对小伙伴们个人网页普遍内容过满、缺乏重点的问题，结合自身 UI 设计经验提出九条建议：一是留出空白，让首屏清晰传达“你是谁、做什么”；二是把成熟项目和成果前置；三是配色先确定风格，强调色克制使用；四是重视字体对气质的影响，区分字号字重；五是让 AI 少用千篇一律的卡片布局；六是融入个人小巧思；七是广泛浏览设计参考积累审美；八是动效克制并注意移动端适配；九是可加轻量音效彩蛋。核心观点是个人网页应体现个人风格，删繁就简。
做前端 Vibe Coding，先看懂这 12 个网页基础术语
本文面向非计算机专业的 Vibe Coding 爱好者，整理了 12 个前端网页基础术语，包括 Frontend、HTML、CSS、Markdown、Component、State、DOM、Title Tag、Page Metadata、Favicon、Open Graph 和 Web App Manifest。每个术语都配有通俗解释、图示和可直接复制给 AI 的指令示例，帮助读者在与 AI 协作时更精准地描述需求、定位问题，提升开发效率。
用 WorkBuddy 开发第一个微信小程序
本文详细介绍了如何使用 WorkBuddy 和腾讯云 CloudBase 技能开发一个微信待办小程序。从安装微信开发者工具、创建项目，到在 WorkBuddy 中安装 CloudBase 技能并授权，再到生成项目、配置和上传体验版，步骤清晰。最终实现待办的新增、分类、优先级和截止日期设置，数据云端同步，账号隔离，且个人使用无需备案和审核。文章还提供了常见问题的解决方法。
三号设计周刊 Vol.33｜Figma 设计经验封装与 AI 工作流
本期周刊探讨了 Figma Agent Skills 生态成型，设计经验现可被封装复用；Figma 实验证明 AI 能提速 20%。此外涵盖 iOS 27 视觉更新、Instagram 换标风波、DeepSeek Harness 发布，以及多款动效与素材工具推荐，最后分析了 AI 原生 UI 组件库与交互细节。
修复这5个界面，让你的应用看起来好10倍
本文作者认为，与其全面重新设计应用，不如优先优化几个对用户体验影响最大的界面。作者列出了五个关键界面：引导页、首页、核心操作页、付费墙以及空状态/成功/进度状态，并分别给出了优化建议。例如，引导页应简洁明了，首页应突出核心操作，付费墙应强调价值而非功能列表。作者强调，优化这些界面能让应用在不大改的情况下显著提升质感。
Kimi K3 3D WebGL 开发配置与提示词指南
文章详细介绍了如何利用 Kimi K3 模型开发 3D WebGL 应用。相较于 Claude 和 GPT-5.6，K3 在 Three.js、WebGPU 等复杂 3D 场景和着色器代码生成上表现优异。作者分享了在开发工具中接入 K3 的步骤、构建 3D 场景的提示词公式，以及视觉循环测试流程。并建议开发者采用混合策略：用 Claude 处理快速逻辑，用 K3 应对复杂的 3D 空间计算，从而发挥两者最大优势。
Vibe Coding 视觉词典（下篇）：滚动动作、提示加载、视觉风格与高级效果
文章介绍了 Vibe Coding 视觉词典的下篇，详细讲解了滚动与动作、提示与加载、视觉风格三大模块的设计概念与 AI 提示词，涵盖 Scroll Reveal、Parallax、Skeleton Screen 等前端开发技巧。
（小白视觉篇）让AI做成高级页面，必须知道提示词
本文介绍了如何通过具体的提示词指导AI生成具有高级感的网页设计。内容涵盖了CSS质感（如毛玻璃、轻阴影、Bento网格）、排版规则、克制动效以及3D空间感的营造，旨在帮助零基础用户避免设计平庸。
如何让你的 App 引导流程提升 10 倍（7 个实用建议）
本文介绍了优化 App 引导流程的 7 个实用技巧。核心观点是好的引导不应只罗列功能，而是帮助用户尽快体验产品价值。建议包括：定义激活时刻、先展示价值再索取用户努力、仅询问有用问题、保持单屏单一操作、使用有趣的动画、实现个性化体验以及以有意义的成果结束流程。
Vibe Coding 视觉词典（上篇）：布局、页面结构、导航与常用组件
文章针对 AI 做网页时指令模糊的问题，提出了“视觉词典”概念。通过拆解页面布局、结构、导航和组件四个层级，提供了 26 个具体的网页设计模式（如 Bento Grid、Masonry Layout、Sticky Navbar）。每个词条包含概念说明、适用场景及可直接复制给 AI 的提示词，旨在帮助用户更精准地指挥 AI 生成高质量的网页设计。
React Bits：适合作品集和视觉官网的动画组件库
React Bits 是一个包含140+免费组件的动画组件源码库，支持复制源码或通过 shadcn CLI 安装。它适合制作产品官网、作品集等需要强视觉效果的页面，可与 shadcn/ui 搭配使用，但需注意部分组件对性能的影响。
