Hi everyone,
I’m a programming newbie with a zero-code background. First off, I want to thank tools like Cursor for making it possible for me to step into the world of coding. After using it for over half a year, I’ve gained some experience and learned a few things. Now, I have some ideas I’d like to discuss with you all.
Here’s my situation: I’m currently working on a front-end project using Vue 3, Arco Design UI, and Tailwind CSS. In the early days, I didn’t understand programming, and the code generated by AI tended to be very verbose. Later on, I learned about UI components and CSS frameworks. Gradually, when asking the AI to generate style-related code, I started setting some rules to prevent it from producing overly verbose output.
Recently, I’ve refined these rules further. Now, whenever I’m editing front-end code, I provide these rules to the AI to ensure the generated code for appearance and styling meets my requirements. I’d love to get some feedback from experienced developers here on whether these rules make sense or if there are any potential issues.
Below are the rules I’ve summarized, partly based on discussions with the AI:
**Styling Rules (Vue + Tailwind + Arco)**
**Core Principles:**
* **Arco as Foundation, Tailwind for Utility, Tokens are Core.**
* **Prioritize Arco Props, then use Tailwind classes mapped from Arco Tokens. Strictly no hardcoding.**
**Style Decision & Implementation (High to Low Priority):**
1. **Arco Component Props:** Preferred; directly meet needs.
2. **Tailwind Utility Classes (from Arco Tokens):**
* **Use:** Layout, responsiveness, states, other base styles.
* **Requirement:** **Must be** Tailwind classes already configured in the project and mapped from Arco Design Tokens.
3. **JS Dynamic Composition (Recommended, if helper functions exist):**
* **Scenario:** Semantically combine a few **Tailwind classes originating from Arco Tokens** for component-specific states/variants.
* **Prohibited:** Simply bundling generic utility classes.
4. **Vue Dynamic Bindings (`:class`, `:style`):**
* **`:class`:** Only toggle **registered Tailwind class names that originate from Arco Tokens**.
* **`:style`:** Only apply Arco Tokens indirectly via CSS Variables.
* **Strictly prohibit:** Dynamically introducing unmapped values or overriding Tailwind's core logic.
5. **Inside Wrapper Component `<style scoped>` (BEM/Deep Customization):**
* **Scenario:** When JS composition is unsuitable, or for complex CSS logic / deep Arco component customization.
* **`@apply`:** May cautiously compose **Tailwind classes originating from Arco Tokens**.
* **`:deep()`:** For fine-tuning Arco child components within a wrapper.
**Absolute Prohibitions:**
* **`!important`**
* **Hardcoding any style values** (colors, pixels, font sizes, etc.).
* **Using unmapped class names:**
* **Prohibit** raw Arco UI library class names (e.g., `arco-btn`).
* **Prohibit** arbitrary atomic classes not extended via Tailwind theme (e.g., `bg-[#123456]`, `p-[17px]`).
* **Must** use Tailwind classes defined in `tailwind.config.js` that represent Arco Tokens.
* **Excessive CSS nesting** (generally >2 levels).
* **Style redundancy.**
* **Breaking component encapsulation** or **deviating from Arco Design System core specifications.**
大家好，我是一个0代码基础的编程新手，首先感谢cursor这样的工具能让我步入代码编辑这个领域，在使用了半年多后有了一点点经验和积累，有一点想法和大家讨论下；
我的情况是这样，我最近着手的一个前端项目使用的技术栈是 vue3+arco UI+tailwindCSS，早期我不懂编程，让AI生成的代码有个问题就是特别冗长，再后来我知道了什么是ui组建 ，什么是CSS框架，慢慢的我让AI在生成关于样式相关的代码的时候就会给他设定一些规则避免生成过度冗长的代码，最近我又把这个规则优化了一下，在编辑前端代码的时候我都会附带这个规则，以便让其针对外观样式部分的代码生成能符合要求，想请有经验的前辈指导下规则是否有问题。 以下是我与AI讨论后总结的规则：
# **样式规则 (Vue + Tailwind + Arco)**
## **核心原则：**
* **以 Arco 为基础，Tailwind 为工具，Token 为核心。**
* **优先使用 Arco 属性，然后使用从 Arco Token 映射的 Tailwind 类。严格禁止硬编码。**
## **样式决策与实现（优先级从高到低）：**
1. **Arco 组件属性：** 首选；直接满足需求。
2. **Tailwind 工具类（来自 Arco Token）：**
* **用途：** 布局、响应式、状态和其他基础样式。
* **要求：** **必须是**项目中已配置的、从 Arco 设计 Token 映射的 Tailwind 类。
3. **JS 动态组合（如果存在辅助函数，则推荐）：**
* **场景：** 语义化地组合几个**源自 Arco Token 的 Tailwind 类**用于组件特定的状态/变体。
* **禁止：** 简单地捆绑通用工具类。
4. **Vue 动态绑定（`:class`、`:style`）：**
* **`:class`：** 仅切换**源自 Arco Token 的已注册 Tailwind 类名**。
* **`:style`：** 仅通过 CSS 变量间接应用 Arco Token。
* **严格禁止：** 动态引入未映射的值或覆盖 Tailwind 的核心逻辑。
5. **包装组件内部的 `<style scoped>`（BEM/深度定制）：**
* **场景：** 当 JS 组合不适用，或用于复杂的 CSS 逻辑/深度 Arco 组件定制。
* **`@apply`：** 可谨慎组合**源自 Arco Token 的 Tailwind 类**。
* **`:deep()`：** 用于在包装器内微调 Arco 子组件。
## **绝对禁止：**
* **`!important`**
* **硬编码任何样式值**（颜色、像素、字体大小等）。
* **使用未映射的类名：**
* **禁止**使用原始 Arco UI 库类名（例如 `arco-btn`）。
* **禁止**使用未通过 Tailwind 主题扩展的任意原子类（例如 `bg-[#123456]`、`p-[17px]`）。
* **必须**使用在 `tailwind.config.js` 中定义的、代表 Arco Token 的 Tailwind 类。
* **过度的 CSS 嵌套**（通常 >2 层）。
* **样式冗余。**
* **破坏组件封装**或**偏离 Arco 设计系统核心规范。**
另外新建了一个QQ群（1049681190） 欢迎一起来讨论ai的使用经验