メニュー
Directrices de diseño visual para crear interfaces distintivas y profesionales. Usar cuando necesites mejorar la estética de componentes o páginas.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/santifer/claudeable --skill claudable-designコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Stack de desarrollo web profesional React+Vite+Tailwind+shadcn. Usar cuando el usuario quiera crear páginas web, apps, o componentes UI.
Workflow paso a paso para desarrollo web profesional. Usar cuando inicies un nuevo proyecto web o landing page.
| name | claudable-design |
| description | Directrices de diseño visual para crear interfaces distintivas y profesionales. Usar cuando necesites mejorar la estética de componentes o páginas. |
| invoke | auto |
EVITAR: Inter, Arial, Roboto, Helvetica, system fonts PREFERIR: Fuentes con carácter que refuercen la marca
| Tipo | Opciones recomendadas |
|---|---|
| Display/Headlines | Clash Display, Cabinet Grotesk, Satoshi, Space Grotesk, Outfit |
| Body refinado | DM Sans, Plus Jakarta Sans, Manrope, Nunito Sans |
| Serif elegante | Playfair Display, Fraunces, Libre Baskerville |
| Monospace moderno | JetBrains Mono, Fira Code, IBM Plex Mono |
/* Ejemplo de configuración */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap');
:root {
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'DM Sans', sans-serif;
}
No uses paletas tímidas. Define:
/* Ejemplo: Paleta con personalidad */
:root {
--primary: 262 83% 58%; /* Violeta vibrante */
--accent: 43 96% 56%; /* Amarillo dorado */
--background: 240 10% 3.9%; /* Negro con tinte azul */
--foreground: 0 0% 98%; /* Blanco cálido */
--muted: 240 5% 15%; /* Gris con personalidad */
}
// Ejemplo de composición audaz
<section className="relative min-h-screen">
<h1 className="text-[clamp(3rem,10vw,8rem)] font-bold leading-none">
Diseño que<br />
<span className="text-accent">impacta</span>
</h1>
<p className="absolute bottom-12 right-12 max-w-xs text-muted-foreground">
Pequeño texto contrastando con el headline masivo
</p>
</section>
En carga inicial:
En interacción:
// Ejemplo con Motion
import { motion } from "motion/react"
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: "easeOut" }}
>
Contenido animado
</motion.div>
No uses fondos planos. Añade:
/* Gradient mesh con noise */
.hero-bg {
background:
radial-gradient(ellipse at 20% 50%, hsl(var(--primary) / 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, hsl(var(--accent) / 0.1) 0%, transparent 50%),
hsl(var(--background));
}
/* Añadir noise con pseudo-elemento */
.hero-bg::before {
content: '';
position: absolute;
inset: 0;
background: url('/noise.svg');
opacity: 0.03;
pointer-events: none;
}
border border-border/50// Card con detalles premium
<div className="relative rounded-2xl border border-border/50 bg-card/50 backdrop-blur-sm p-8 shadow-xl shadow-primary/5">
{/* Highlight sutil en el borde superior */}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
{/* Contenido */}
</div>