# Using Site Designer

> Use when designing or implementing static websites for developer tools, open-source projects, or technical documentation — information architecture, HTML/CSS, design tokens, developer UX patterns

- Skill: `tachyon-beep/using-site-designer` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add tachyon-beep/using-site-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tachyon-beep/using-site-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tachyon-beep (https://skillmd.com/u/tachyon-beep)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/tachyon-beep/using-site-designer

---


# Using Site Designer

## Overview

This skill routes you to static site design and implementation capabilities. Use it when building websites for developer tools, open-source projects, or documentation-heavy sites where content quality and developer UX matter more than marketing aesthetics.

**Core Principle**: Developer tool sites succeed on substance — clear docs, working examples, and fast navigation. Not hero images and testimonials.

## When to Use

Load this skill when:
- Planning site structure or information architecture for a project
- Implementing HTML/CSS for a developer-facing site
- Setting up design tokens and theming (dark/light mode)
- Building documentation site layouts with sidebars, breadcrumbs, search
- Choosing and configuring a static site generator or docs-first framework (Hugo, Astro, Eleventy, Starlight, VitePress, Docusaurus 3)
- User mentions: "website", "homepage", "landing page", "docs site", "static site"

**Don't use for**: General UI/UX design principles (use `lyra-ux-designer`), document formatting/PDF output (use `muna-document-designer`), or web API backend development (use `axiom-web-backend`).

## How This Pack Works

This pack provides a **site-designer agent** — a specialist subagent that combines information architecture, CSS craftsmanship, and developer UX expertise. The agent handles:

| Capability | Details |
|------------|---------|
| **Information architecture** | Site maps, navigation strategy, audience-specific paths |
| **HTML/CSS implementation** | Semantic markup, CSS custom properties, responsive layouts |
| **Design tokens** | Color palettes, typography, spacing scales, dark/light mode |
| **Developer UX** | Code blocks with copy, anchor links, version selectors, search |
| **Static site tooling** | Hugo, Astro, Eleventy, Starlight, VitePress, Docusaurus 3 — selection and configuration |
| **Accessibility** | WCAG AA compliance, keyboard nav, screen reader support |

## Reference Sheets

Reference sheets are located in the **same directory** as this SKILL.md file. Load them when the user's task matches:

| Reference | When to Load |
|-----------|-------------|
| [code-block-patterns.md](code-block-patterns.md) | Code blocks with copy-to-clipboard, syntax highlighting, language tabs, terminal styling, heading anchors |
| [documentation-sites.md](documentation-sites.md) | Multi-page documentation with sidebar navigation, versioning, search, API reference layouts |
| [landing-pages.md](landing-pages.md) | Project homepages and landing pages — content-first design for open-source and developer tools |
| [responsive-patterns.md](responsive-patterns.md) | Container queries, `:has()`, native nesting, fluid type, `<dialog popover>` mobile sidebar, sidebar collapse, responsive tables and code blocks |
| [static-site-tooling.md](static-site-tooling.md) | Choosing and configuring docs-first frameworks (Starlight, VitePress, Docusaurus 3) and general-purpose generators (Hugo, Astro, Eleventy) — build pipelines and deployment with the first-party GitHub Pages flow |
| [theming-and-tokens.md](theming-and-tokens.md) | Design token systems with OKLCH primitives, `light-dark()` semantic tokens, `color-mix()` derivations, dark/light mode toggle |

To load: Read the reference sheet from this skill's directory and include its guidance when dispatching the site-designer agent. Multiple sheets can be combined (e.g., documentation-sites + theming-and-tokens + responsive-patterns for a themed responsive docs site).

## Quick Start

### Designing a New Site

Ask for what you need — the site-designer agent will be dispatched:

```
"Plan the site structure for our open-source CLI tool"
"Create a docs site layout with sidebar navigation"
"Set up design tokens with dark mode for our project site"
"Build a landing page for our Python library"
```

### Common Workflows

**New project site:**
Start with information architecture (who are the audiences, what content exists), then design tokens, then implement pages incrementally.

**Documentation site:**
Load the documentation-sites reference sheet. Focus on navigation patterns, content hierarchy, and cross-linking before any visual design.

**Adding theming:**
Load the theming-and-tokens reference sheet. Define CSS custom properties, implement dark/light toggle, derive the full palette from brand colors.

## Relationship to Other Skills

| Need | Use |
|------|-----|
| UI/UX design principles and patterns | `lyra-ux-designer` |
| Professional PDF/document formatting | `muna-document-designer` |
| Writing documentation content | `muna-technical-writer` |
| Web API backend development | `axiom-web-backend` |
| **Building the website itself** | **`lyra-site-designer`** (this pack) |

The typical flow: design with `lyra-ux-designer`, write content with `muna-technical-writer`, build the site with `lyra-site-designer`.