首頁 / Skills / 網頁與介面設計 / 主題工廠 Theme Factory
網頁與介面設計

主題工廠 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。每套主題包含四個十六進位顏色、標題字體、內文字體,以及適用情境說明。

運作方式

  1. 展示內建的 theme-showcase.pdf,讓你看到所有主題。
  2. 詢問要使用哪一套,並等待你的確認。
  3. 讀取該主題的檔案,一致地套用其中的顏色與字體。
說明與風險

包含主題檔與一份 PDF 展示圖。我們檢查過該 PDF,沒有嵌入腳本。不連網。主題中指定的 DejaVu、FreeSans 等字體不一定在每台電腦上都有,可能會改用備用字體。