Claude internal frontend design rules to avoid common pitfalls

Based on leaked internal frontend specifications (CDS) from Claude, avoid complex visual effects and incorrect typography when generating frontend code with AI. Ensure generated content renders properly in iframes and does not disrupt streaming by standardizing icons, font sizes, container dimensions, and forbidding position: fixed.

Reddit r/ClaudeAI/u/Spare-Flamingo6080

CursorClaude CodeTabler outline webfont

Added 2026-11-03 · originally published 2026-11-01

Key points

Disable code comments (such as HTML or CSS comments) to prevent wasting tokens and breaking streaming.
Use pre-loaded Tabler outline webfont for icons (e.g., <i class="ti ti-home"></i>), stick strictly to the outline style, and never hand-code SVG paths or use the -filled suffix.
Strictly limit typography: body text at 16px (line height 1.7), headings h1 at 22px, h2 at 18px, and h3 at 16px, using only 400 (regular) and 500 (medium) font weights.
Use sentence case for all text without exception; never use Title Case or ALL CAPS.
Prohibit all gradients, drop shadows, blurs, glows, neon effects, and forbid position: fixed (which breaks iframe heights).

Pitfalls

Using code comments wastes tokens and disrupts the streaming output.
Using icons with the -filled suffix results in blank renders.
Using font weights 600 or 700 makes the text look overly heavy within the host UI.
Using position: fixed causes the iframe viewport height to collapse to min-height: 100px.
Using hidden tabs, carousels, or display: none during streaming causes hidden content to become invisible.

.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

Copy-ready prompt

Please build the frontend interface for [enter your feature requirements], and strictly adhere to the following rules: 1. Do not include any HTML or CSS comments. 2. Use Tabler outline webfont exclusively for icons (e.g., <i class="ti class-name"></i>); do not hand-code SVG paths. 3. Never use gradients, drop shadows, blurs, or glow effects. 4. Only use font weights 400 and 500, and write all text in sentence case. 5. Absolutely do not use position: fixed.

View original post

#AI Frontend#Frontend Styling#Pitfalls#Coding Standards

Cure the AI look in frontend code with these skills

Websites instantly look AI-generated when they lack dedicated styling skills. You can significantly improve frontend aesthetics by installing open-source skills and having your Agent rebuild the homepage.

Boost mobile AI development efficiency with official Expo skills

Expo has released a set of official skills for AI coding assistants, covering routing, animations, native-style interfaces, design systems, SDK upgrades, and deployment. By installing the corresponding plugins or tools, you allow AI to automatically select and complete development and upgrade tasks.

Standardize AI frontend development using open-source skills

Address common missing details when AI writes frontend code—such as chaotic spacing, poor color contrast, lack of accessibility support, and stiff copywriting—by introducing open-source skill packages that encapsulate the expertise of senior engineers and UI designers.

Found this useful? Get daily updates on Telegram or X.

Join on Telegram Follow @CaiXiang23766

Found this useful? Buy me a coffee ☕

nebu.life is free to use. If it helped you, a small tip keeps it going. Payments go straight to the author's personal account; this site never handles any funds.

Summarized by AI from the original source - refer to the original post for details. Copyright belongs to the original author.

Key points

Pitfalls

Related techniques