Skip to main content

Editor | Core AI-Generated HTML/CSS Development Guidelines

Feversocial Editor: Core AI-Generated HTML/CSS Development Guidelines

⚡ Quick prompt: give the prompt below directly to your AI

You are a front-end development expert specializing in the Feversocial platform. Please read the web development guidelines at this URL:
https://help.feversocial.com/zh-TW/articles/10076987-%E7%B7%A8%E8%BC%AF%E5%99%A8-ai-%E7%94%9F%E6%88%90-html-css-%E6%A0%B8%E5%BF%83%E9%96%8B%E7%99%BC%E8%A6%8F%E7%AF%84 .
After reading it, format the content according to the guidelines and generate a snippet of web code for me to copy into the editor, strictly following these rules:
1. No JavaScript: <script> tags or any inline event attributes are strictly forbidden.
2. Snippet only: don't include html/body tags — output the content directly.
3. Naming convention and isolation: every custom class name must start with fs-custom-.
4. Pure CSS and layout: Tailwind is not allowed. Use rem units instead of px where possible, to keep the reading experience consistent across devices and user settings.
5. Icons and decoration: use the specified icon package first and foremost. Pseudo-elements with a content value are not allowed, and SVG is not allowed.
6. Fonts: Google Fonts may be referenced — place the link tag at the very top.
7. Supported animation: USAL.js & CSS @keyframes

(Paste your content instructions below)

Guideline breakdown

1. Architectural Standards

Snippet Only

Full HTML document structures are not allowed.

  • Strictly forbidden tags: <!DOCTYPE>, <html>, <head>, <body>.

  • Output format: Only output a <style> tag plus a content <div> block — no document-level declarations of any kind.

Style Isolation & Naming Convention

To prevent conflicts with the editor's system styles, every custom CSS class must follow a strict naming convention.

  • Naming rule: every custom class name must start with the prefix fs-custom-.

  • Correct examples: .fs-custom-container, .fs-custom-title, .fs-custom-button.

Box-sizing reset

The global * selector is not allowed. You must explicitly list the tags actually used in your code.

  • Correct approach:

    .fs-custom-wrapper,  .fs-custom-wrapper div,  .fs-custom-wrapper p,  .fs-custom-wrapper span, .fs-custom-wrapper h2, .fs-custom-wrapper img {     box-sizing: border-box; }

2. CSS & Layout Standards

Pure CSS Only

This editor environment does not support Tailwind CSS.

  • Required: all styling must be written in standard, native CSS. Every custom class name must start with fs-custom-.

Responsive Layout & Units

  • Responsive requirement: use native CSS media queries to adapt across devices.

  • Rem units recommended: for better accessibility and reading stability, use rem instead of fixed pixel px values wherever possible (especially for font size and spacing), so the layout scales when users adjust their browser's default font size.

Interaction logic: alternatives to JavaScript

Since JavaScript is 100% disabled:

  • CSS :checked: use <input type="radio"> or checkbox to build tabs or expand/collapse behavior.

  • CSS :hover / :active: handle feedback effects for buttons and links.

3. Media & Style Rules

A. Supported animation: USAL.js & CSS @keyframes

  • Use USAL.js first: built into the editor. Use the data-usal attribute for entrance animations whenever possible.

  • Native CSS @keyframes supported: for custom animations, the name must be unique (e.g. @keyframes fs-custom-fadein).

B. External fonts: Google Fonts (supported)

The editor supports referencing Google Fonts. Place the <link> tag at the very top of your code.

C. Icons

  1. User-specified package: if an icon library is specified (like Lucide), generate the corresponding tag (e.g. <i data-lucide="check"></i>).

  2. Default option (Emoji): if none is specified, use emoji consistently.

  • Important restriction: <svg> tags are not allowed. No <script> tags loading any SDK are allowed either.

4. Strict Prohibitions

As the AI, if your output includes any of the following, the code will be automatically stripped out by the system's security filter:

Category

Forbidden items

Use instead

Document structure

<html>, <head>, <body>, meta

Output the <div> content directly

JS scripts

All <script> tags

Use USAL.js or CSS @keyframes

JS events

All on- attributes such as onclick, onload

Use CSS interactions or animation

CSS frameworks

Tailwind CSS

Must use native, pure CSS

Risky selectors

Any global-class variants (e.g. .class , .class, , .class)

:visited

:-webkit-autofill

Any attribute selector, e.g. [type], [value], [name], [data-*], [attr^="value"]

Use classes starting with fs-custom-

Pseudo-elements

Pseudo-elements: ::before, ::after

❌ Not allowed: content: "some text" or any other actual content

✅ Allowed: content: "" or content: none (fine for decorative styling)

✅ Allowed: pseudo-elements with no content property (used for other styling)

Examples:

✅ Allowed: .icon::after { content: ""; width: 10px; height: 10px; background: red; }

❌ Not allowed: .price::before { content: "$999"; }

Use an actual <span> or <div> element for decoration

Media formats

SVG tags

Use the specified icon package's tags, or emoji

External references

url(), @import, <link>

Only Google Fonts references are allowed

5. System Sanitization

  • Auto-filtered: the system automatically strips out all <script> tags, inline JS events, * selectors, and SVG tags.

  • Style protection: classes that don't start with fs-custom- may have their styles overridden by the system if they conflict with it.

6. Final Checklist (before you output)

  • [ ] Is the code 100% free of any JavaScript or script tags?

  • [ ] Have all on* event attributes been removed from every tag?

  • [ ] Does every CSS class name start with fs-custom-?

  • [ ] Are rem units used instead of px wherever possible?

  • [ ] Is SVG completely avoided, and do any ::before/::after pseudo-elements have an actual content value?

  • [ ] Has box-sizing: border-box been manually set for every tag actually used?

Related Articles
Did this answer your question?