前端设计新工具：Taste-Skill 与 Impeccable
GitHub 上两个前端设计项目爆火，旨在提升 AI 的设计审美。Taste-Skill 作为视觉自查系统，能纠正配色和布局问题；Impeccable 提供核心命令和避坑指南，解决布局逻辑和动效难题。两者结合可显著提升前端开发效率与设计质量。
相关文档
三号设计周刊 Vol.33｜Figma 设计经验封装与 AI 工作流
本期周刊探讨了 Figma Agent Skills 生态成型，设计经验现可被封装复用；Figma 实验证明 AI 能提速 20%。此外涵盖 iOS 27 视觉更新、Instagram 换标风波、DeepSeek Harness 发布，以及多款动效与素材工具推荐，最后分析了 AI 原生 UI 组件库与交互细节。
我让 AI 像 Jony Ive 一样重新设计我的 UI
作者尝试使用 AI 模拟著名设计师 Jony Ive 的风格，对其应用 sumbuddy.app 的 UI 进行重设计。AI 提出了关于统一画布、微交互质感、版式美学及空间韵律等七条详细建议，强调界面应消隐无形，注重直觉与物理感的融合。
Skills 又燃爆了
文章盘点了近期爆火的 5 个 Agent Skills 开源项目：Google Android 官方的安卓开发技能包 android/skills、K-Dense 的 177 项覆盖多学科的 AI 科学家技能库、rehan-remade 的万能游戏 Mod 工具、QingYunA 的一页式 HTML 回答方案，以及 oil-oil 的 UI 设计师技能。这些项目展示了 Skills 生态的爆发：官方下场教 AI 写安卓、Agent 变身科研专家、一句话改游戏、答案自带排版、AI 具备审美能力，标志着 Agent Skills 正成为下一代 AI 能力扩展标准。
审美提升(下)：硅谷设计师都在用的10个UI组件工具库
作者精选10个设计师宝藏资源，覆盖配色（Coolors）、字体、图标、插画、动效、3D设计、图片、CTA按钮、品牌视觉管理和AI交互模式等领域。文章强调审美提升靠日复一日的浸泡，每个资源都附推荐理由与使用建议，帮助读者建立自己的资源库与判断标准，逐步将好设计运用到作品中。
Codex-OpenPencil 快速上手篇
本文是 Codex-OpenPencil 插件的快速上手教程，以设计一个服装购物 APP 为例，完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改，到图片生成与搜索、保存设计资产，再到设计稿转代码的全流程。插件免费开源，提供支持平移缩放的无限画布，Codex 负责理解需求并调用工具，OpenPencil 负责设计展示与编辑，可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
审美提升：硅谷设计师私藏的10个网站+灵感库
设计师妍妍分享10个私藏设计灵感网站，包括收录真实产品界面的Mobbin、前沿创意的Godly、极简美学的Minimal Gallery、B端设计参考Refero、暗黑美学的Dark design、交互动效Design spells、Landing Page灵感的Lapa Ninja、字体排版的Typewolf、实验性网页Load more以及X平台精选设计的Best Designs on X。作者强调审美不是靠收藏，而是靠长期浸泡和观察培养的判断力，并预告下期将分享普通人系统提升审美的方法。
小程序怎么排才不乱？15个布局名词看图懂
文章以Punk咖啡馆点单小程序为例，沿着菜单、规格、购物袋、确认订单四个页面，图文讲解15个布局与视觉设计名词，包括信息架构、用户流程、线框图、首屏、视觉层级、栅格、对齐、留白、响应式布局、安全区域、设计变量、语义色、字阶、行高及Padding/Margin。作者还指出固定底栏遮挡内容的常见坑，并给出从定入口、画线框、定边距对齐到小程序内验证的完整排版流程，帮助读者用具体语言描述布局需求，让AI能精准修改页面。
把照片变成复古印刷：我做了一个小工具，免费开源！
作者开源了一个名为「孔版印刷机」的网页小工具，可将照片转成复古孔版印刷风格。工具提供7组控制项：油墨颜色、色彩数量、明暗阈值、网点大小、套印偏移、纸张颗粒和效果强度，支持原图/效果图对比查看与随机配色。图片在浏览器本地处理，使用WebGL加速并提供本地Worker回退，可导出原尺寸PNG。项目采用MIT许可，源码托管在GitHub，可直接打开index.html使用，为内容创作者提供了新的封面风格选择，也是动手做工具的起点。
如何让AI更高效的做网站设计
文章介绍如何解决AI生成网页时“不太对，再改一下”这类模糊修改意见难以落地的问题。作者拆解百灵 Ling-3.0-flash-VL 的官方演示，并提出用 Claude Code + Ling-3.0-flash-VL + Playwright MCP 的复现方案：VL 负责看参考图、生成代码和分析差异，Claude Code 负责读写文件和调用工具，Playwright 负责打开浏览器截图。关键细节是保持截图宽度一致，并让模型真正查看截图。作者建议从作品集首屏入手，通过截图对照迭代修改，让“看着不太对”变成可对照的图片差异。
高级 Skill 不是更长的提示词，而是一套组合技
文章探讨了高级 AI Skill 的本质：不是把更多指令塞进一份文件，而是把多个单点能力按任务关系编排组合。作者通过分析 GitHub 上多个热门 Skill 仓库，总结出五种组合模式：路由（判断调用哪个 Skill）、顺序（强制工作流程）、选择（按需分诊组合）、流水线（专业能力交接）和分层（Skill 与系统能力分工）。文章提出组合 Skill 的五个核心零件：路由、输入输出契约、顺序与并行、上下文状态、验证反馈，并建议从真实返工中逐步长出组合关系。核心观点：Prompt 让 AI 听懂一次需求，Skill 固化一类做法，而组合 Skill 才能把复杂任务交付出来。
AI 生成前端页面的模板味问题与界面高级感提升建议
文章讨论了 AI 生成前端页面虽然速度极快，但产出常带有模板味的问题。作者建议通过浏览 Layers 网站来提升界面高级感。与过去 Dribbble 上流行无法落地的概念稿不同，Layers 上吸引人的是克制的真实产品细节，如字形切换的微动效、干净的间距节奏和组件状态变化的自然过渡。作者认为，AI 把写界面的门槛降到地板上后，细节反而更加刺眼，一个产品看起来像粗糙玩具还是成熟软件，差异往往不在于功能结构，而在于那几处带品味的手感判断。
Figma Motion、AE、Rive 到底怎么选？一个五年设计师的经验
文章系统对比了 Figma Motion、After Effects 和 Rive 三款动效工具的定位与适用场景。Figma Motion 定位轻量，适合 UI 日常动效的快速交付，支持导出 CSS、React 代码并兼容 MCP；Rive 凭借状态机、骨骼动画和高性能运行时渲染，适合产品级交互动画；AE 则仍是品牌宣传片和复杂视觉特效的首选。作者给出了三步选择框架：无交互的 UI 动效用 Figma Motion，有交互逻辑的去 Rive，复杂特效开 AE，帮助设计师减少工具切换和沟通成本。
