Mente Designer

DNA de design de 20 sites premium (engenharia reversa via DevTools) — a fórmula Webflow/HTML + Lenis + GSAP/ScrollTrigger destilada em leis, calibres medidos e 22 efeitos nomeados com código. Use ao criar landing pages animadas, sites com scrollytelling, heroes tipográficos, vídeo-fundo, marquees, pin/scrub ou qualquer página que precise de "feel" de agência de elite.

5 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add eulucasduty/mente-designer --skill mente-designer

Manual install

git clone --depth 1 https://github.com/eulucasduty/mente-designer.git /tmp/mente-designer
mkdir -p ~/.claude/skills
cp -r /tmp/mente-designer/. ~/.claude/skills/mente-designer

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# mente-designer — como usar esta skill

Esta skill é o **calibre de gosto** de um designer de elite, medido em 20 sites reais. Ela não gera páginas sozinha — ela diz **o quê** usar e **em que dose** para o resultado parecer premium.

## Fluxo (5 passos)

1. Leia `dna.md` — as 10 leis + a fórmula-mestre. É a base de toda decisão.
2. Escolha o esqueleto por setor em `fichas-por-site.md` (tech/IA, luxo/wellness, food, indústria, portfólio, experiência).
3. Decida os 4 eixos antes de codar: tipo de hero (frase editorial 4-6vw OU wordmark monumental 8-21vw), base de cor (quase-preta OU clara terrosa) + 1 cor de assinatura racionada, as 2 fontes, e a mídia-rainha (vídeo-loop mudo OU frame-scrub).
4. Construa com `receitas-codigo.md` (padrões com calibres exatos) e peça efeitos pelo nome usando `catalogo-efeitos.md` (22 efeitos: stacking, wipe, pin+scrub, velocity skew, ken burns…).
5. Feche no checklist do `dna.md`: zero firula de entrada, no máximo 1 pin por página, ~14 telas, peso sob controle.

## Arquivos

| Arquivo | Conteúdo |
|---|---|
| `dna.md` | As 10 leis + a fórmula-mestre |
| `fichas-por-site.md` | Tabela dos 20 sites medidos + leituras transversais |
| `receitas-codigo.md` | Padrões em código com calibres medidos (boot da pilha, vídeo-fundo, wordmark, marquee, sticky, cursor…) |
| `catalogo-efeitos.md` | Glossário nomeado dos 22 efeitos, cada um com snippet |
| `data/fingerprints.json` | Dados brutos das 20 medições |

Read the full skill on GitHub

Details

Skill name: mente-designer
Repository: eulucasduty/mente-designer
Repo updated: 27 July 2026

FAQ

What does the Mente Designer skill do?

How do I install the Mente Designer skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add eulucasduty/mente-designer --skill mente-designer. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Mente Designer popular?

It lives in eulucasduty/mente-designer, which has 5 GitHub stars and 1 forks.

Related skills

Sprite Forge

isabellagreco1997/sprite-forge

Turn any pixel-art image (real or AI-generated) into clean game sprites, new poses and animations (idle, walk) that keep the character consistent. Use when asked to extract a character from a screenshot, make a sprite, re-pose a sprite, animate a pixel character, build a walk/idle cycle, or put an animated sprite back into its scene.

Frontend & Design

Frontend

adamholter/frontend-skill

Always read anytime you're making any UI the user will see, whether that's a one-off HTML file or a tool they're building. Any visual artifact at all.

Frontend & Design

Toutour

matt-ye/Toutour

Add a spotlight onboarding tour to any website. Analyzes the site's layout, tabs and UI components, interviews the developer (step granularity, mask, languages, theming, trigger mode, library), then generates and Playwright-verifies a guided tour. Use when the user asks for an onboarding tour, product tour, guided walkthrough, coach marks, feature introduction overlay, or says users can't figure out their site.

Frontend & Design

Art Director

NewenergyEric/art-director-skill

Help art directors turn references, taste and samples into a shareable project pack, then guide teammates and agents to create, review and deliver consistent components. Use for art-direction setup, visual systems, multi-category production and revisions in games, UI and campaigns.

Frontend & Design

AI UIconfig Skill

voderment/AI-UIconfig-skill

Refactor an existing SwiftUI project into a governed UI architecture with render-state boundaries, tokenized styling, preview mocks, and a debug-only runtime tuning + writeback tool. Use when the user wants to improve UI maintainability, live-tune styles, or build a reusable UI debugging workflow without changing the product's visual intent.

Frontend & Design

Screenshot to Design System

WCF900905/screenshot-to-design-system

Extracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette extraction, or component library generation from a reference image.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.