Johnny Suede Design

Design- und Copy-Stack für Landing Pages, Dashboards, Restyles und visuelle Qualitätssicherung

von JasonColapietro · JasonColapietro/suede-creator-skills

Getestet · Funktioniert ★ 8.4/10

Johnny Suede Design — Design- und Copy-Stack für Landing Pages, Dashboards, Restyles und visuelle Qualitätssicherung

Was es kann

Ein kombinierter Design- und Copywriting-Workflow für Produktoberflächen: Er klassifiziert das Register (Marke, Produkt, Dokumente, Kampagne, Mobil), erzwingt eine benannte Farbstrategie und ästhetische Richtung, schreibt den Text mit einem Anti-Schlamperei-Zeilenbearbeitungsdurchlauf und endet mit einem gerenderten visuellen QA-Vergleich. Wird bei Landingpage- und Dashboard-Designarbeiten, Referenz-zu-Ziel-Restyles, UI-Texten und visuellen Pre-Launch-Reviews ausgelöst. Liefert vier Referenzdateien, die Designgesetze, Copy-Formeln, ein Restyle-Playbook und zwanzig Oberflächenmodifikator-Linsen abdecken.

Testbericht

Eine Hero-Copy- und visuelle Richtungsaufgabe für ein kleines SaaS zur Bestandsabstimmung wurde zweimal ausgeführt, mit und ohne den Skill. Der No-Skill-Durchlauf lieferte einen Gedankenstrich, einen Gradienten-Hero mit einem Icon-Karten-Raster, eine erfundene Statistik "save 10+ hours a week" und einen "Get started free"-Button; der Skill-Durchlauf hatte nichts davon, verpflichtete sich zu einer benannten Farbstrategie und ästhetischen Richtung und kennzeichnete den fehlenden Nachweis als [NEEDS REAL DATA], anstatt ihn zu erfinden. Sein hart gesichertes Marken-Asset wurde durch Ausführung verifiziert: Der in SKILL.md geschriebene SHA-256 stimmt sowohl mit der im Repo befindlichen PNG als auch mit der angehefteten raw.githubusercontent-Kopie überein, auf die es zurückgreift. Zwei Kosten, die Sie vor der Installation kennen sollten: SKILL.md ist 40 KB groß und wird bei jedem Trigger geladen, und es leitet zu zehn Geschwister-Skills aus demselben Paket, so dass das Kopieren dieses einen Ordners die meisten seiner Routings tot lässt. Beachten Sie auch seine anfängliche Gate-Richtlinie, die jedes Qualitäts-Gate und jedes Versandurteil beratend macht, so dass ein "hold" ein Problem meldet, aber die Arbeit niemals stoppt.

Getestet am: 2026-07-29 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/JasonColapietro/suede-creator-skills.git
mkdir -p ~/.claude/skills
cd suede-creator-skills && cp -r skills/johnny-suede-design ~/.claude/skills/johnny-suede-design

Befehle & Beispiel-Prompts

  • /johnny-suede-designDesign- und Copy-Stack für Landing Pages, Dashboards, Restyles und visuelle Qualitätssicherung

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • Redesign our landing page hero and write copy that doesn't sound like AI
  • Make our dashboard look less generic and run a visual QA pass on mobile
  • Take stripe.com's aesthetic and restyle our marketing site to match it