推荐在 Claude Code 安装 good-css 配合 Opus 5.5
Highly recommend installing 𝗴𝗼𝗼𝗱-𝗰𝘀𝘀 in Claude Code or Codex, then having Opus 5…
Prompt 结构清晰，将 good-css 的技巧转化为具体的 AI 审查指令，展示了如何将特定工具能力融入 Agent 工作流，写法具有实操参考价值。
Highly recommend installing 𝗴𝗼𝗼𝗱-𝗰𝘀𝘀 in Claude Code or Codex, then having Opus 5.5 use it to 𝗰𝗵𝗲𝗰𝗸 𝘁𝗵𝗲 𝘀𝗶𝘁𝗲 𝘆𝗼𝘂 𝘃𝗶𝗯𝗲-𝗰𝗼𝗱𝗲𝗱. It holds 47 modern CSS techniques, and with it installed, your agent tries them first whenever it writes styles.
强烈建议在 Claude Code 或 Codex 中安装 𝗴𝗼𝗼𝗱-𝗰𝘀𝘀，然后让 Opus 5.5 用它来 𝗰𝗵𝗲𝗰𝗸 𝘁𝗵𝗲 𝘀𝗶𝘁𝗲 𝘆𝗼𝘂 𝘃𝗶𝗯𝗲-𝗰𝗼𝗱𝗲𝗱（检查你通过对话式编码生成的网站）。它包含了 47 种现代 CSS 技巧，安装后，每当代理编写样式时，它会优先尝试这些技巧。
A few on the list you can check right away: → Tap a button on your phone and 𝘁𝗵𝗲 𝗵𝗼𝘃𝗲𝗿 𝗲𝗳𝗳𝗲𝗰𝘁 𝗴𝗲𝘁𝘀 𝘀𝘁𝘂𝗰𝗸. Put hover styles inside (hover: hover) and (pointer: fine) so only devices with a mouse get them → Open a form and every required field is already red. Switch to :user-invalid so a field turns red only after someone edits it or hits submit → Click an in-page link and the heading lands under your sticky nav. Give html a scroll-padding as tall as the nav, and the jump lands just below it → A price or timer ticks and the text next to it shifts. Add tabular-nums so every digit is the same width → An icon button is too small to tap. Use a pseudo-element to grow the tap area to 44px without changing how it looks
列表中的几项你可以立即检查： → 在手机点击按钮后，𝘁𝗵𝗲 𝗵𝗼𝘃𝗲𝗿 𝗲𝗳𝗳𝗲𝗰𝘁 𝗴𝗲𝘁𝘀 𝘀𝘁𝘂𝗰𝗸（悬停效果卡住）。将悬停样式放在 (hover: hover) 和 (pointer: fine) 内部，这样只有配备鼠标的设备才会应用它们 → 打开表单时，每个必填字段已经变红。改用 :user-invalid，这样只有在用户编辑内容或点击提交后，字段才会变红 → 点击页面内链接时，标题停留在固定导航栏下方。给 html 设置一个与导航栏高度相同的 scroll-padding，跳转就会停在导航栏正下方 → 价格或计时器跳动时，旁边的文字发生位移。添加 tabular-nums，使每个数字的宽度保持一致 → 图标按钮太小难以点击。使用伪元素将点击区域扩大到 44px，而不改变其外观
Send this prompt to Opus 5.5 👇
将此提示词发送给 Opus 5.5 👇
"Install good-css following the README at https://github.com/vojtaholik/good-css, then read its SKILL.md and the reference files you need.
"按照 https://github.com/vojtaholik/good-css 上的 README 安装 good-css，然后阅读其 SKILL.md 以及你需要参考的文件。
Then use it to check this project's existing styles (CSS files and Tailwind classes in components both count) for three kinds of problems: 1. Things that break on phones: hover states that stick after a tap, and tap areas smaller than 44px. 2. Things CSS can do that were built with scripts or a pile of breakpoints: dropdown menus, popovers, accordions, and layouts stitched together from several breakpoints. 3. Details: in-page links that land under the sticky nav, forms that open already full of red borders, ticking numbers that shift the text next to them, and focus rings that were removed.
然后使用它来检查该项目现有的样式（CSS 文件和组件中的 Tailwind 类都算）是否存在以下三类问题： 1. 在手机上会出问题的地方：点击后卡住的悬停状态，以及小于 44px 的点击区域。 2. CSS 能实现但用脚本或一堆断点构建的东西：下拉菜单、弹出层、手风琴折叠面板，以及由多个断点拼接而成的布局。 3. 细节问题：页面内链接跳转到固定导航栏下方的位置，表单打开时就已经布满红色边框，跳动的数字导致旁边文字移位，以及被移除的焦点环。
Report only these three kinds and skip any the project doesn't have. Components that come from a component library don't count. For each issue, quote the original code, explain what goes wrong on which device, and suggest the smallest change, ranked by impact. Also note which browsers don't support a technique you use yet.
仅报告这三类问题，跳过项目中不存在的问题。来自组件库的组件不计入。对于每个问题，引用原始代码，解释在哪些设备上会出现什么问题，并按影响程度排序建议最小的改动方案。同时注明哪些浏览器尚不支持你所使用的某项技术。
Show me the list of issues first. Don't change any code."
先给我列出问题清单。不要修改任何代码。"
更进一步：量化金融体系
看懂新闻只是起点——沿量化金融路径，把它变成能交付的工程能力