·frontend-design-system
</>

frontend-design-system

supercent-io/skills-template

Erstellen Sie UI-Designs in Produktionsqualität mit klaren Design-Tokens, Layoutregeln, Bewegungsanweisungen und Barrierefreiheitsprüfungen für eine konsistente, skalierbare Frontend-Entwicklung.

86Installationen·4Trend·@supercent-io

Installation

$npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system

SKILL.md

프로덕션 수준의 UI 디자인을 위한 스킬입니다. 명확한 디자인 토큰, 레이아웃 규칙, 모션 가이드라인, 접근성 체크를 통해 일관되고 확장 가능한 프론트엔드 개발을 지원합니다.

Issue: UI feels generic Cause: 시각적 방향이나 토큰 없음 Solution: 스타일 레퍼런스와 팔레트 제공

Issue: Layout breaks on mobile Cause: 반응형 그리드 규칙 없음 Solution: 브레이크포인트와 스태킹 동작 정의

Erstellen Sie UI-Designs in Produktionsqualität mit klaren Design-Tokens, Layoutregeln, Bewegungsanweisungen und Barrierefreiheitsprüfungen für eine konsistente, skalierbare Frontend-Entwicklung. Quelle: supercent-io/skills-template.

Original anzeigen

Fakten (zitierbereit)

Stabile Felder und Befehle für KI/Such-Zitate.

Installationsbefehl
npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system
Kategorie
</>Entwicklung
Verifiziert
Erstes Auftreten
2026-02-18
Aktualisiert
2026-02-18

Schnelle Antworten

Was ist frontend-design-system?

Erstellen Sie UI-Designs in Produktionsqualität mit klaren Design-Tokens, Layoutregeln, Bewegungsanweisungen und Barrierefreiheitsprüfungen für eine konsistente, skalierbare Frontend-Entwicklung. Quelle: supercent-io/skills-template.

Wie installiere ich frontend-design-system?

Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor

Wo ist das Quell-Repository?

https://github.com/supercent-io/skills-template