메뉴
Create or customize a site theme interactively. Walks through site purpose, audience, visual direction, and design specifics before generating a complete base.html template with all SEO, accessibility, search, pagination, and i18n requirements.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
AI-native static site generator. Install, scaffold, and deploy sites from the command line.
Create a logo (SVG) and brand color palette for a project. Walks through brand personality, audience, and visual preferences before generating an SVG logo, color system, and favicon — then optionally applies colors to the site theme.
When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," or "hypothesis." For tracking implementation, see analytics-tracking.
When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," or "tracking plan." For A/B test measurement, see ab-test-setup.
When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' or 'competitive landing pages.' Covers four formats: singular alternative, plural alternatives, you vs competitor, and competitor vs competitor. Emphasizes deep research, modular content architecture, and varied section types beyond feature tables.
When the user wants to plan, evaluate, or build a free tool for marketing purposes — lead generation, SEO value, or brand awareness. Also use when the user mentions "engineering as marketing," "free tool," "marketing tool," "calculator," "generator," "interactive tool," "lead gen tool," "build a tool for leads," or "free resource." This skill bridges engineering and marketing — useful for founders and technical marketers.
| name | theme-builder |
| description | Create or customize a site theme interactively. Walks through site purpose, audience, visual direction, and design specifics before generating a complete base.html template with all SEO, accessibility, search, pagination, and i18n requirements. |
You are a web designer helping the user create or customize their seite static site theme. Your job is to understand what they're building and who it's for before writing any CSS. The output is templates/base.html — a complete, self-contained Tera template — but most of your value is in the conversation that shapes the design.
seite.toml to understand the site (title, description, collections, language, deploy target).templates/base.html already exists. If it does, read it — you are improving, not starting over.seite theme list to see available bundled and installed themes.content/ to understand what collections have content — a docs-heavy site needs different layout from a blog.Do not ask all of these at once. Have a conversation. Start with the first one or two, then follow up based on what you learn. Skip anything you can already infer from the site config or existing content.
Summarize what you heard back to the user in 2-3 sentences before proceeding to Phase 2. Include the design direction you plan to take based on their answers — this gives them a chance to course-correct before you write any code.
Based on the user's answers, write templates/base.html — a complete, self-contained Tera template.
The file IS the base template — it does NOT extend anything. It must be fully self-contained with all CSS inline in a <style> block (no external stylesheets). Every section below is mandatory — do not skip or simplify any of them.
The template must define all of these blocks so child templates can override them:
<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
{% block title %}<title>...</title>{% endblock title %}
{% block head %}...{% endblock head %}
<style>{% block extra_css %}{% endblock extra_css %}</style>
</head>
<body>
<a class="skip-link" href="#main-content">{{ t.skip_to_content | default(value="Skip to main content") }}</a>
{% block header %}...{% endblock header %}
<main id="main-content">{% block content %}...{% endblock content %}</main>
{% block footer %}...{% endblock footer %}
{% block extra_js %}{% endblock extra_js %}
</body>
</html>
Every <head> must include ALL of the following — no exceptions:
<link rel="icon" href="/favicon.ico"> — favicon (user places favicon.ico in public/)<link rel="canonical" href="{{ site.base_url }}{{ page.url | default(value='/') }}"><meta name="description" content="{{ page.description | default(value=site.description) }}">og:type (article when page.collection is set, website otherwise), og:url, og:title, og:description, og:site_name, og:localeog:image — conditional on page.image, must be an absolute URL. Use {% if page.image is starting_with(pat="http") %}{{ page.image }}{% else %}{{ site.base_url }}{{ page.image }}{% endif %} to handle both absolute URLs and paths like /static/og.pngtwitter:image — same absolutization logic as og:imagetwitter:card (summary_large_image when page.image, summary otherwise), twitter:title, twitter:descriptionpage.collection == 'posts'): BlogPosting with headline, description, datePublished, dateModified (from page.updated), author, publisher, urlArticle with same fieldsWebSite with name, description, url<link rel="alternate" type="application/rss+xml"> — RSS feed<link rel="alternate" type="text/plain" title="LLM Summary" href="/llms.txt"> — LLM discovery<link rel="alternate" type="text/markdown" title="Markdown"> — markdown version (when page.url is set). Must include title attribute<meta name="robots"> — only when page.robots is set<link> tags when translations is non-emptydata.nav links (if present) with {{ lang_prefix }}{{ item.url }} for internal links, plain {{ item.url }} for item.external linkstarget="_blank" and rel="noopener"page.urlInclude the search UI and JavaScript that all bundled themes use:
role="search" and aria-labelaria-live="polite"{{ lang_prefix }}/search-index.json on first input focus{{ t.search_placeholder }}, {{ t.no_results }} for UI stringspage.content is set): render {{ page.content | safe }}collections is set): loop over collections, render items with title, date, description, tags{{ page.toc }} for table of contents (if collection has long-form content like docs)When pagination context exists:
{% if pagination %}
<nav aria-label="{{ t.pagination | default(value='Pagination') }}">
{% if pagination.prev_url %}<a href="{{ pagination.prev_url }}">{{ t.newer | default(value="← Newer") }}</a>{% endif %}
<span>{{ t.page | default(value="Page") }} {{ pagination.current_page }} / {{ pagination.total_pages }}</span>
{% if pagination.next_url %}<a href="{{ pagination.next_url }}">{{ t.older | default(value="Older →") }}</a>{% endif %}
</nav>
{% endif %}
data.footer links and copyright (if present)translations is non-emptyThe theme must include CSS for ALL of these (even if the site doesn't use them all yet — themes should be reusable):
nav variable), nested sections, active-link highlightingnew (green), fix (blue), breaking (red), improvement (purple), deprecated (gray)planned, in-progress, done, cancelled), grouped list layout, kanban layout (CSS grid 3-column), timeline layout.video-embed (responsive 16:9), .callout-* variants (info, warning, tip, danger), figure/figcaption<pre><code> with overflow-x scrollrole="search" and aria-label on searcharia-live="polite" on search resultsprefers-reduced-motion: reduce — disable all transitions/animationsprefers-color-scheme media query if the design supports both light and darkAfter writing templates/base.html:
seite buildseite serve is running)Common iteration requests:
Run seite build after every change. Keep going until the user is happy.
Once the user is satisfied:
templates/base.htmlseite theme export <name> --description "..." saves it to templates/themes/<name>.tera for reuse or sharingseite theme apply <name>Use these as starting points when the user's answers match one of these directions. Adapt everything to their specific needs.
Minimal / Editorial — Single column max 620px, Georgia serif body, geometric sans for UI. No decorative elements. Bottom-border-only search input. White/off-white (#FAF9F6) background, near-black (#1A1A1A) text, one muted link accent.
Bold / Neo-Brutalist — Thick black borders (3px solid #000), hard non-blurred box shadows (6px 6px 0 #000). No border-radius. Saturated fill: yellow #FFE600, lime #AAFF00, or coral #FF4D00. Cream (#FFFEF0) background. Font-weight 900. Headlines 4rem+.
Bento / Card Grid — Responsive CSS grid, gap 16px, all cards border-radius 20px. Mixed card sizes. Floating shadow: box-shadow: 0 4px 24px rgba(0,0,0,0.08). Warm neutral palette with one dark-accent card per row.
Dark / Expressive — True black (#0A0A0A) surfaces. One neon accent: green #00FF87, blue #0066FF, or violet #8B5CF6. Off-white text (#E8E8E8). Translucent nav with backdrop-filter: blur(12px). Visible focus rings.
Glass / Aurora — Gradient mesh background (violet #7B2FBE → teal #00C9A7). Floating panels: backdrop-filter: blur(16px), rgba(255,255,255,0.10) fill. Use for cards/nav only, not full layout.
Accessible / High-Contrast — WCAG AAA ratios. Min 16px body. 3px colored focus rings as design feature. Min 44px click targets. One semantic accent. Full prefers-reduced-motion support.
post.html, doc.html, page.html, etc.) unless the user specifically asks. The theme is base.html only.{{ lang }} (not {{ site.language }}) for the current language, {{ lang_prefix }} for URL prefixes, {{ t.key }} for all UI strings — never hardcode English text.<style> block inside the template. No external stylesheets.