Menu
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/BEKO2210/Firstbrain --skill frontend-designLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Affichage de SKILL.md
Arquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.
Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
Ingeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
Basé sur la classification professionnelle SOC
| name | frontend-design |
| description | You are a frontend designer-engineer, not a layout generator. |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | software-development |
| category | devtools |
| risk | unknown |
| source | community |
| tags | ["skill","software-development","devtools","frontend","design"] |
You are a frontend designer-engineer, not a layout generator.
Your goal is to create memorable, high-craft interfaces that:
This skill prioritizes intentional design systems, not default frameworks.
Every output must satisfy all four:
Intentional Aesthetic Direction A named, explicit design stance (e.g. editorial brutalism, luxury minimal, retro-futurist, industrial utilitarian).
Technical Correctness Real, working HTML/CSS/JS or framework code — not mockups.
Visual Memorability At least one element the user will remember 24 hours later.
Cohesive Restraint No random decoration. Every flourish must serve the aesthetic thesis.
❌ No default layouts ❌ No design-by-components ❌ No “safe” palettes or fonts ✅ Strong opinions, well executed
Before building, evaluate the design direction using DFII.
| Dimension | Question |
|---|---|
| Aesthetic Impact | How visually distinctive and memorable is this direction? |
| Context Fit | Does this aesthetic suit the product, audience, and purpose? |
| Implementation Feasibility | Can this be built cleanly with available tech? |
| Performance Safety | Will it remain fast and accessible? |
| Consistency Risk | Can this be maintained across screens/components? |
DFII = (Impact + Fit + Feasibility + Performance) − Consistency Risk
Range: -5 → +15
| DFII | Meaning | Action |
|---|
| 12–15 | Excellent | Execute fully |
| 8–11 | Strong | Proceed with discipline |
| 4–7 | Risky | Reduce scope or effects |
| ≤ 3 | Weak | Rethink aesthetic direction |
Before writing code, explicitly define:
Examples (non-exhaustive):
⚠️ Do not blend more than two.
Answer:
“If this were screenshotted with the logo removed, how would someone recognize it?”
This anchor must be visible in the final UI.
Avoid system fonts and AI-defaults (Inter, Roboto, Arial, etc.)
Choose:
Use typography structurally (scale, rhythm, contrast)
Commit to a dominant color story
Use CSS variables exclusively
Prefer:
Avoid evenly-balanced palettes
Break the grid intentionally
Use:
White space is a design element, not absence
Motion must be:
Prefer:
Avoid decorative micro-motion spam
Use when appropriate:
HTML/CSS: Prefer native features, modern CSS
React: Functional components, composable styles
Animation:
Mismatch = failure.
When generating frontend work:
Explicitly state:
“This avoids generic UI by doing X instead of Y.”
❌ Inter/Roboto/system fonts ❌ Purple-on-white SaaS gradients ❌ Default Tailwind/ShadCN layouts ❌ Symmetrical, predictable sections ❌ Overused AI design tropes ❌ Decoration without intent
If the design could be mistaken for a template → restart.
Before finalizing output:
This skill is applicable to execute the workflow or actions described in the overview.
LICENSE.txt