Claude 内部前端规则防翻车指南

根据 Claude 内部泄露的前端规范（CDS），在使用 AI 生成前端时需避免复杂的视觉特效和错误的字体排版。通过规范图标、字号、容器尺寸及禁用 position: fixed，确保生成的内容在 iframe 中正常显示且不破坏流式传输。

Reddit r/ClaudeAI/u/Spare-Flamingo6080

CursorClaude CodeTabler outline webfont

收录于 2026-11-03 · 原文发布于 2026-11-01

要点

禁用代码注释（如 HTML 或 CSS 注释），以防浪费 Token 并破坏流式传输。
图标使用已加载的 Tabler outline webfont（如 <i class="ti ti-home"></i>），只用 outline 风格，绝不手绘 SVG 路径或使用 -filled 后缀。
排版严格限制：正文字号 16px（行高 1.7），标题 h1 为 22px、h2 为 18px、h3 为 16px，仅使用 400（常规）和 500（粗体）两种字重。
文本大小写一律采用句首大写（Sentence case），绝不使用标题大写（Title Case）或全大写（ALL CAPS）。
禁止使用任何渐变、投影、模糊、发光、霓虹特效，以及禁止使用 position: fixed（会破坏 iframe 高度）。

坑点

使用代码注释导致浪费 Token 并破坏流式传输
使用了 -filled 后缀的图标导致渲染为空白
使用了 600 或 700 字重导致在宿主 UI 中显得过重
使用 position: fixed 导致 iframe 视口高度塌陷为 min-height: 100px
在流式传输期间使用隐藏的 tab、轮播图或 display: none 导致隐藏内容不可见

.cursorrules

- No <!-- comments --> or /* comments */
- Use Tabler outline webfont for icons (no -filled suffixes, no hand-drawn SVG paths)
- No gradients, drop shadows, blur, glow, or neon effects
- Typography weights: only 400 (regular) and 500 (bold)
- Sentence case always (no Title Case or ALL CAPS)
- Never use position: fixed

可复制提示词

请为我编写前端界面 [填写你的功能需求]，并严格遵守以下规则：1. 不要使用任何 HTML 或 CSS 注释；2. 图标统一使用 Tabler outline 字体（例如 <i class="ti class-name"></i>），不要手绘 SVG 路径；3. 绝不使用渐变、阴影、模糊或发光效果；4. 字体只允许 400 和 500 两种字重，文本全部使用句首大写（Sentence case）；5. 绝对不要使用 position: fixed。

查看原帖

#AI前端#前端美化#避坑指南#编码规范

用 AI 写前端显“AI味”？加装这几个 skill 治一治

网页一眼看过去充满 AI 味，是因为没有安装专治 AI 味的 skill。通过安装开源 skill 并让 Agent 重做首页，可以显著改善前端美化效果。

使用 Expo 官方 skills 提升 AI 移动端开发效率

Expo 官方为 AI 编程助手推出了一套 skills，涵盖路由、动画、原生风格界面、设计系统、SDK 升级及打包上架。通过安装对应插件或工具，让 AI 自动挑选并完成开发与升级任务。

使用开源 skills 技能包规范 AI 前端开发

针对 AI 写前端常出现的间距乱飞、颜色缺乏对比度、没有无障碍支持和文案生硬等细节缺失问题，可以引入封装了资深工程师与 UI 设计师经验的开源技能包来解决。

觉得有用？订阅 TG 频道或在 X 关注获取每日更新

订阅 TG 频道关注 @CaiXiang23766

觉得有用？请我喝杯咖啡 ☕

本站内容免费开放。如果这些内容帮到了你，可以随手赞赏支持一下，钱直接到作者个人账户，本站不经手任何资金。

内容由 AI 依据原文翻译整理，细节以原帖为准；版权归原作者。

要点

坑点

相关方法