Theme Designer

Use this Tessl skill to design, critique, or refine a website theme, visual style, look and feel, branding, CSS theme, design system, tokens.css file, or CSS token system.

The skill turns an open-ended theme brief into a coherent design direction with creative positioning, typography, color atmosphere, composition, imagery, motion, responsive behavior, design token specs, implementation-ready CSS custom properties, component motif rules, and light/dark/density variant strategy. It also supports critique of an existing site, screenshot set, mockup, or codebase when the goal is to identify why a direction feels generic, incoherent, hard to use, or hard to build.

When to use

Use theme-designer when you want to:

• Design a fresh website theme from a brand or product brief
• Explore 2-3 visual directions and choose a recommended route
• Critique an existing visual direction for originality and coherence
• Refine a partial concept without starting over
• Translate brand adjectives into typography, color, layout, motion, and tokens
• Keep a visually rich direction accessible, responsive, and buildable

Install

tessl install sharaf/theme-designer

Organization

theme-designer/
├── README.md
├── tile.json
└── skills/theme-designer/
    ├── SKILL.md
    └── references/
        ├── evaluation-guardrails.md
        ├── example-theme-direction.md
        ├── implementation-architecture.md
        ├── theme-system-layers.md
        └── workflow.md

The entrypoint handles mode selection, workflow, and output structure. Linked references provide concrete examples, system layer guidance, token/CSS architecture, and evaluation guardrails.

Output contract

Default output uses this structure unless the user asks for something narrower:

# Theme Direction: [Name]

## Core Idea
## Visual Archetype
## Typography System
## Color and Atmosphere
## Composition and Rhythm
## Imagery and Surface Language
## Motion and Interaction Feel
## Responsive Rules
## Implementation Notes
## Risks and Tradeoffs
## Evaluation