Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add aiatelie/ai-atelie --skill design-aesthetic-presetsgit clone --depth 1 https://github.com/aiatelie/ai-atelieWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/aiatelie/ai-atelie/design-aesthetic-presets)<a href="https://agentmods.dev/skills/aiatelie/ai-atelie/design-aesthetic-presets"><img src="https://agentmods.dev/badge/skills/aiatelie/ai-atelie/design-aesthetic-presets/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/aiatelie/ai-atelie/design-aesthetic-presets"><img src="https://agentmods.dev/badge/skills/aiatelie/ai-atelie/design-aesthetic-presets.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00045 | $0.02406 |
| Opus 5 | $0.00023 | $0.01203 |
| Sonnet 5 | $0.00009 | $0.00481 |
| Haiku 4.5 | $0.00005 | $0.00241 |
Grade A, and why
design-aesthetic-presets scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 112 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Aesthetic presets
A menu of eleven named aesthetic directions, each with concrete CSS hooks, font roles, and motion vocabulary. Use this skill when the user asks for "something distinctive" without naming the direction, or when frontend-design fired and you need to pin down which direction to execute.
How to use
- Pick one preset that fits the brief. State the choice in one sentence to the user before writing code. ("Going with brutalist — heavy black borders, cold neutrals, monospace display.")
- Don't blend. Two presets at once dilutes both. If the brief seems to mix, ask which dominant.
- Execute the recipe. Each preset below names the type vocabulary, palette spine, motion register, and detail moves. Apply them — don't shop around.
- Add one signature. The list gives you the floor; pick one detail (a custom cursor, a specific micro-interaction, an unexpected proportion) that's yours.
The presets
1. Swiss / Bauhaus minimalism
- Essence. Grid-true, asymmetric, type-led. Information hierarchy via size and space, not decoration.
- Type. Display: Helvetica Now Display, Neue Haas Grotesk, Inter Tight (only here, in display weight, with deliberate negative tracking). Body: Helvetica, Neue Haas, system grotesk.
- Palette spine. Single accent color (red is canonical, any saturated primary works) on
#fafafaor#f5f5f5. Black and a single grey. - Motion. None or near-none. Hovers shift opacity 4-8% only. No transitions on layout.
- Detail moves. Heavy diagonal grid lines, oversized numerals, type that bleeds off the edge, footnote-sized eyebrow labels.
2. Neumorphism (use sparingly — easy to ship as slop)
- Essence. Soft, plastic, embossed. Two opposing shadows (light + dark) on the same monochrome surface.
- Type. SF Pro, Inter, or any rounded grotesque. Mid-weight only — bold reads wrong.
- Palette spine. Single hue at low saturation as the surface; no contrast against bg. Add ONE bright accent for primary action.
- Motion. Press states are required — invert the shadow direction on click.
- Detail moves. All radii ≥ 16px. No hard borders ever. Cards are always elevated or inset, never flat.
- Failure mode. Overuse — every component as a neumorphic card looks like the default tutorial. Use neumorphism for primary CTAs only; flat for the rest.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 112 lines · 45 tokens per session scan A 154282495952
design-aesthetic-presets is a skill published in the GitHub repository aiatelie/ai-atelie (8 stars, last pushed 3mo ago), licensed MIT. It adds 45 tokens to every session and 2,406 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design-brief
Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief"…
critique
Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks…
kami-landing
Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.
open-design-landing-deck
OpenDesign's brand-story deck for partners and press: why it exists, what it believes, and where design is going. Built as a decision-grade marketing & GTM deck for partners, press, community.
open-design-landing
Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic OpenDesign uses for its own marketing surface. The agent fills a typed inputs.json from a brand brief, optionally generates 16 collage assets via…
tweaks
Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants"…