28 Agent Skills for interface art direction.
Ochrelle is a repository of design skills for AI coding agents. The master skill interviews your product, weighs 27 candidate directions, and routes the work to a specialist that ships production UI under WCAG 2.2 Level AA rules. Plain markdown, CSS, and Python. Works with any agent that reads markdown.
- skills in the repository
- 28
- skills in the repository
- specialist directions
- 27
- specialist directions
- files in the repo
- 229
- files in the repo
- unit tests
- 29
- unit tests
Counts are taken from the repository at v2.0.0. The Verification section below shows the commands that reproduce them.
Why generated interfaces all look the same
The problem is not model capability. It is that three specific inputs are missing from the prompt.
Most briefs say "make it look good". The model answers with the same interface every time: a centered card, a soft shadow, Inter, and one safe gradient. The master skill forces an explicit style decision and records why it was made.
Every style has rules that generic training data blurs out. Neumorphism needs monochrome surfaces and dies on busy backgrounds. Brutalism is rough in structured ways. Claymorphism needs three stacked shadows to read as soft 3D. Each specialist carries its own rules.
Glassmorphism and maximalism can fail WCAG quietly while looking finished. Every skill ships accessibility guidance written for its own style, targeting WCAG 2.2 Level AA.
28 skills, one quality bar
One master skill routes and supervises. 27 specialists cover visual styles, layout patterns, period aesthetics, thematic genres, platform materials, and interaction paradigms. Every skill carries a style guide, runnable code recipes, documented failure modes, and a quality checklist.
Interviews the product context, weighs 27 candidate directions, records the decision, and routes the work to a specialist
Real-object metaphors, tactile controls, physical familiarity
Soft-UI extruded surfaces on monochrome, low-contrast scenes
Frosted translucency layered over vivid media
Puffy, friendly shapes for playful products and onboarding
Raw structure, hard borders, deliberate and controlled roughness
Reduction, whitespace rhythm, typographic clarity
Expressive density, layered type and pattern, kept under control
Apple's adaptive Liquid Glass and honest web approximations
Modular tile layouts sized by information priority
Depth, scale, and environment-aware interfaces
Solid fills, simple geometry, typography-first hierarchy
Elevation, FABs, and physical motion per Google's paper-and-ink system
Thick borders, hard offset shadows, saturated flats, loud brands
Translucent plastics, chrome gradients, dot-com optimism
Neon noir on near-black for gaming, nightlife, and streetwear
Mid-century warmth: cream, burnt orange, groovy type, halftone
Magazine craft on the web: dominant type, decks, pull quotes
Squiggles, terrazzo, deliberate 1980s postmodern clash
Japanese restraint meets Scandinavian warmth for calm products
Glossy aqua optimism: gel buttons, glass shine, nature plus tech
Flat vector illustration systems, trade-offs stated honestly
VHS nostalgia, statues, sunset gradients, mall-era memory
Limited palettes, crisp pixels, integer scaling for games
Monospace grids, box-drawing frames, phosphor on near-black
Sketchbook borders, doodles, paper texture, human warmth
1920s geometry and gold: sunbursts, symmetry, marquee luxury
Film-grade telemetry panels with contrast-safe glow
Check every claim yourself
No testimonials, no star ratings, no usage counters. The evidence is a repository you can audit in an afternoon, plus four commands that verify it.
- Skill validator
Checks frontmatter, reference links, and content invariants for all 28 skills. Stdlib only, no dependencies.
python3 scripts/validate_skills.py
- Repository validator
Asserts the repo layout: skill directories, docs, examples, license, citation file, and CI workflow.
python3 scripts/validate_repository.py
- Unit tests
29 pytest cases over skill metadata and repository structure, including negative fixtures that must fail cleanly.
python3 -m pytest tests/ -q
- File count
229 files in the repository, counted without git internals. The download zip ships exactly these files and nothing else.
find ochrelle -type f -not -path '*/.git/*' | wc -l
ochrelle/ ├── skills/ 28 self-contained skills │ ├── ochrelle-design-master/ │ │ └── references/ 7 documents │ └── 27 specialists, 6 families: │ visual styles, layout patterns, │ period aesthetics, thematic genres, │ platform materials, interaction paradigms ├── docs/ 7 guides + compatibility matrix ├── examples/ │ └── web-showcase/ live 10-style demo + catalog ├── website/ the Next.js site you are reading ├── scripts/ 2 validators + install.sh ├── tests/ 29 test cases └── README, LICENSE, CITATION.cff, CI
Install on any agent
./scripts/install.sh --claude # or: ./scripts/install.sh ./skills
"Design a dashboard for our analytics product. Pick the style and justify it."
python3 scripts/validate_skills.py && \ python3 -m pytest tests/ -q
What Ochrelle is not
Ochrelle is not a plugin market, a framework, or a hosted service. There is no runtime and nothing to execute inside your app. Each skill is a folder of markdown with frontmatter: copy it where your agent can read it, and the agent follows it. The Agent Skills format works with Claude Code natively, and with any other tool that can read project files.
The interactive showcase demonstrates ten core styles as working components with keyboard navigation and reduced-motion support, plus the full 27-style catalog.
Open the showcase