홈 / Skills / 웹·UI 디자인 / 테마 팩토리 Theme Factory
웹·UI 디자인

테마 팩토리 Theme Factory

AnthropicApache-2.0Skill 언어: 영어
라이선스 확인됨스크립트 없음
데모실행 기록 · claude-sonnet-5-5 · 2026년 10월
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.

하는 일

슬라이드, 문서, 보고서, HTML 랜딩 페이지 등 어떤 산출물에도 적용할 수 있는 엄선된 전문 색상 팔레트와 글꼴 조합을 제공합니다. 어떤 프리셋도 맞지 않으면 새 테마를 생성할 수 있습니다.

10가지 테마

Ocean Depths, Sunset Boulevard, Forest Canopy, Modern Minimalist, Golden Hour, Arctic Frost, Desert Rose, Tech Innovation, Botanical Garden, Midnight Galaxy. 각 테마에는 4개의 16진수 색상, 제목 글꼴, 본문 글꼴, 그리고 어떤 용도에 어울리는지에 대한 설명이 있습니다.

진행 방식

  1. 함께 들어 있는 theme-showcase.pdf를 보여 주어 모든 테마를 확인하게 합니다.
  2. 어떤 테마를 쓸지 묻고 확인을 기다립니다.
  3. 해당 테마의 파일을 읽어 색상과 글꼴을 일관되게 적용합니다.
참고 및 위험

테마 파일과 PDF 쇼케이스가 들어 있습니다. 이 PDF에 내장된 스크립트가 없음을 확인했습니다. 네트워크 접근 없음. 테마에 지정된 DejaVu, FreeSans 같은 글꼴은 모든 컴퓨터에 설치되어 있지 않을 수 있어 대체 글꼴이 쓰일 수 있습니다.