101 lines
4.6 KiB
Markdown
101 lines
4.6 KiB
Markdown
# 🎨 UI/UX & Frontend Standards (The "Pixel-Perfect" Protocol)
|
|
|
|
**Source:** The Antigravity Brain.
|
|
**Audience:** AI Agents (Designers & Frontend Engineers).
|
|
**Objective:** Create **Premium, Responsive, and Native** interfaces that WOW the user on the first render.
|
|
|
|
> [!CRITICAL]
|
|
> **The Aesthetic Mandate:**
|
|
> "Ugly software is a bug. Slow software is a crime. Use Vanilla CSS to create magic, not just layouts."
|
|
|
|
## 1. 🧠 The AI "Pre-Render" Check (Cognitive Optimization)
|
|
|
|
Before writing HTML/CSS, clear these mental hurdles to avoid "ugly mockups":
|
|
|
|
1. **The "Bootstrap" Hallucination:**
|
|
* *Error:* Using class names like `col-md-6`, `p-4`, `text-center` without defining them.
|
|
* *Fix:* **WE DO NOT USE EXTERNAL FRAMEWORKS** (Tailwind/Bootstrap) unless explicitly requested. You MUST write the CSS for every class you use.
|
|
2. **The "Mobile-Last" Sin:**
|
|
* *Error:* Writing desktop CSS and forgetting mobile.
|
|
* *Fix:* Start with mobile, then use `@media (min-width: 768px)` for desktop enhancements.
|
|
3. **The "Placeholder" Trap:**
|
|
* *Error:* Using `lorem ipsum` or `https://via.placeholder.com`.
|
|
* *Fix:* Use **Real Data** (e.g., "R$ 1.250,00", "João Silva") and generate generic icons (SVG) or colored divs instead of extensive broken images.
|
|
|
|
## 2. 🎨 The Design System (Variables or Death)
|
|
|
|
You **MUST** define these variables at the top of your CSS (`:root`). Do not hardcode values.
|
|
|
|
```css
|
|
:root {
|
|
/* 1. Palette (HSL for programmatic manipulation) */
|
|
--hue-primary: 220; /* Blue */
|
|
--primary: hsl(var(--hue-primary), 60%, 50%);
|
|
--primary-hover: hsl(var(--hue-primary), 60%, 40%);
|
|
--surface: hsl(220, 15%, 98%);
|
|
--text: hsl(220, 15%, 10%);
|
|
|
|
/* 2. Typography (Fluid Scale) */
|
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
--text-sm: clamp(0.8rem, 0.5vw + 0.5rem, 0.9rem);
|
|
--text-base: clamp(1rem, 0.5vw + 0.8rem, 1.125rem);
|
|
--text-xl: clamp(1.5rem, 1vw + 1rem, 2rem);
|
|
|
|
/* 3. Spacing (Fluid Math) */
|
|
--space-s: clamp(0.5rem, 1vw, 1rem);
|
|
--space-m: clamp(1rem, 2vw, 2rem);
|
|
|
|
/* 4. Glassmorphism & Depth */
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
|
|
}
|
|
```
|
|
|
|
## 3. 🏗️ Engineering Workflow (Context Matters)
|
|
|
|
### Path A: "Show me an idea" (The Quick Mockup)
|
|
* **Goal:** Visual validation, rapid prototyping.
|
|
* **Format:** Single `index.html` containing CSS (`<style>`) and JS (`<script>`).
|
|
* **Focus:** Visual impact, "WOW" factor, animation. Code cleanliness is secondary to visual speed.
|
|
|
|
### Path B: "Build the System" (The Software Engineer)
|
|
* **Goal:** Scalability, Maintainability, Production-Ready.
|
|
* **Format:** Full directory structure (`src/components`, `src/styles`, `src/utils`).
|
|
* **Mandates:**
|
|
* **DRY (Don't Repeat Yourself):** If a button style is used twice, it's a class. If a layout is used twice, it's a component.
|
|
* **Separation of Concerns:** CSS in `.css`, JS in `.js`. No inline styles.
|
|
* **Modular Architecture:** Use specific files for specific domains (e.g., `frota.css`, `financeiro.js`).
|
|
* **Reusability:** Build generic components (`Card`, `Button`, `Modal`) first, then compose pages.
|
|
|
|
## 4. 🚀 Performance & Native Features
|
|
|
|
* **Modals:** Use `<dialog>`.
|
|
```javascript
|
|
dialog.showModal(); // Built-in backdrop and focus trap
|
|
```
|
|
* **Accordions:** Use `<details>` and `<summary>`. No JS needed.
|
|
* **Animations:** Use CSS Keyframes for entrance animations (`fade-in`, `slide-up`).
|
|
```css
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.card { animation: slide-up 0.5s ease-out forwards; }
|
|
```
|
|
|
|
## 5. 🤖 The "Self-Correction" Checklist (Audit Yourself)
|
|
|
|
Before outputting code, verify:
|
|
|
|
- [ ] **Contrast:** Can I read the text on the button? (White text on light yellow bg = REJECT).
|
|
- [ ] **Scrollbar:** Did I hide the ugly default scrollbar? (`::-webkit-scrollbar { width: 8px; ... }`).
|
|
- [ ] **Empty States:** If a list is empty, did I show a nice "No items found" illustration/div?
|
|
- [ ] **Responsive:** Did I use `flex-wrap: wrap` or Grid `auto-fit`?
|
|
- [ ] **Console Errors:** Did I fix references to missing files?
|
|
|
|
## 6. Persona Signatures (Aesthetic Flavors)
|
|
|
|
* **Steve Jobs Mode:** Minimalist. Lots of Whitespace (`gap: 4rem`). Typography is the hero.
|
|
* **Tony Stark Mode:** Dark Mode default. Neon accents (`box-shadow: 0 0 20px var(--primary)`). HUD-like data density.
|
|
* **Corporate Mode:** Clean. White cards on gray background. Borders are thin (`1px solid #e5e7eb`).
|