技术笔记

做界面找参考，这个灵感库很高级

做 UI 找参考，别只会搜“后台设计”了👀 最近可以收藏这个网站：Kombai Gallery。它整理了 20,000+ 个 Web 和移动端设计参考，按页面、组件分类，图库可以免费浏览。 Kombai Gallery 首页https://goframe-blog-upyun.mircool.cn/blog/1793665107225925301.png 这几个分类，做项目时比较...

让UI界面更好看的秘诀

在 X 上刷到这个，可以避免 AI Slop 并且让 UI 界面更好看的秘诀。 试了一下挺好用的，在AGENTS.md 里加上 “Avoid unnecessary secondary labels and descriptions. Let the layout do the explaining.” 大家快去试试！ Zihua @luinlee 的 X 帖子https://g...

Finesse UI：拒绝廉价的高级界面

finesse-skill 接入笔记：brand / product / commerce 三条路线分流、Design Read 先确认再写码、bolder/quieter/audit 等命令式迭代，以及多页项目锁气质的方法。

前端网页设计风格参考 2

第二组网页设计风格参考，编号 05–08：包豪斯、孟菲斯、黏土拟物、等距插画、奢华极简、日式侘寂、叙事滚动、时尚大片等 20 种风格。

AI时代，你也能画出妙趣横生的成语漫画

一段提示词，十分钟画出一套水墨成语漫画。画蛇添足、掩耳盗铃、刻舟求剑……蔡志忠味道的荒诞图解。

img2threejs：扔进去一张图，直接变成可交互的 3D 模型

img2threejs Skill 把一张图直接变成可交互的 Three.js 3D 模型。大神作品惊艳，但实测还原度跟原图差距较大，适合结构清晰的平面产品图转 3D 展示。

Codex + 4 个 Skills：审美、动效、工程、测试一条龙

Taste Skill（审美）+ GSAP Skill（动效）+ Ponytail Skill（极简工程）+ Playwright MCP（自动测试），四大开源 Skills 组成 AI 前端工业化开发流水线。

uniapp 小程序开发规范 Skill：20 条红线 + 8 份详解文档

用 AI 写 uniapp 小程序最怕 10 个页面 10 种写法、变量乱起、颜色硬编码。这个 Skill 用 8 份规范文档（请求封装/Pinia/路由/性能/存储/埋点/组件通信/红线）+ 20 条红线规则约束 AI，先定规范再让 AI 干活。

GPT image2 生成的 UI 效果图，如何高质量做设计还原

用 GPT image2 生成 UI 效果图后，直接 AI coding 或 Figma make 都会因为插画/图标 SVG 没法还原而翻车。最省钱的工作流：GPT image2 出图并分层 → MasterGo AI 抠图 → Figma 手动合并插画。

GSAP 官方 AI Skills：让 Agent 学会正确使用网页动画引擎

GSAP 官方出品的 8 个 AI Skill，教 Agent 正确使用 GSAP——核心 API、Timeline、ScrollTrigger、插件、React/Vue、性能优化。Webflow 收购后所有原 Club 插件（SplitText/MorphSVG 等）全部免费。

design-dna：把任何网站的设计语言提取成可复用的 JSON

一个面向 AI 编程智能体的 Skill：从截图、图片或网址中提取视觉设计的三个维度（设计系统 token、设计风格、视觉特效），输出机器可读的 Design DNA JSON，让任何 Agent 都能据此稳定复现一致的设计。