Communitygithub.com

alty-oss/dev-design

Verwendet beim Inventarisieren bestehender UI-Tokens/Komponenten oder beim Definieren eines konsistenten Token- und Komponentenvertrags für die Implementierung.

Was ist dev-design?

Dieses Skill hilft Entwicklern und Designern, bestehende UI-Komponenten und Design-Tokens wie Farben, Typografie, Abstände und Interaktionskonventionen systematisch zu erfassen und wiederzuverwenden, bevor neue parallele Systeme eingeführt werden. Es unterstützt gängige KI-Agenten-Plattformen wie Claude Code, Cursor und Codex und stellt sicher, dass Designentscheidungen dokumentiert und mit dem bestehenden Stack kompatibel sind. Der Skill schreibt vor, ein `tokens.json` sowie Komponentenentscheidungen in einem standardisierten Artefakt-Vertrag zu erstellen und semantische Rollen (z. B. Oberfläche, Text, Aktion, Status) auf vorhandene Tokens abzubilden oder kompakte, zur `direction.md` passende Werte zu definieren. Zusätzlich werden für jede betroffene Komponente Zweck, API/Varianten, Zustände, responsive Regeln und barrierefreies Verhalten in `flows.md` oder `direction.md` festgehalten. Dadurch wird sichergestellt, dass keine UI-Bibliothek oder Schriftart ohne Prüfung des aktuellen Tech-Stacks und der Benutzervorgaben eingeführt wird, und Markenentscheidungen bleiben explizit erhalten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/design-system
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Designsystem

Português (Brasil) Inventarisieren Sie zuerst die aktuellen Komponenten, Tokens, Typografie, Abstände und Interaktionskonventionen. Wiederverwenden, bevor ein paralleles System hinzugefügt wird. Schreiben Sie tokens.json und Komponentenentscheidungen unter Verwendung des Artefaktvertrags. Ordnen Sie semantische Rollen vorhandenen Token-Referenzen zu, wenn verfügbar; andernfalls definieren Sie kompakte Werte, die mit der direction.md übereinstimmen. Decken Sie Farbrollen, Typografie, Abstände, Radius und Bewegung ab. Definieren Sie Fokus- und Deaktivierungsbehandlungen. Unterscheiden Sie Oberflächen-/Text-/Aktions-/Statusrollen. Halten Sie für jede betroffene Komponente den Zweck, die API/Varianten, Zustände, responsive Regeln und barrierefreies Verhalten in flows.md oder direction.md fest. Führen Sie keine UI-Bibliothek oder Schriftartabhängigkeit ein, ohne den aktuellen Stack und die Einschränkungen des Benutzers zu prüfen. Bewahren Sie explizite Markenentscheidungen.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

alty-oss/dev-design

Use when reviewing UI keyboard access, focus, accessible names, structure, contrast and motion behavior.

alty-oss/dev-design

Use when establishing a distinctive visual direction for a new UI or an intentional redesign.

alty-oss/dev-design

Use when a UI task needs its audience, primary job, content, constraints and success criteria clarified before design.

alty-oss/dev-design

Use when delivering a UI change with its decisions, verification evidence and remaining limitations.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community