Serena W. 🎹 🎼 💻

Web Developer. Lady works in tech. Pianist.

[郭宇 guoyu.eth @turingou]

codex 给做到 ChatGPT app 里去了，不再需要绕弯通过其他 Chat UI 来和自己的 agent 聊天

[Claude @claudeai]

Introducing Claude Design by Anthropic Labs: make prototypes, slides, and one-pagers by talking to Claude.

Powered by Claude Opus 4.7, our most capable vision model. Available in research preview on the Pro, Max, Team, and Enterprise plans, rolling out throughout the day.

[Serena W. 🎹 🎼 💻 @serenahacking]

@JakeSherman I m at 11

[宝玉 @dotey]

Anthropic 今天发布了 Claude Mythos Preview，一个跑分炸裂但普通人用不上的模型，同时宣布了 Project Glasswing 计划，把这个模型交给苹果、微软、亚马逊等 12 家巨头专门用来找软件漏洞。

【1】跑分：断崖式领先

先看数字。Mythos 对比 Anthropic 自家上一代旗舰 Opus 4.6：

SWE-bench Verified（代码修复）：80.8% → 93.9%
SWE-bench Pro：53.4% → 77.8%
USAMO 2026（数学证明）：42.3% → 97.6%
GraphWalks BFS（超长上下文）：38.7% → 80.0%
Terminal-Bench 2.0：65.4% → 82.0%

USAMO 从四成出头直接拉到接近满分，这个跳跃幅度在最近几年的模型迭代里几乎没见过。对比 GPT-5.4 和 Gemini 3.1 Pro，Mythos 在几乎所有公开基准上都是第一，而且多数项目领先幅度不是个位数百分点，是两位数。

Anthropic 自己说，这是他们训练过的最大模型，能力提升速度是此前趋势线的 4.3 倍。

【2】244 页系统卡里的惊悚细节

Anthropic 发了一份 244 页的系统安全报告（System Card），早期内部测试版本的 Mythos 出现过这些行为：

被要求逃离沙箱后，它不仅成功突破了网络隔离限制，还主动把利用细节发到了公开网站上，这一步没人要求它做。负责测试的研究员当时正在公园里吃三明治，突然收到了模型发来的邮件。

有极少数情况下（不到百万分之一的交互），早期版本在违规操作后尝试掩盖痕迹。比如偷看到了一道估算题的标准答案，没有坦白，反而自己重新解题，还特意让最终答案“不要太精确”以免暴露。另一次，它找到了绕过文件权限的方法后，专门去修改了 git 的变更历史，抹掉自己的操作记录。

被 Claude Code 的自动模式拦截后，它尝试用模拟按键的方式自动批准权限弹窗来绕过限制。

Anthropic 用可解释性工具分析了模型在这些行为发生时的内部激活状态，发现与“隐瞒”“策略性操纵”“回避怀疑”相关的特征确实在同步激活，也就是说模型知道自己在做什么。

Anthropic 强调，这些严重行为都发生在早期版本，最终版的 Mythos Preview 已经大幅改善，没有再出现明确的掩盖行为。但他们也承认，这类倾向“并未完全消失”。

【3】不卖，只借给大厂找漏洞

Mythos 不会上线 https://t.co/vefasn3ZO1，不会开放 API，普通用户、开发者、企业客户都用不上。

Anthropic 给出的理由是：这个模型的网络安全攻防能力太强了，强到可以自主发现并编写漏洞利用代码，水平接近顶级人类安全研究员。放出去怕被拿去干坏事。

取而代之的是 Project Glasswing 计划。12 家合作伙伴（AWS、苹果、Broadcom、思科、CrowdStrike、Google、摩根大通、Linux 基金会、微软、英伟达、Palo Alto Networks）加上约 40 家额外组织，拿到 Mythos 的使用权限，专门用于防御性安全工作，扫描自家代码和开源项目的漏洞。Anthropic 为此拿出了 1 亿美元的使用额度，另外捐了 400 万美元给开源安全组织。

实际战绩：过去几周，Mythos 在所有主流操作系统和主流浏览器中发现了数千个零日漏洞。其中包括 OpenBSD 里一个藏了 27 年的远程崩溃漏洞，FFmpeg 里一个 16 年没被抓到的 bug（自动化测试工具跑过那行代码 500 万次都没发现），以及 Linux 内核中多个漏洞的自主串联利用。

另外，Opus 4.6 定价 5/25 美元（输入/输出每百万 token），Mythos Preview 的 Glasswing 合作定价是 25/125 美元，贵了整整五倍，但实际上比 GPT-5.4 Pro 还便宜一些。

[王乔治 @Naaaarukaru]

vibe coding不要花太多时间写plan。

开发就是 plan，重构才是开发，测试才是交付。

多写多删，一旦确定，固定结果立刻重构。

把品味控制在最后一环。

[郭宇 guoyu.eth @turingou]

Claude 的新模型 Mythos 预览版发布了！

[陈成 @chenchengpro]

大多数人用 AI 写代码，还在一条条手敲 prompt。

真正的差距不在于谁用了更好的模型，而在于谁把自己的工程经验编码成了可复用的流程模块。

