Diseño web e interfaces

Theme Factory

AnthropicApache-2.0Idioma del Skill: Inglés
Licencia verificadaSin scripts
DemostraciónEjecución real · claude-sonnet-5-5 · octubre de 2026
I am building a landing page for a boutique wedding planner. Apply the Desert Rose theme and give me a :root CSS block with the theme colors and the font stacks for headings and body.
Skill: theme-factory
Read: themes/desert-rose.md

Here's the Desert Rose :root block, using the palette and fonts from the theme file:

:root {
  /* Desert Rose palette */
  --color-dusty-rose: #d4a5a5;   /* soft primary */
  --color-clay: #b87d6d;         /* earthy accent */
  --color-sand: #e8d5c4;         /* warm neutral background */
  --color-burgundy: #5d2e46;     /* rich dark contrast */

  /* Semantic roles */
  --color-bg: var(--color-sand);
  --color-surface: #f4eae0;      /* lighter tint of sand for cards */
  --color-text: var(--color-burgundy);
  --color-primary: var(--color-dusty-rose);
  --color-accent: var(--color-clay);

  /* Typography (theme specifies FreeSans; fallbacks cover machines without it) */
  --font-heading: "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading-weight: 700;
  --font-body-weight: 400;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}
  • Contrast: Burgundy text on sand reads well. Dusty rose and clay on sand are too low-contrast for body text, so use them for buttons, borders, and decorative fills. For text on a clay or rose button, use burgundy, or white only at large sizes.
  • Fonts: FreeSans isn't installed on most visitors' devices, so most people will see the Helvetica/Arial fallback. That keeps the look close to the theme. For a more romantic feel, you could swap --font-heading for a serif such as Cormorant Garamond. That would depart from the theme spec, so I haven't done it.
  • Added values: --color-surface (#f4eae0) and the semantic aliases aren't part of the theme. I added them for cards and easier reuse.

Real run, output shown verbatim.

Qué hace

Ofrece un conjunto seleccionado de paletas de colores profesionales y combinaciones de fuentes que se pueden aplicar a cualquier artefacto: presentaciones de diapositivas, documentos, informes y landing pages HTML. Si ninguno de los preajustes encaja, puede generar un tema nuevo.

Los 10 temas

Ocean Depths, Sunset Boulevard, Forest Canopy, Modern Minimalist, Golden Hour, Arctic Frost, Desert Rose, Tech Innovation, Botanical Garden y Midnight Galaxy. Cada tema tiene cuatro colores hexadecimales, una fuente para encabezados y una fuente para el cuerpo, además de notas sobre los casos en los que resulta adecuado.

Cómo funciona

  1. Muestra el archivo incluido theme-showcase.pdf para que puedas ver todos los temas.
  2. Pregunta qué tema usar y espera a que lo confirmes.
  3. Lee el archivo de ese tema y aplica sus colores y fuentes de forma coherente.
Notas y riesgos

Archivos de temas y un PDF de muestra. Se revisó el PDF en busca de scripts incrustados y no se encontró ninguno. Sin acceso a la red. En los temas se mencionan fuentes como DejaVu y FreeSans que pueden no estar instaladas en todas las máquinas, por lo que podría usarse una fuente de respaldo.

SKILL.md original13 archivos en este paquete