SKILL·055ACF

committed-aesthetic

avelikiy
Aktualisiert 6 days ago
2 Ansichten
89
13
89
Auf GitHub ansehen
Metaaidesign

Über

Die `committed-aesthetic`-Fähigkeit definiert einen einzigen, präzisen Designstil für konsistente Agentenausführung, anders als ein Katalog von Optionen. Sie wird verwendet, um einen spezifischen Hausstil von Grund auf durchzusetzen, generische Ergebnisse zu vermeiden und wiederholbare Resultate sicherzustellen. Wenden Sie sie an, wenn Sie eine neue Markenoberfläche ohne bestehende Referenzen beginnen oder wenn Sie benötigen, dass ein Agent eine definierte Ästhetik zuverlässig umsetzt.

Schnellinstallation

Claude Code

Empfohlen
Primär
npx skills add avelikiy/great_cto -a claude-code
Plugin-BefehlAlternativ
/plugin add https://github.com/avelikiy/great_cto
Git CloneAlternativ
git clone https://github.com/avelikiy/great_cto.git ~/.claude/skills/committed-aesthetic

Kopieren Sie diesen Befehl und fügen Sie ihn in Claude Code ein, um diese Fähigkeit zu installieren

Dokumentation

A committed aesthetic beats a catalogue

The problem this exists for

ui-ux-pro-max ships 84 styles, 161 palettes and 57 font pairings, and design-advisor is wired to all of it. The catalogue is not the bottleneck.

The bottleneck is that a catalogue lets a model pick, and an unconstrained pick is the modal one. Asked for a landing page with no brand, any model reaches for the same safe centre: a soft gradient, a large sans heading, three rounded cards with a left accent border, generous neutral grey. Every input in the training distribution votes for it. Nothing in a catalogue entry saying "Swiss minimalism — clean, grid-based, generous whitespace" is specific enough to override that, because that sentence describes the safe centre too.

Compare a rule from a committed aesthetic:

every dimension is calc(fraction * 100vw) against a baseline width, so one page at 1024px reads as a perfect scaled-down of the same page at 1920px

You can check that. A design either obeys it or does not. That is the whole difference: a catalogue entry is a label, a committed aesthetic is a constraint.

The form

A committed-aesthetic skill has five parts. The first is the one that does the work.

1. Transferable DNA — numbered, specific, falsifiable

Between 8 and 14 rules. Each must be checkable by someone who was not in the room. Test every rule against this: could two designers disagree about whether a page obeys it? If yes, it is a vibe, rewrite it.

Vibe (useless)Constraint (usable)
"thin, elegant type""weights 100 or 300 only, never 400+"
"lots of whitespace""~60% of any above-the-fold area is empty"
"restrained motion""no shadows, no gradients, no bounce; one shadow exists in the system, on toasts"
"technical feel""product codes use en-dash U+2013, never hyphen"
"dark and dense""five surface steps, each ~5% apart; depth is a surface step, never a shadow"

2. What this does NOT do — the IP boundary, as a table

An aesthetic is inspired-by, not cloned. Name the specific assets that belong to whoever you are borrowing from — wordmark, icon set, information architecture, product names, copy — and for each give the reason and what to do instead. This is not a legal disclaimer at the bottom; it is a working table an agent reads while building, and it is the difference between an homage and a trademark problem. Where the source is a real company, default to inspired-but-distinct and ask before taking the clone path.

3. A component library that runs

One HTML file the agent can open, with every component rendered and its own CSS inline, copy-pasteable. A token table in prose is read and paraphrased; a rendered gallery is copied exactly. This is why the form works at all.

4. Templates for the signature patterns

The two or three moves nobody would reconstruct from the DNA list alone — the navigation shape, the section header, the hero. With swap these for your own brand marked in comments.

5. Reference captures, marked "study, do not pixel-copy"

Screenshots are for understanding the patterns. Building FROM a screenshot rather than from the rules produces a bad tracing of one page instead of a design in the family.

The banned list, and why we needed one

ui-ux-pro-max's anti-pattern tables are about accessibility, touch targets and performance. They are good and they are not about taste. Nothing in this repository told an agent what cliché looks like, so the only defence against slop was one sentence in design-advisor: "no generic clean modern minimal filler".

Banned by default on any surface without an existing system that calls for them:

  • A gradient as the page ground. Especially purple-to-blue, especially at 135°.
  • The card triplet: three equal cards, rounded corners, a coloured left border, an icon in a tinted circle.
  • Inter, Roboto, Arial, Open Sans, Fraunces, Poppins as the display face. Not because they are bad — because they are the default vote.
  • Emoji as iconography. Draw the icon. (Emoji are fine if the brand uses them.)
  • The hero that describes a category rather than taking a position. "The modern platform for X" is the sentence a model writes when it has not been told what to believe.
  • Glassmorphism, neumorphism, and a mesh-gradient blob unless the brief names one of them.
  • Symmetric three-column feature grids as the default second section.

