How do I install the Design Directions skill?

Run npx skillmds@latest add casoon/design-directions in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Directions safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Directions?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Directions free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design Directions?

casoon (@casoon) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Directions by casoon — Agent Skill

Name: Design Directions
Author: casoon

Design Directions

Taxonomie der gängigen Webdesign-Richtungen (Editorial, Corporate, Premium/Luxury, Bold Branding, Minimalismus, Tech, Storytelling, Conversion, Content-First, Brand-First) mit Merkmalen und passenden Branchen/Zielen — um bewusst EINE Richtung zu wählen statt beim Default-Template zu landen. Nutzen bei Designrichtungs-Entscheidungen (Phase 5 in web-design-workflow). NICHT für die konkrete ästhetische Ausführung — dafür frontend-design.

casoon cb28c21 2.9 KB Updated Sep 17, 2026

File contents

Design-Richtungen

Bewusst eine Richtung wählen — passend zu Marke, Zielgruppe und Ziel (aus den Strategie-Phasen). Nicht aus Reflex beim Default landen.

Richtung	Merkmale	Passend für
Editorial	große Typografie, viel Weißraum, Magazin, Textfokus	Blogs, Agenturen, Architektur
Corporate	klar, seriös, Raster, viel Struktur	Industrie, Steuerberater, Software, Kanzleien
Premium / Luxury	wenige Farben, viel Weißraum, große Bilder, wenig Text, Marke im Vordergrund	Luxus, hochpreisige Produkte
Bold Branding	riesige Überschriften, starke Farben, mutige Typo, Animationen	Startups, junge Marken
Minimalismus	wenige Elemente, große Abstände, klare Navigation (Apple-Stil)	produktzentrierte Marken
Tech	Dark Mode, Glows, Gradienten, Grid, Animationen	SaaS, AI, Cloud
Editorial + Storytelling	große Bildflächen, Scroll-Effekte, Kapitel, Timeline	Case Studies, Marken-Narrativ
Conversion	Landingpage, klare CTAs, Vertrauen, Social Proof, A/B-Test	Leadgen, Produktverkauf
Content-First	SEO, lange Texte, viele Zwischenüberschriften, Infoboxen, FAQ, Tabellen	Magazine, Ratgeber
Brand-First	Logo, Schrift, Farben, Emotion, wenig Inhalt, viel Wiedererkennung	Image, Markenauftritt

Auswählen

Die Richtung folgt aus der Strategie, nicht aus Geschmack:

Ziel entscheidet stark: Leadgen/Verkauf → Conversion; SEO/Ratgeber → Content-First; Image → Premium/Brand-First; Vertrauen/B2B → Corporate.
Marke: Premium vs. günstig, innovativ vs. konservativ, emotional vs. sachlich → Premium/Bold vs. Corporate/Minimal.
Contentmenge: viel Text → Editorial/Content-First; wenig Text, starke Bilder → Premium/Brand-First.
Zielgruppe/Gerät: mobil-lastig + schnelle Entscheidung → Conversion/Minimal.

Richtungen lassen sich mischen (z. B. Editorial-Corporate), aber mit einer klaren Leitrichtung — sonst wird es beliebig.

Gotchas

Reflex-Defaults meiden: Tech-SaaS-Dark, cream/beige-Editorial und der zentrierte Conversion-Hero sind die aktuellen AI-Defaults — nur wählen, wenn die Strategie es fordert, nicht als Rückfall. Siehe die Absolute-Bans in [[frontend-design]].
Die Richtung ist eine Entscheidung mit Begründung, kein Etikett — festhalten, warum sie zu Marke/Ziel passt.
Teil des Prozesses in [[web-design-workflow]] (Phase 5); die Ausführung übernehmen [[frontend-design]] + [[ui-design]].

---name: design-directionsdescription: Taxonomie der gängigen Webdesign-Richtungen (Editorial, Corporate, Premium/Luxury, Bold Branding, Minimalismus, Tech, Storytelling, Conversion, Content-First, Brand-First) mit Merkmalen und passenden Branchen/Zielen — um bewusst EINE Richtung zu wählen statt beim Default-Template zu landen. Nutzen bei Designrichtungs-Entscheidungen (Phase 5 in web-design-workflow). NICHT für die konkrete ästhetische Ausführung — dafür frontend-design.---# Design-RichtungenBewusst **eine** Richtung wählen — passend zu Marke, Zielgruppe und Ziel (aus den Strategie-Phasen). Nicht aus Reflex beim Default landen.| Richtung | Merkmale | Passend für ||---|---|---|| **Editorial** | große Typografie, viel Weißraum, Magazin, Textfokus | Blogs, Agenturen, Architektur || **Corporate** | klar, seriös, Raster, viel Struktur | Industrie, Steuerberater, Software, Kanzleien || **Premium / Luxury** | wenige Farben, viel Weißraum, große Bilder, wenig Text, Marke im Vordergrund | Luxus, hochpreisige Produkte || **Bold Branding** | riesige Überschriften, starke Farben, mutige Typo, Animationen | Startups, junge Marken || **Minimalismus** | wenige Elemente, große Abstände, klare Navigation (Apple-Stil) | produktzentrierte Marken || **Tech** | Dark Mode, Glows, Gradienten, Grid, Animationen | SaaS, AI, Cloud || **Editorial + Storytelling** | große Bildflächen, Scroll-Effekte, Kapitel, Timeline | Case Studies, Marken-Narrativ || **Conversion** | Landingpage, klare CTAs, Vertrauen, Social Proof, A/B-Test | Leadgen, Produktverkauf || **Content-First** | SEO, lange Texte, viele Zwischenüberschriften, Infoboxen, FAQ, Tabellen | Magazine, Ratgeber || **Brand-First** | Logo, Schrift, Farben, Emotion, wenig Inhalt, viel Wiedererkennung | Image, Markenauftritt |## AuswählenDie Richtung folgt aus der Strategie, nicht aus Geschmack:- **Ziel** entscheidet stark: Leadgen/Verkauf → Conversion; SEO/Ratgeber → Content-First; Image → Premium/Brand-First; Vertrauen/B2B → Corporate.- **Marke**: Premium vs. günstig, innovativ vs. konservativ, emotional vs. sachlich → Premium/Bold vs. Corporate/Minimal.- **Contentmenge**: viel Text → Editorial/Content-First; wenig Text, starke Bilder → Premium/Brand-First.- **Zielgruppe/Gerät**: mobil-lastig + schnelle Entscheidung → Conversion/Minimal.Richtungen lassen sich mischen (z. B. Editorial-Corporate), aber mit **einer** klaren Leitrichtung — sonst wird es beliebig.## Gotchas- **Reflex-Defaults meiden:** Tech-SaaS-Dark, cream/beige-Editorial und der zentrierte Conversion-Hero sind die aktuellen AI-Defaults — nur wählen, wenn die Strategie es *fordert*, nicht als Rückfall. Siehe die Absolute-Bans in [[frontend-design]].- Die Richtung ist eine **Entscheidung mit Begründung**, kein Etikett — festhalten, *warum* sie zu Marke/Ziel passt.- Teil des Prozesses in [[web-design-workflow]] (Phase 5); die Ausführung übernehmen [[frontend-design]] + [[ui-design]].

Frequently asked questions