Mappa(material)

AIGC explorer 🚀 | Pursuer ⚖️ | Blending tech, philosophy, and justice to create a harmonious digital future 🤖【世态渔洋已道尽，人间何事不鹅笼】

[SnapAction @snapaction_ai]

Day 1 — introducing SnapAction 👋

SnapAction turns your screenshots into agent context. Screenshot a X post, a bill, an appointment. No typing, no manual entry.
New demo every day from here. Follow along — stay tuned 👀

Prototyped with @figma Motion.

[宝玉 @dotey]

baoyu-design skill 更新： 支持 PPT 动画了

现在有很多朋友用这个 Skill 做 PPT 了，我自己也用，真的挺好用的。有朋友问能不能支持 PPT 动画，但当前这个skill生成的是 HTML 格式的 PPT，然后借助 PptxGenJS 导出为 PPTX，这个库有个局限就是不支持 PPT 的动画。

之前借助 Opus 4.8 确实没搞定，但现在有 Fable 5 了，这���候就体现出 Fable 5 的价值了，它对于 PPTX 的 XML 格式了如指掌，迭代了几轮就搞定了。

视频前半部分是 HTML 页面的动画效果，后半部分是在 KeyNote 中预览播放的效果。动画细节上还是有点小出入，但常用的几个动画应该没什么问题。

推荐去试试看：
baoyu-design Skill：https://t.co/d2EaYV6q7j

[向阳乔木 @vista8]

测了最流行的5个前端页面设计 Skill。

我觉得 ui-ux-pro-max 非常一般，自带太多模版、规则反而限制模型发挥。

① 动效方面 emil-design-eng 最好。

② 网页规范+无障碍，Vercel团队的 web-design-guidelines 最好

③ taste-skill 的AI��最小，而且文案简洁。

Anthropic 自带frontend-design万金油，用的人太多，即将成为新的 AI 味。

所有测试案例和效果见评论区

[Tom Huang @tuturetom]

下周7 月 11 日我们将和旦点AI、以太一起在上海跟大家见面，对AI agent 怎么进入真实设计和产品工作流感兴趣的朋友不要错过

上海的活动报名链接在这里👉https://t.co/VszU4odJdU

顺便再宣传一下我们 7 月 6 日在大阪的活动，报名链接👉https://t.co/BVWj4aYBCv

[Mappa(material) @zhumaterial]

@tuturetom 这么好的活动!🤩

就在复旦这边呢。

[Kōda @aimikoda]

GPT Image 2 + Seedance 2.0 Prompt Share

Tried using IPA + FACS for a contemporary performance piece where live singing and choreography happen simultaneously. Not sure how much of it actually worked technically but I think the final result turned out pretty interesting.

I also ended up color-coding the storyboard annotations because otherwise annotations were confusing the model. Different colors helped separate body movement, camera motion, framing and lighting directions from the actual environment and character drawings.

You can find color-coded storyboard prompt + seedance 2.0 prompt in the replies.

[Tom Huang @tuturetom]

Fable 5 制作网页效果也太哇塞了，强烈大家这周都来试试

我们也尝试用 Fable 5 在 Open Design 里面复刻了一下 @wenhaoqi 老师的网站，并且给了 Open Design 的官方仓库作为信息来源，非常还原，效果如下👉

[Mappa(material) @zhumaterial]

@tuturetom @xiao18kuma Tom 老师不发一个日本版本的！

[Tom Huang @tuturetom]

📢 7 月 6 日我们会在大阪 / 京都办一个小型的 Open Design meetup

这次主要想和大家线下聊聊：AI agent 现在到底怎么参与设计、原型、网站和产品工作流，顺便分享一下我们团队正在做的事

欢迎大家来找我们一起把 AI设计玩出新花样！

[小耳👂Jane｜Xiaoer @xiaoerzhan]

复刻skill发布 🔥

我拿这个skill 1:1复刻了当前公认的最牛前端网站
还原度可以是100%
见评论区

在这里讲讲原理
一、核心认知：网站的"真源码"到底在哪？

关键要分清两类网站——

A. 服务端渲染 / 数据驱动的站（淘宝、后台系统、大部分 SaaS）
真正的逻辑跑在你看不到的服务器上，浏览器只拿到服务器吐出来的零碎结果。

B. 静态构建站（Astro / Vite SSG / Hugo —— oryzo 就是这类）
整个客户端运行时（HTML + JS bundle + CSS + 所有 3D/图/字体资产）在构建时就全部打包成可下载的静态文件，扔到 CDN 上。没有隐藏的后端在算画面。

▎ 💡 所以很显然B是能扒拉的～～

二、为什么这个网站麻烦：资产是"滚动时才掏出来"的

你不能简单 wget 把 HTML 抓下来就完事。因为 oryzo 最重的东西——