A banned list is not a style. It removes the centre so a choice has to be made.

Using one

  1. If a system already governs, this skill does not apply — match what exists.
  2. If nothing governs and you can ask: offer 2–4 genuinely different directions, each an axis you can name, before building. Not five shades of one aesthetic — that is not a choice.
  3. If nothing governs and you cannot ask: commit to ONE, state the assumption in a line at handover, and put 1–2 low-fi alternates beside the deliverable, never instead of it.
  4. Once a direction is chosen, load its committed-aesthetic skill and execute the DNA rules literally. Cite the rule number for each choice, the way design-advisor already cites a ui-ux-pro-max rule.

Instances in this repository

Related: skills/ui-ux-pro-max/SKILL.md is the catalogue this stands beside, not a replacement for it — the catalogue is where you look when you need to KNOW something; this is what you load once you have DECIDED something.

GitHub Repository

avelikiy/great_cto
Pfad: skills/committed-aesthetic
0
agentic-codingai-agentsclaude-codeclaude-code-pluginclaude-code-skillsclaude-code-subagents
FAQ

Häufig gestellte Fragen

Was ist der Skill committed-aesthetic?

committed-aesthetic ist ein Claude Skill von avelikiy. Skills bündeln Anweisungen und Ressourcen, die Claude bei Bedarf lädt, um Aufgaben rund um committed-aesthetic ohne zusätzliche Eingaben auszuführen.

Wie installiere ich committed-aesthetic?

Verwende die Installationsbefehle auf dieser Seite: Füge committed-aesthetic als Plugin zu Claude Code hinzu oder klone das Repository in dein Skills-Verzeichnis. Starte Claude danach neu, damit der Skill geladen wird.

Zu welcher Kategorie gehört committed-aesthetic?

committed-aesthetic gehört zur Kategorie Meta.

Kann ich committed-aesthetic kostenlos nutzen?

Ja. committed-aesthetic ist auf AIMCP gelistet und kann kostenlos installiert werden.

Verwandte Skills

content-collections
Meta

Diese Skill bietet eine produktionsgetestete Einrichtung für Content Collections – ein TypeScript-first-Tool, das Markdown/MDX-Dateien in typsichere Datensammlungen mit Zod-Validierung umwandelt. Verwenden Sie ihn beim Erstellen von Blogs, Dokumentationsseiten oder inhaltsstarken Vite + React-Anwendungen, um Typsicherheit und automatische Inhaltsvalidierung zu gewährleisten. Er behandelt alles von der Vite-Plugin-Konfiguration und MDX-Kompilierung bis hin zur Deployment-Optimierung und Schema-Validierung.

Skill ansehen
polymarket
Meta

Diese Fähigkeit ermöglicht es Entwicklern, Anwendungen mit der Polymarket-Prognosemärkte-Plattform zu erstellen, einschließlich API-Integration für Handel und Marktdaten. Sie bietet außerdem Echtzeit-Datenstreaming über WebSocket, um Live-Trades und Marktaktivitäten zu überwachen. Nutzen Sie sie zur Implementierung von Handelsstrategien oder zur Erstellung von Tools, die Live-Marktaktualisierungen verarbeiten.

Skill ansehen
creating-opencode-plugins
Meta

Diese Fähigkeit unterstützt Entwickler dabei, OpenCode-Plugins zu erstellen, die in über 25 Ereignistypen wie Befehle, Dateien und LSP-Operationen eingreifen. Sie bietet die Plugin-Struktur, Event-API-Spezifikationen und Implementierungsmuster für JavaScript/TypeScript-Module. Nutzen Sie sie, wenn Sie den Lebenszyklus des OpenCode KI-Assistenten mit benutzerdefinierter ereignisgesteuerter Logik abfangen, überwachen oder erweitern müssen.

Skill ansehen
sglang
Meta

SGLang ist ein hochperformantes LLM-Serving-Framework, das sich auf schnelle, strukturierte Generierung für JSON, Regex und agentenbasierte Workflows unter Verwendung seines RadixAttention-Prefix-Cachings spezialisiert. Es bietet deutlich schnellere Inferenz, insbesondere für Aufgaben mit wiederholten Präfixen, was es ideal für komplexe, strukturierte Ausgaben und Mehrfachdialoge macht. Wählen Sie SGLang gegenüber Alternativen wie vLLM, wenn Sie constrained decoding benötigen oder Anwendungen mit umfangreicher Präfix-Weitergabe entwickeln.

Skill ansehen