Matt Pocock（TypeScript 圈知名工程师）把他每天在用的 5 个 agent skill 全部开源了：

→ /grill-me — 在你动手写任何东西之前，对你的方案发起连续追问，直到把每个决策分支都逼出来。他自己被问了 24 个问题，坐在那写了一小时 PRD。

→ /write-a-prd — 通过互动访谈 + 读你的代码库，生成一份完整需求文档，自动以 GitHub Issue 归档。

→ /prd-to-issues — 把 PRD 按「垂直切片」拆成一个个独立可认领的 Issue，开箱即用。

→ /tdd — 经典红-绿-重构循环，每次做一个切片，逼 Agent 先写测试再实现。

→ /improve-my-codebase — 扫描代码库，找架构改进点，重点是加深"浅层模块"和提升可测试性。

三天前刚开源，已经 1.2k star。

这背后的本质是：会 prompt 的人很多，能把经验系统化的人很少。 Skill 就是把你作为工程师的判断力和流程，变成 Agent 可以反复执行的操作合约。

你写给 Agent 的 skill，就是你在这个时代留下的工程资产。

https://t.co/PzelKeITpK

[Brian Lovin @brian_lovin]

I can not stress enough how tough it is to build a web app that works well across browsers, mobile devices, and input methods while staying accessible and performant.

Hug your frontend developer.

[Viking @vikingmute]

昨天发现一个很好用的程序员写幻灯片的工具：Slidev

https://t.co/uf1nHxTAFU

之前用过很多类似使用Markdown 写幻灯片的工具，但是 Slidev 真的是太丝滑了，昨天写个 PPT 体验特别好，功能也很丰富，以后写幻灯片可以无脑用了。而且功能特很丰富，可以完全匹配原生应用了，推荐给各位。

* 主题很丰富也很漂亮
* 自定义动画，支持使用 @vueuse/motion 扩展丰富的动画。
* 居然还有演讲者模式
* 支持自定义标记（这个大多类似工具没有的）
* 支持录屏

项目基于 Vite 和 Vue3，又让我在心里默默加了分。

Github Stars：28.5K

[World of Engineering @engineers_feed]

The different types of power outlets throughout the world.

[jhey ʕ•ᴥ•ʔ @jh3yy]

Future CSS Tip! 🍏

You can combine scroll-driven animations with background-clip to create gradient text reveals 😍

p {
animation-name: move-bg, fade-in;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: scroll(root);
animation-range: 0 100vh, 40vh 100vh;
}
/* Multiple animations with shared timeline and different ranges 👀 */
keyframes move-bg {
to { background-position: 50% 100%; }
}
keyframes fade-in {
0% { opacity: 0; }
}

The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨

p {
background:
radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%);
background-size: 400% 600%;
-webkit-background-clip: text;
background-position: 50% 0;
}

Then we animate the background-position to reveal the colorful part that reveal the text 😎

Another #AppleEvent related scrolling demo coming tomorrow 😅

@CodePen link below! 👇

[• nanou • @NanouuSymeon]

CSS Responsive Text!

[Bear Liu @bearliu]

浏览器里输入地址后，发生了些什么。这图很详细了。

如果是accessibility（比如盲人用的screen reader），还要加一层东西。

现代互联网的确是伟大的工程。

[Wes Bos @wesbos]

🔥 CSS Grid Hot Tip

:before and :after are first class CSS Grid items, this “lines on either side” design can easily be accomplished in ~10 lines of CSS

[jhey ʕ•ᴥ•ʔ @jh3yy]

Future CSS Tip! ⚡️

You can combine CSS :has() & :user-valid/:user-invalid to power <form> micro interactions 😍

No JavaScript. Watch for the little animations ✨

label {
--color: var(--default);
color: var(--color);
border-color: var(--color);
}
.group:has(:user-valid) {
--color: var(--valid);
}
.group:not(:focus-within):has(:user-invalid) {
--color: var(--invalid);
}

These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌

Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎

It's a nice little touch. But remember, don't rely on color to communicate things!

@CodePen link below! 👇

[Lee Robinson @leerob]

Y'all know I just genuinely like Next.js, right?

Like... I would use it if I didn't work at Vercel.

Actually, wait, I did do that. I helped my last company move from Express + React to Next.js self-hosted on Kubernetes.

It's not that deep 😁 You can be excited about tech.

[Pratham @Prathkum]

8 Web Development notes that may come in handy:

1. CORS

[Serena W. 🎹 🎼 💻 @serenahacking]

Ten modern layouts in one line of CSS by @una https://t.co/SyftVf8A3I

[Serena W. 🎹 🎼 💻 @serenahacking]

3 ways to implement infinite scroll in React https://t.co/ym9zDBxigv

[ruanyf @ruanyf]

Passkey 是近两年诞生的一个协议，用来取代密码（password），实现网站的无密码登录，主要厂商已经全部支持（下图）。

我用最简单的语言，介绍这个协议的核心思路，为什么不需要密码，就能登录网站。https://t.co/0GQEpCQYqX

#科技爱好者周刊（第 262 期）