メニュー
Historical design movements and their enduring influence. Understand Bauhaus, Swiss International Style, Art Deco, Memphis, and more. Use when choosing an aesthetic direction, understanding cultural context, or predicting trend cycles.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Professional framework for building premium $5k+ SaaS websites with AI - the Define, Build, Review, Refine loop used by real product teams
Patterns for delegating UI work to specialized agents. Covers synthesis-master vs specialized agents, multi-agent UI generation workflows, and orchestration strategies for complex UI tasks.
Managing design tokens and system context for LLM-driven UI development. Covers loading, persisting, and optimizing design decisions within context windows.
Prompt patterns for consistent UI generation. Covers precise design intent communication, component specification formats, and iterative refinement patterns for LLM-driven UI development.
Integrating Chrome DevTools and browser automation via MCP for live UI inspection, screenshot-to-code workflows, and visual debugging. Bridges the gap between design and implementation.
Embrace vibe coding for rapid UI exploration. Covers when to iterate vs refine, ephemeral app patterns, and the art of fast, disposable prototyping with AI-assisted development.
| name | design-movements |
| description | Historical design movements and their enduring influence. Understand Bauhaus, Swiss International Style, Art Deco, Memphis, and more. Use when choosing an aesthetic direction, understanding cultural context, or predicting trend cycles. |
Every movement is a reaction. Understanding the chain of reactions helps you predict what comes next and choose directions intentionally.
Arts & Crafts (1850s) ─→ Art Nouveau (1890s) ─→ Art Deco (1920s)
│
↓
Bauhaus (1919-33) ←────── Modernism
│
↓
Swiss International Style (1950s)
│
┌───────────────┼───────────────┐
↓ ↓ ↓
Corporate Psychedelic Postmodernism
Modernism (1960s) (1970s)
(1960s) │ │
│ ↓ ↓
│ Punk/New Wave Memphis Group
│ (1970s) (1980s)
│ │ │
└───────────────┴───────────────┘
│
↓
Grunge/Deconstructivism (1990s)
│
┌───────────────┼───────────────┐
↓ ↓ ↓
Web 2.0 Flat Design Contemporary
Skeuomorphism (2010s) Eclecticism
(2000s) │ (2020s)
│ │ ↑
└───────────────┴───────────────┘
Origin: England → Global Reaction To: Industrial Revolution's dehumanizing mass production Core Belief: Handcraft has moral value
When a brand needs to feel:
Tailwind Approach:
/* Arts & Crafts-inspired */
colors: earth tones (amber, stone, emerald)
borders: decorative, visible
textures: paper, fabric, natural
typography: serif, slightly ornate
spacing: generous, organic rhythms
Origin: France, Belgium → International Reaction To: Academic historicism and industrialization Core Belief: Art should be everywhere; no separation between art and craft
When a brand needs to feel:
Reference: Paris Metro entrances, Alphonse Mucha posters, Tiffany lamps
Origin: Paris → Global Reaction To: Art Nouveau's organic chaos; post-WWI optimism Core Belief: Machine-age glamour meets geometric precision
When a brand needs to feel:
Tailwind Approach:
/* Art Deco-inspired */
colors: gold-500, black, cream
borders: decorative lines, stepped forms
patterns: geometric, repetitive
typography: geometric sans, high contrast display
shadows: sharp, dramatic
Reference: Chrysler Building, Great Gatsby aesthetic, classic Hollywood
Origin: Germany (Weimar, Dessau) Reaction To: Decorative excess; need for functional post-war reconstruction Core Belief: Form follows function; art and technology unified
When a brand needs to feel:
Tailwind Approach:
/* Bauhaus-inspired */
colors: red-600, blue-600, yellow-500, black, white
shapes: geometric, primitive
layout: asymmetric grid
typography: geometric sans (Futura, Avant Garde)
borders: minimal, functional
Legacy: Google Material Design, IKEA, modern corporate identity
Origin: Switzerland → Global Reaction To: Post-war need for universal, clear communication Core Belief: Objective communication through mathematical order
+---+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 | 6 |
+---+---+---+---+---+---+
↓ ↓ ↓
Column Gutter Module
- Consistent column widths
- Mathematical proportions
- Elements snap to grid
- Typography aligned to baseline grid
When a brand needs to feel:
Tailwind Approach:
/* Swiss-inspired */
typography: 'Inter', 'Helvetica Neue', sans-serif
colors: black, white, one accent
layout: 12-column grid, generous gutters
spacing: consistent, mathematical
whitespace: abundant
Legacy: NYC Subway signage, corporate identity systems, most of the web
Origin: San Francisco → Global counterculture Reaction To: Swiss Style's sterility; counterculture movement Core Belief: Design as experience; break every rule
When a brand needs to feel:
Caution: Accessibility nightmare. Use for specific contexts only.
Reference: Grateful Dead posters, Victor Moscoso, Wes Wilson
Origin: Academic architecture → Design Reaction To: Modernist purity ("less is a bore") Core Belief: Embrace complexity, contradiction, and historical reference
When a brand needs to feel:
Origin: Milan, Italy Reaction To: Good taste and minimalist seriousness Core Belief: Anti-design; pleasure over function
When a brand needs to feel:
Tailwind Approach:
/* Memphis-inspired */
colors: bright clashing (pink + teal + yellow + black)
shapes: irregular geometry
patterns: terrazzo, squiggles
borders: thick, contrasting
shadows: offset, colored
Reference: 80s music videos, Saved by the Bell, current Gen Z aesthetics
Origin: Pacific Northwest → Global Reaction To: Clean corporate design; digital tools enabling mess Core Belief: Destroy legibility; design as art
When a brand needs to feel:
Reference: Ray Gun magazine, early MTV, 90s album covers
Origin: Microsoft Metro → Apple iOS 7 → Web Reaction To: Skeuomorphic excess; need for responsive design Core Belief: Digital should look digital
Now the baseline. Most UI design defaults to flat principles with:
Where We Are Now: All styles available simultaneously
We're in a post-ideological moment. No single style dominates. Success comes from:
Styles tend to return on ~30-year cycles:
| Original Era | Revival Era |
|---|---|
| 1960s psychedelic | 1990s rave |
| 1970s disco | 2000s web gradients |
| 1980s Memphis | 2010s hipster design |
| 1990s grunge | 2020s brutalism |
| Y2K aesthetic | 2025-2030s (predicted) |
Prediction: Expect a 1990s deconstructivist/grunge revival in the late 2020s.