- .sog 高斯泼溅数据（3MB 的 3D 场景）
- 25 个 .buf（几何 + 相机动画曲线）
- wasm 排序器、Rive 动画

全是 JavaScript 在你往下滚的时候才动态 fetch 的，URL 还是代码里现拼的。静态扫 HTML 根本发现不了它们。

所以 mirror-site.mjs 的做法是：开一个真浏览器，从头滚到尾,把这期间发生的每一个真实网络请求全部录下来,再照着这份"实际请求清单"逐个下载。— 这是唯一能把动态资产抓全的办法。这次抓全了 135 个。

三、为什么搬过来就渲染得一模一样？

靠的是根相对路径。oryzo 的代码里全是 /_astro/hoisted.js、/models/coaster.buf、/splats/props.sog 这种以 / 开头的路径。

只要我从 site/ 这个文件夹作为 web 根目录起服务，浏览器请求 /models/coaster.buf 就解析到我本地那份。同样的代码、同样的路径、同样的字节 → 浏览器根本分不出这是不是原站。它跑的就是 Lusion 那套真代码 + 真资产,所以连原站那俩 mp4 会 abort 的怪癖都一模一样。

唯二需要改的地方(都��是"重写",是"重定向"):
1. Typekit 字体——Adobe 按域名锁授权,换到 localhost 可能不给字体 → 把字体文件下下来自托管,改一行 @import 指向本地。
2. 删 cloudflare 追踪——一行 <script> 切掉。

其余 133 个文件零改动。所以最后 hero 像素 diff 只有 36/130万 ——那点差异还只是高斯泼溅每帧排序的随机抖动。

[Mappa(material) @zhumaterial]

这里体验https://t.co/jA5WNVytUV

[Paidax @xin_pai88825]

这个网站有意思，根据颜色对电影画面进行分类，点击还能查看对应的电影详情也颜色搭配。可以学到���多导演的设计美学

[Mappa(material) @zhumaterial]

这个网站确实好看。

[Mappa(material) @zhumaterial]

英国工作室，专做实时 3D 交互，站内的"My Little Storybook"等内部项目在 Instagram 上被反复转发FWA + Awwwards + CSSDA 三料年度网站，Codrops 专门做了深度报道，Instagram 粉丝持续增长https://t.co/JQbt4bqGap

[DStudioproject @D_studioproject]

Making a Skincare ad using Claude x Seedance 2.0 4K on Higgsfield MCP

Workflow⬇️

[Viktor Oddy @viktoroddy]

❤️‍🔥 Opus 4.8 + @claudeai

Animated Brand Concept Site

Prompt ↓

[Mappa(material) @zhumaterial]

@tuturetom @figma tom老师的爆炸更新

[Tatiana Tsiguleva @ciguleva]

Midjourney is breathtakingly beautiful.

[Mona Gamal / Om Marwan @monagamal_abd]

@TechieBySA @BasedLabsAI

[柴郡🔔｜Crypto+AI Plus @0xCheshire]

转发一下 B 站博主的锐评 PPT skills：

注意：有些 skill 不是专门做 PPT 的，所以评分会有点低，只是需求不同，想专门做 PPT 的看最前面的。

1. hugohe( 3.1万 star) | 顶级天花板 👑

全场唯一正经做 PPT 的！元素全可编辑，自带音色克隆和旁白生成，纯纯降维打击。
🔗https://t.co/bkjqie6dF1

2. 张咋啦 @zarazhangrui ( 2.3 万 star)

顶级主观审美最佳，完成度极高！目前呈现为 HTML 格式，稍微考验一点使用者的基础。🔗https://t.co/c449l5uXoX

3. 花叔 @AlchainHust ( 1.9 万 star)

顶级审美极佳，关键是能输出可编辑的 PPTX 格式��
🔗https://t.co/0RHr9ph0lQ

4. 歸藏 @op7418 ( 1.5 万 star)

人上人瑞士风审美非常棒，自带快捷键，很适合线下分享。
🔗 https://t.co/KG60VROUD1

5. Lewis ( 6500 star)

功能设计十分贴心，自带计时器和逐字稿等实用组件。https://t.co/TNphxczaEc

6. 宝玉 ( 2.2 万 star)

NPC风格偏可爱，主要以纯图片形式呈现。
🔗 https://t.co/zdfYk8r3D3

7. 乔木 ( 5400 star)

偏向于纯图片卡片的输出，更侧重于内容的初步呈现。
🔗 https://t.co/q27QsZTLWs

[Kriswillwin @KrisYi777]

看到 @hal__lee 李老师录的视频，我手痒痒也让 AI 复刻了一下😂

用到了 @xiaolinbythesea 笑林老师的 skills

听了 @dingyi 丁师的思路，先讨论了几轮逆向方案，结束让他落成 skills

用的是 gpt5.5 xhign，基本是 one shot

至于是不是拼凑资源我也不��了，消耗了 token ，收获了快乐，还获得了一个新的 skill