阿水Ai说

🤖AI评测对比｜真实体验 ｜Ai前沿科技洞察 ⚡️8年互联网UI从业者｜Ai深度解读教学、产品推荐

[阿西_出海 @axichuhai]

发现一个专为前端开发做的的 UI 组件库开源项目，GitHub 已斩获 1.1w+star

收录了 3000+ 个社区共创的 UI 组件，炫酷按钮、设计感卡片、灵动加载动画、质感表单，分类齐全，想要什么直接搜

每个组件点开就能预览效果、复制代码，CSS 和 Tailwind 两个版本都有，粘贴进项目直接用

全部免费开源，MIT 协议

[Ding @dingyi]

再次总结一下现在市面上的 design skills：

1. Impeccable
增强版 frontend-design skill，17 个设计命令（/polish、/audit、/distill 等）。
https://t.co/Vo6UIAcDvu

2. UI Skills
包含 15 个独立 skills：baseline-ui（Tailwind 设计一致性）、fixing-accessibility（无障碍审计）、fixing-metadata（SEO 元数据）、fixing-motion-performance（动画性能）、12-principles-of-animation（迪士尼动画原则）等。
https://t.co/3X5o3UyX3l

3. Taste Skill
包含 taste-skill（前端设计）、redesign-skill（升级现有项目）、output-skill（强制 AI 写完整代码）、soft-skill（让东西看起来和感觉昂贵。涵盖高级字体、宽阔的空白、层叠的卡片设计、流畅的弹簧动画以及漂浮导航。）。
https://t.co/bElD1T4EVZ

4. Better Icons
MCP server + skill，搜索并获取 20 万+ 图标，支持自动学习常用图标库，直接同步到项目 icons 文件。
https://t.co/dF2iFCHazY

5. UI Design Brain
60+ 组件最佳实践库，包含布局模式、无障碍规则和反模式，支持 5 种设计风格（SaaS、极简、企业、创意、数据仪表盘）。
https://t.co/yHVPZUgzXB

6. AI kit by Motion ($299)
Motion+ 会员专属，包含动画专家 skill、性能审计、CSS spring 生成、过渡可视化和文档搜索工具。
https://t.co/H48KM7V4j8

[Viking @vikingmute]

最近关于 UI 设计非常喜欢的一套 skills，之前一直在关注 Emil Kowalski 的，现在我发现了这个：https://t.co/IWUvFQExaB

里面包括作者精选的几个优化方向：
/better-ui 优化界面
/better-typography 优化字体
/better-colors 优化颜色
等等

他这一套更偏向于实际操作和 cases，作者写了一系列design 相关的文章都很实用，建议大家打开他的这个 skills 网站看看其中的细节，很受用。

[鸟哥 | 蓝鸟会🕊️ @NFTCPS]

前端真的要失业了！

这个仓库太猛了，4.8万Star，解决了AI写前端最头疼的问题：UI丑。

DESIGN.md 是Google Stitch提出的新概念——一个纯Markdown文件，定义你的设计系统。丢进项目根目录，AI编程工具直接读懂你的UI该长什么样。

类比一下：
- AGENTS.md 告诉AI怎么构建项目
- DESIGN.md 告诉AI项目该长什么样

这个仓库收集了66个知名网站的DESIGN.md，直接拿来用：

AI平台：Claude、Mistral、ElevenLabs、Replicate
开发工具：Cursor、Vercel、Raycast、Warp
设计工具：Figma、Framer、Webflow
金融/Crypto：Binance、Coinbase、Stripe
消费品牌：Apple、Nike、Spotify、Tesla
豪车：Ferrari、Lamborghini、Bugatti、BMW

每个文件包含：配色方案、字体规则、组件样式、布局原则、响应式行为、甚至给AI的prompt指南。

用法极其简单：复制一个DESIGN.md到你的项目根目录，告诉AI"照这个风格做"，出来的UI直接就是品牌级水准。

想让你的产品页面有Stripe的质感？复制Stripe的DESIGN.md。想要Linear的极简风？复制Linear的。

以前做UI：找设计师→出设计稿→切图→还原。
现在：复制一个md文件，AI直接生成。

前端的游戏规则变了。

🔗 https://t.co/hmoc0vosBF

----------------------------------
在武汉的独立开发者、OPC超级个体注意啦！

世界人工智能大会（WAIC）官方举办的OPC黑客松大赛武汉线下交流会4月19号举办，在武汉的同学可以加V群，报名地址：
https://t.co/MVEQJbyzpS

OPC先锋挑战赛是全球首个聚焦「一人公司」的顶级 AI 赛事，双赛道设计，总决赛 7 月登陆上海世博会场

其他城市OPC聚会报名请看：
https://t.co/Y3AsiMUIQm

[阿水Ai说 @iDnlong]

这个挺有趣，可以手写体，还可以自己标注@nilseller

