A field guide to design languages and a copy-paste prompt for turning any of them into a reusable style skill your AI agent can apply on command.
Live @ https://meefs.github.io/style-skills/
An interactive, single-file reference map of design movements (Swiss, Bauhaus, Constructivism, Editorial…) and digital-era looks (neo-brutalism, glassmorphism, terminal/TUI…), each linked to a visual exemplar.
The closing section is the point: a decomposition prompt you can aim at any specimen — a Dribbble shot, a screenshot, or a live URL — that extracts the look into a ready-to-save skill: palette tokens, a type scale, layout rules, and a self-contained HTML template. It gets you 80–100% of the way; a short refine pass closes the rest.
Left unguided, a model regresses to the mean of its training data — mostly component-framework UI — so "make a webpage" keeps producing the same rounded, shadowed, system-sans look. A style skill is the corrective: it forces one opinionated canon instead of the statistical center.
- Three themes — Light, Dark Pine, Slate
- Three text sizes and three background-bloom densities
- A soft-aurora generative background (HTML canvas)
- One-click Copy on the decomposition prompt
- Print-ready (
@media printcollapses to clean black-on-white) - Single file; the only external dependency is Google Fonts (degrades to Georgia/serif offline)
Open index.html in any browser, or read the live page linked above.
Know a style worth adding, or spot something to fix? Open an issue: https://github.com/meefs/style-skills/issues
Improvements welcome.
Presented in the "fieldnotes" editorial house style. Built with Claude Code.