skills.rest
pgoell
pgoellCOMMUNITY
Explore all skills by this author →
Website𝕏@pagoellGitHub

crafting-design-systems

Create and edit CSS variable design systems that theme workbench HTML output.

Updated Mar 18, 2026
Search Tags:#typography#theming#html#design system#color palette#css variables#workbench
One-click install
npx skills add https://github.com/pgoell/pgoell-claude-tools --skill crafting-design-systems-pgoell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: crafting-design-systems
Source: https://github.com/pgoell/pgoell-claude-tools/tree/main/plugins/workbench/skills/crafting-design-systems
Command: npx skills add https://github.com/pgoell/pgoell-claude-tools --skill crafting-design-systems-pgoell

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? HTML artifacts produced by workbench producer skills all share default styling, and restyling each artifact by hand is repetitive and inconsistent. This Skill lets you author a reusable design system of CSS variable overrides, typography, components, and images that producers apply automatically. ## Core Features & Use Cases - Design system authoring: Create a named design system at project scope (.workbench/design-systems/<name>/) or user scope (~/.claude/workbench/design-systems/<name>/) with a required manifest.md and colors.css. - Optional extensions: Add typography.css font overrides, self-contained components/*.html snippets, and images/ that producers base64-inline into artifacts. - Per-template variable inventory: A table maps which CSS variables each producer template (brainstorming, writing-spec, writing-plans, systematic-debugging, research) actually consults, so overrides target real variables. - Use Case: A team wants all generated specs and plans to match their brand. They copy the starter palette, adjust accent and ink colors, wire the name into .workbench/config.md, and every subsequent producer render uses the new theme. ## Quick Start Ask the assistant to create a new project-scoped design system named brand-2026 using the starter palette and set it as the active design system.

Frequently Asked Questions about crafting-design-systems

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system for workbench HTML output?▼

Create a kebab-case directory under .workbench/design-systems/ (project scope) or ~/.claude/workbench/design-systems/ (user scope), copy the starter colors.css into it, edit the variable values, and add a manifest.md describing the palette. Then set the name in .workbench/config.md to activate it.

How do I theme output from writing-spec or brainstorming skills?▼

Producer skills apply the active design system automatically, so you only author the design system itself. Override the CSS variables listed for that producer's template in colors.css, and the values appear in the rendered HTML style block.

What is the difference between project and user scope design systems?▼

Project scope lives in .workbench/design-systems/ at the repo root and travels with the codebase, while user scope lives in ~/.claude/workbench/design-systems/ and applies across all projects. If the same name exists at both scopes, the project version wins.

Can a design system include custom fonts and images?▼

Yes. Add an optional typography.css with --serif, --sans, and --mono overrides, and place images in an images/ directory. Producers inline typography after colors.css and base64-encode images into the artifact by default.

Why are my CSS variable overrides not appearing in rendered HTML?▼

Templates only consult variables they declare in their own :root block, so overrides for undeclared variables are silently ignored. Check the per-template variable inventory to confirm the target template actually references the variable you changed.

When should I not use a design system for styling?▼

Do not use it to produce HTML artifacts directly, since producer skills apply the active system on their own, and do not use it for UI or product component design. Multi-slide presentations are also excluded because they consume brand presets instead.

Related Skills

Explore More Design & Creative Skills→
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate
ze-softwareze-software
50

ze-spec

Organize Ze specification development through scope, research, design, and write gates.

Official
Advanced
fractaryfractary

generate-from-template

Substitute {{VARIABLE}} placeholders in templates using JSON mappings.

Official
Advanced
thechrickenrun-cyberthechrickenrun-cyber

theme-factory

Apply professional visual themes to presentation decks and HTML landing pages.

Community
Intermediate