[Nils @nilseller]

What if ai responses felt more human?

[lumxss @bkdgiffug]

审美翻车别怪模型，是它没读懂设计语言。

这个网站把全球2000个顶级产品的设计规范整理成了DESIGN.md文件，颜色、字体、形状、布局全部拆好，让AI直接按规范出活。

免费使用，用完真的回不去了😭
🔗 https://t.co/TQjVJfHjl5

[阿水Ai说 @iDnlong]

https://t.co/Tha3AsstZK
我们在截图给ai的时候怎么能让ai复原更精确，用这个skill

[阿水Ai说 @iDnlong]

大佬又有新的skill发布了，赶紧收藏起来，感谢大佬分享@emilkowalski

[Emil Kowalski @emilkowalski]

New skill: /animate

Build an animation from scratch while choosing the right curve, duration, properties, and so on.

Now you have the whole flow:
/find-animation-opportunities → /animate → /review-animations

https://t.co/jCwhthpi20

[智享 @CycleDecoded]

随便给它一张照片，你在摄像头里就能直接“变成”另一个人，实时换脸连帧都不卡，连直播都能用。

项目叫 Deep-Live-Cam，在 GitHub 上一路暴涨（目前已有 30k+ Stars，开源协议 MIT）。它最狠的地方在于：根本不需要你训练模型，也不用喂几百张图，一张照片，直接上手搞定。

🔥 核心卖点

一张图即插即用：上传一张高清人脸照，秒级替换摄像头实时画面。

实时无延迟：支持视频通话和实时直播换脸，边缘融合相当丝滑。

数据全本地：代码完全开源，所有计算都在自己电脑跑，不用担心隐私泄露。

傻瓜式一键运行：自带 GUI 界面，支持 GPU 加速，小白也能快速部署。

🔗 传送门

GitHub 地址：https://t.co/UKP7KJvJTb

[阿水Ai说 @iDnlong]

新发现个可以将一个svg icon转换成另一个Svgicon的无缝衔接过程

https://t.co/k3TDHUX4HH

[阿水Ai说 @iDnlong]

这个网页创意有点东西，我感觉应该还挺好实现的，强烈推荐原来博主@aagreet

[Aagreet Sinha @aagreet]

Here's a quick look at the hero section of my portfolio.

Pixels don't move unless they have a reason to.

Would love your feedback.

[阿水Ai说 @iDnlong]

抓紧领一个吧，给自己的Agent领个保障，cloudflare钱包
领取地址：https://t.co/XWXR2ADKnR

[阿水Ai说 @iDnlong]

@vista8 这段分享很有价值，我现在做自媒体就是有遇到一些瓶颈，听完大佬分享的这段话，受益匪浅

[阿水Ai说 @iDnlong]

今天高低得试下这套skill

[zanwei.guo @zanweiguo]

分享近期美术人最喜欢速写风格插画的 skill https://t.co/ovGk5Bfga9

[阿水Ai说 @iDnlong]

@dingyi 哈哈哈，通透呀，自从用了Ai有地方发泄脾气了，对其他人真的是没脾气了

[阿水Ai说 @iDnlong]

有趣的作品，评论区有两节是怎么实现的

[Ahmed Dahbi @dahbiahmed]

my personal site now has a face that follows your cursor and a 3D bookshelf you can pull books off and spin.

none of this was necessary...

[阿水Ai说 @iDnlong]

已经安装好啦，明天用用@dashiAIxz 感谢大佬分享

[大师的AI小灶 @dashiAIxz]

有幸收到飞书团队的邀请，分享了我们团队近期在做的 Vibe Coding 项目——dashi-taskboard 🚀

这是一套重塑现有 Codex 工作流的项目管理工具，通过任务看板的方式，把你从海量的 Codex 对话中拯救出来。

项目现已在 GitHub 完全开源，欢迎大家安装体验、提 Issue 和反馈建议！
https://t.co/hirpXa0ynC

[阿水Ai说 @iDnlong]

干货干货分享呀@dashiAIxz 还得是大佬，感谢分享，下载下来我先用用哈哈

[大师的AI小灶 @dashiAIxz]

有幸收到飞书团队的邀请，分享了我们团队近期在做的 Vibe Coding 项目——dashi-taskboard 🚀

这是一套重塑现有 Codex 工作流的项目管理工具，通过任务看板的方式，把你从海量的 Codex 对话中拯救出来。

项目现已在 GitHub 完全开源，欢迎大家安装体验、提 Issue 和反馈建议！
https://t.co/hirpXa0ynC

[阿水Ai说 @iDnlong]

这套东西可以@gabriell_lab

[Gabriel @gabriell_lab]

Design Engineering Tip

Your tooltip doesn’t always end up where you placed it?

When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction.

@ container anchored(fallback: flip-block) {

.tooltip {

animation-name: slide-from-top;

}

}