From f8a42d852f4c67f4a1d050700cc1def83174010f Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 11 Jun 2026 17:38:34 +0900 Subject: [PATCH] Improve style sample distinction system --- docs/style-category-distinction-table.md | 141 + docs/style-moodboard-imagegen-guidelines.md | 152 + docs/style-one-by-one-continuation-guide.md | 208 + docs/style-sample-web-review-log.md | 1402 ++++++ .../moodboards/ai-aesthetic-realistic-v2.webp | Bin 0 -> 118134 bytes .../moodboards/anti-design-realistic-v2.webp | Bin 0 -> 149198 bytes public/generated/moodboards/anti-design.webp | Bin 0 -> 126854 bytes .../moodboards/art-deco-realistic-v2.webp | Bin 0 -> 253306 bytes .../moodboards/art-nouveau-realistic-v2.webp | Bin 0 -> 269866 bytes .../moodboards/avant-garde-realistic-v2.webp | Bin 0 -> 183478 bytes public/generated/moodboards/avant-garde.webp | Bin 0 -> 142768 bytes .../moodboards/baroque-realistic-v2.webp | Bin 0 -> 273984 bytes .../moodboards/bauhaus-realistic-v2.webp | Bin 0 -> 99156 bytes .../moodboards/botanical-realistic-v2.webp | Bin 0 -> 168842 bytes .../moodboards/brutalism-realistic-v2.webp | Bin 0 -> 202316 bytes public/generated/moodboards/brutalism.webp | Bin 0 -> 104044 bytes .../bubble-design-realistic-v2.webp | Bin 0 -> 109246 bytes .../moodboards/chromecore-realistic-v2.webp | Bin 0 -> 139362 bytes .../moodboards/classic-realistic-v2.webp | Bin 0 -> 118438 bytes .../moodboards/claymorphism-realistic-v2.webp | Bin 0 -> 121728 bytes .../moodboards/collage-realistic-v2.webp | Bin 0 -> 200314 bytes .../comic-book-style-realistic-v2.webp | Bin 0 -> 260526 bytes .../moodboards/craft-realistic-v2.webp | Bin 0 -> 311362 bytes .../moodboards/cyberpunk-realistic-v2.webp | Bin 0 -> 235364 bytes .../dark-mode-design-realistic-v2.webp | Bin 0 -> 102312 bytes .../deconstructivism-realistic-v2.webp | Bin 0 -> 210788 bytes .../moodboards/deconstructivism.webp | Bin 0 -> 198552 bytes .../dopamine-design-realistic-v2.webp | Bin 0 -> 164636 bytes .../moodboards/eco-design-realistic-v2.webp | Bin 0 -> 269442 bytes .../editorial-design-realistic-v2.webp | Bin 0 -> 139328 bytes .../eighties-retro-realistic-v2.webp | Bin 0 -> 158146 bytes .../experimental-type-realistic-v2.webp | Bin 0 -> 205684 bytes .../moodboards/flat-design-realistic-v2.webp | Bin 0 -> 84296 bytes .../moodboards/futurism-realistic-v2.webp | Bin 0 -> 192560 bytes .../glassmorphism-realistic-v2.webp | Bin 0 -> 120460 bytes .../moodboards/glitch-art-realistic-v2.webp | Bin 0 -> 224124 bytes public/generated/moodboards/glitch-art.webp | Bin 0 -> 178032 bytes .../moodboards/gothic-realistic-v2.webp | Bin 0 -> 266552 bytes .../moodboards/graffiti-realistic-v2.webp | Bin 0 -> 380026 bytes .../moodboards/grid-system-realistic-v2.webp | Bin 0 -> 202832 bytes .../moodboards/grunge-realistic-v2.webp | Bin 0 -> 300564 bytes .../moodboards/handmade-realistic-v2.webp | Bin 0 -> 214482 bytes .../high-end-minimal-realistic-v2.webp | Bin 0 -> 77980 bytes .../moodboards/high-end-minimal.webp | Bin 0 -> 62418 bytes .../moodboards/high-tech-realistic-v2.webp | Bin 0 -> 179812 bytes .../moodboards/hiphop-style-realistic-v2.webp | Bin 0 -> 240508 bytes .../hologram-style-realistic-v2.webp | Bin 0 -> 113708 bytes .../moodboards/indie-sleaze-realistic-v2.webp | Bin 0 -> 259202 bytes .../international-style-realistic-v2.webp | Bin 0 -> 114678 bytes .../moodboards/international-style.webp | Bin 0 -> 58026 bytes .../moodboards/japandi-realistic-v2.webp | Bin 0 -> 221120 bytes public/generated/moodboards/japandi.webp | Bin 0 -> 177332 bytes .../moodboards/kawaii-realistic-v2.webp | Bin 0 -> 108930 bytes .../moodboards/kinfolk-realistic-v2.webp | Bin 0 -> 236368 bytes .../moodboards/kitsch-realistic-v2.webp | Bin 0 -> 202218 bytes .../moodboards/lo-fi-realistic-v2.webp | Bin 0 -> 220788 bytes .../moodboards/luxury-realistic-v2.webp | Bin 0 -> 148890 bytes .../magazine-style-realistic-v2.webp | Bin 0 -> 186024 bytes .../material-design-realistic-v2.webp | Bin 0 -> 92468 bytes .../moodboards/maximalism-realistic-v2.webp | Bin 0 -> 272580 bytes public/generated/moodboards/maximalism.webp | Bin 0 -> 392834 bytes .../metaverse-style-realistic-v2.webp | Bin 0 -> 144662 bytes .../mid-century-modern-realistic-v2.webp | Bin 0 -> 241420 bytes .../moodboards/minimalism-realistic-v2.webp | Bin 0 -> 142012 bytes public/generated/moodboards/minimalism.webp | Bin 0 -> 54526 bytes .../moodboards/modernism-realistic-v2.webp | Bin 0 -> 108370 bytes public/generated/moodboards/modernism.webp | Bin 0 -> 51970 bytes .../moodboards/natural-realistic-v2.webp | Bin 0 -> 244624 bytes .../moodboards/neoclassic-realistic-v2.webp | Bin 0 -> 143770 bytes .../moodboards/neon-noir-realistic-v2.webp | Bin 0 -> 162560 bytes .../moodboards/neumorphism-realistic-v2.webp | Bin 0 -> 91692 bytes .../new-brutalism-realistic-v2.webp | Bin 0 -> 71598 bytes .../generated/moodboards/new-brutalism.webp | Bin 0 -> 70888 bytes .../newspaper-style-realistic-v2.webp | Bin 0 -> 226566 bytes .../nineties-graphic-realistic-v2.webp | Bin 0 -> 254562 bytes .../moodboards/old-money-realistic-v2.webp | Bin 0 -> 212236 bytes .../organic-design-realistic-v2.webp | Bin 0 -> 212048 bytes .../moodboards/pastel-style-realistic-v2.webp | Bin 0 -> 111890 bytes .../moodboards/photomontage-realistic-v2.webp | Bin 0 -> 201066 bytes .../playful-design-realistic-v2.webp | Bin 0 -> 105326 bytes .../moodboards/pop-art-realistic-v2.webp | Bin 0 -> 235986 bytes .../moodboards/posterism-realistic-v2.webp | Bin 0 -> 96042 bytes .../postmodernism-realistic-v2.webp | Bin 0 -> 193178 bytes .../generated/moodboards/postmodernism.webp | Bin 0 -> 180320 bytes .../moodboards/punk-realistic-v2.webp | Bin 0 -> 374522 bytes .../moodboards/rave-style-realistic-v2.webp | Bin 0 -> 187854 bytes .../retro-futurism-realistic-v2.webp | Bin 0 -> 263684 bytes .../moodboards/retro-realistic-v2.webp | Bin 0 -> 246880 bytes .../moodboards/rococo-realistic-v2.webp | Bin 0 -> 203854 bytes .../moodboards/rustic-realistic-v2.webp | Bin 0 -> 344628 bytes .../moodboards/saas-style-realistic-v2.webp | Bin 0 -> 91258 bytes .../moodboards/scandinavian-realistic-v2.webp | Bin 0 -> 259062 bytes public/generated/moodboards/scandinavian.webp | Bin 0 -> 214562 bytes .../seventies-retro-realistic-v2.webp | Bin 0 -> 355268 bytes .../skate-culture-realistic-v2.webp | Bin 0 -> 305636 bytes .../moodboards/soft-minimal-realistic-v2.webp | Bin 0 -> 98998 bytes public/generated/moodboards/soft-minimal.webp | Bin 0 -> 43680 bytes .../startup-landing-page-realistic-v2.webp | Bin 0 -> 86374 bytes .../moodboards/streetwear-realistic-v2.webp | Bin 0 -> 180232 bytes .../moodboards/swiss-design-realistic-v2.webp | Bin 0 -> 111846 bytes public/generated/moodboards/swiss-design.webp | Bin 0 -> 86522 bytes .../moodboards/techwear-realistic-v2.webp | Bin 0 -> 246148 bytes .../moodboards/toy-design-realistic-v2.webp | Bin 0 -> 149980 bytes .../typography-focused-realistic-v2.webp | Bin 0 -> 147254 bytes .../moodboards/vintage-realistic-v2.webp | Bin 0 -> 296190 bytes .../moodboards/wabi-sabi-realistic-v2.webp | Bin 0 -> 244154 bytes .../moodboards/warm-minimal-realistic-v2.webp | Bin 0 -> 200864 bytes public/generated/moodboards/warm-minimal.webp | Bin 0 -> 100118 bytes .../moodboards/y2k-realistic-v2.webp | Bin 0 -> 151552 bytes scripts/check-style-distinction.mjs | 287 +- scripts/style-references.json | 474 +- src/app/styles/[slug]/page.tsx | 104 +- .../design-style/BackToStylesLink.tsx | 37 + .../design-style/DesignStyleCoreScreen.tsx | 56 +- .../DesignStyleSampleRenderer.tsx | 4114 +++++++++++------ src/components/specimen/SpecimenCoreFrame.tsx | 10 + src/data/designStyles.ts | 886 +++- src/data/styleReferences.ts | 40 + 118 files changed, 6289 insertions(+), 1622 deletions(-) create mode 100644 docs/style-category-distinction-table.md create mode 100644 docs/style-moodboard-imagegen-guidelines.md create mode 100644 docs/style-one-by-one-continuation-guide.md create mode 100644 docs/style-sample-web-review-log.md create mode 100644 public/generated/moodboards/ai-aesthetic-realistic-v2.webp create mode 100644 public/generated/moodboards/anti-design-realistic-v2.webp create mode 100644 public/generated/moodboards/anti-design.webp create mode 100644 public/generated/moodboards/art-deco-realistic-v2.webp create mode 100644 public/generated/moodboards/art-nouveau-realistic-v2.webp create mode 100644 public/generated/moodboards/avant-garde-realistic-v2.webp create mode 100644 public/generated/moodboards/avant-garde.webp create mode 100644 public/generated/moodboards/baroque-realistic-v2.webp create mode 100644 public/generated/moodboards/bauhaus-realistic-v2.webp create mode 100644 public/generated/moodboards/botanical-realistic-v2.webp create mode 100644 public/generated/moodboards/brutalism-realistic-v2.webp create mode 100644 public/generated/moodboards/brutalism.webp create mode 100644 public/generated/moodboards/bubble-design-realistic-v2.webp create mode 100644 public/generated/moodboards/chromecore-realistic-v2.webp create mode 100644 public/generated/moodboards/classic-realistic-v2.webp create mode 100644 public/generated/moodboards/claymorphism-realistic-v2.webp create mode 100644 public/generated/moodboards/collage-realistic-v2.webp create mode 100644 public/generated/moodboards/comic-book-style-realistic-v2.webp create mode 100644 public/generated/moodboards/craft-realistic-v2.webp create mode 100644 public/generated/moodboards/cyberpunk-realistic-v2.webp create mode 100644 public/generated/moodboards/dark-mode-design-realistic-v2.webp create mode 100644 public/generated/moodboards/deconstructivism-realistic-v2.webp create mode 100644 public/generated/moodboards/deconstructivism.webp create mode 100644 public/generated/moodboards/dopamine-design-realistic-v2.webp create mode 100644 public/generated/moodboards/eco-design-realistic-v2.webp create mode 100644 public/generated/moodboards/editorial-design-realistic-v2.webp create mode 100644 public/generated/moodboards/eighties-retro-realistic-v2.webp create mode 100644 public/generated/moodboards/experimental-type-realistic-v2.webp create mode 100644 public/generated/moodboards/flat-design-realistic-v2.webp create mode 100644 public/generated/moodboards/futurism-realistic-v2.webp create mode 100644 public/generated/moodboards/glassmorphism-realistic-v2.webp create mode 100644 public/generated/moodboards/glitch-art-realistic-v2.webp create mode 100644 public/generated/moodboards/glitch-art.webp create mode 100644 public/generated/moodboards/gothic-realistic-v2.webp create mode 100644 public/generated/moodboards/graffiti-realistic-v2.webp create mode 100644 public/generated/moodboards/grid-system-realistic-v2.webp create mode 100644 public/generated/moodboards/grunge-realistic-v2.webp create mode 100644 public/generated/moodboards/handmade-realistic-v2.webp create mode 100644 public/generated/moodboards/high-end-minimal-realistic-v2.webp create mode 100644 public/generated/moodboards/high-end-minimal.webp create mode 100644 public/generated/moodboards/high-tech-realistic-v2.webp create mode 100644 public/generated/moodboards/hiphop-style-realistic-v2.webp create mode 100644 public/generated/moodboards/hologram-style-realistic-v2.webp create mode 100644 public/generated/moodboards/indie-sleaze-realistic-v2.webp create mode 100644 public/generated/moodboards/international-style-realistic-v2.webp create mode 100644 public/generated/moodboards/international-style.webp create mode 100644 public/generated/moodboards/japandi-realistic-v2.webp create mode 100644 public/generated/moodboards/japandi.webp create mode 100644 public/generated/moodboards/kawaii-realistic-v2.webp create mode 100644 public/generated/moodboards/kinfolk-realistic-v2.webp create mode 100644 public/generated/moodboards/kitsch-realistic-v2.webp create mode 100644 public/generated/moodboards/lo-fi-realistic-v2.webp create mode 100644 public/generated/moodboards/luxury-realistic-v2.webp create mode 100644 public/generated/moodboards/magazine-style-realistic-v2.webp create mode 100644 public/generated/moodboards/material-design-realistic-v2.webp create mode 100644 public/generated/moodboards/maximalism-realistic-v2.webp create mode 100644 public/generated/moodboards/maximalism.webp create mode 100644 public/generated/moodboards/metaverse-style-realistic-v2.webp create mode 100644 public/generated/moodboards/mid-century-modern-realistic-v2.webp create mode 100644 public/generated/moodboards/minimalism-realistic-v2.webp create mode 100644 public/generated/moodboards/minimalism.webp create mode 100644 public/generated/moodboards/modernism-realistic-v2.webp create mode 100644 public/generated/moodboards/modernism.webp create mode 100644 public/generated/moodboards/natural-realistic-v2.webp create mode 100644 public/generated/moodboards/neoclassic-realistic-v2.webp create mode 100644 public/generated/moodboards/neon-noir-realistic-v2.webp create mode 100644 public/generated/moodboards/neumorphism-realistic-v2.webp create mode 100644 public/generated/moodboards/new-brutalism-realistic-v2.webp create mode 100644 public/generated/moodboards/new-brutalism.webp create mode 100644 public/generated/moodboards/newspaper-style-realistic-v2.webp create mode 100644 public/generated/moodboards/nineties-graphic-realistic-v2.webp create mode 100644 public/generated/moodboards/old-money-realistic-v2.webp create mode 100644 public/generated/moodboards/organic-design-realistic-v2.webp create mode 100644 public/generated/moodboards/pastel-style-realistic-v2.webp create mode 100644 public/generated/moodboards/photomontage-realistic-v2.webp create mode 100644 public/generated/moodboards/playful-design-realistic-v2.webp create mode 100644 public/generated/moodboards/pop-art-realistic-v2.webp create mode 100644 public/generated/moodboards/posterism-realistic-v2.webp create mode 100644 public/generated/moodboards/postmodernism-realistic-v2.webp create mode 100644 public/generated/moodboards/postmodernism.webp create mode 100644 public/generated/moodboards/punk-realistic-v2.webp create mode 100644 public/generated/moodboards/rave-style-realistic-v2.webp create mode 100644 public/generated/moodboards/retro-futurism-realistic-v2.webp create mode 100644 public/generated/moodboards/retro-realistic-v2.webp create mode 100644 public/generated/moodboards/rococo-realistic-v2.webp create mode 100644 public/generated/moodboards/rustic-realistic-v2.webp create mode 100644 public/generated/moodboards/saas-style-realistic-v2.webp create mode 100644 public/generated/moodboards/scandinavian-realistic-v2.webp create mode 100644 public/generated/moodboards/scandinavian.webp create mode 100644 public/generated/moodboards/seventies-retro-realistic-v2.webp create mode 100644 public/generated/moodboards/skate-culture-realistic-v2.webp create mode 100644 public/generated/moodboards/soft-minimal-realistic-v2.webp create mode 100644 public/generated/moodboards/soft-minimal.webp create mode 100644 public/generated/moodboards/startup-landing-page-realistic-v2.webp create mode 100644 public/generated/moodboards/streetwear-realistic-v2.webp create mode 100644 public/generated/moodboards/swiss-design-realistic-v2.webp create mode 100644 public/generated/moodboards/swiss-design.webp create mode 100644 public/generated/moodboards/techwear-realistic-v2.webp create mode 100644 public/generated/moodboards/toy-design-realistic-v2.webp create mode 100644 public/generated/moodboards/typography-focused-realistic-v2.webp create mode 100644 public/generated/moodboards/vintage-realistic-v2.webp create mode 100644 public/generated/moodboards/wabi-sabi-realistic-v2.webp create mode 100644 public/generated/moodboards/warm-minimal-realistic-v2.webp create mode 100644 public/generated/moodboards/warm-minimal.webp create mode 100644 public/generated/moodboards/y2k-realistic-v2.webp create mode 100644 src/components/design-style/BackToStylesLink.tsx create mode 100644 src/data/styleReferences.ts diff --git a/docs/style-category-distinction-table.md b/docs/style-category-distinction-table.md new file mode 100644 index 0000000..f96adec --- /dev/null +++ b/docs/style-category-distinction-table.md @@ -0,0 +1,141 @@ +# OpenDesignLab Style Category Distinction Table + +This table is the working comparison sheet for keeping styles inside the same category visually separable. Moodboard signals are translated into surface, border, texture, spacing, and media treatments. Reference-site signals are translated into web information structure, navigation rhythm, component grammar, and section order. + +## 모던 / 미니멀 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| minimalism | Quiet product clarity | white space, thin rules, neutral swatches | Linear/Apple style product-first hero, sparse CTA | soft-minimal, high-end-minimal | 거의 평평한 SaaS workspace, 장식 없음 | focused workspace panel | +| modernism | Functional grid geometry | primary blocks, black rules, architecture crops | museum/product grid, modular numbered sections | swiss-design, bauhaus | 원색 기하학과 비대칭 기능 모듈 | MODERN GRID | +| swiss-design | Objective typographic order | baseline overlays, red signal bars | public-service/news grid, numbered modules | international-style, modernism | red marker plus strict asymmetric baseline grid | SWISS GRID | +| international-style | Global system neutrality | standard panels, blue wayfinding, steel/acrylic | IBM-like repeatable portal panels and tables | swiss-design, saas-style | poster tension 제거, corporate system rows | GLOBAL SYSTEM | +| scandinavian | Bright Nordic practical commerce | birch, wool, ceramics, pale blue/sage | home product commerce, category and room modules | japandi, warm-minimal | cozy product density and practical shopping cards | NORDIC HOME | +| japandi | Low quiet tactile space | shoji paper, ash wood, ceramic, stone | interior editorial flow, slow inquiry CTA | scandinavian, wabi-sabi | 낮은 수평 리듬, paper/wood material panels | LOW ROOM | +| warm-minimal | Approachable warm premium | cream, terracotta, brass, clay | studio portfolio, project cards, consultation CTA | soft-minimal, japandi | terracotta CTA and warm project studio flow | WARM STUDIO | +| soft-minimal | Reassuring low-contrast service | vellum, rounded cards, pale grey-blue | service cards, package choices, booking CTA | warm-minimal, neumorphism | rounded low-tension service panels, no terracotta | SOFT SERVICE | +| high-end-minimal | Luxury by exact subtraction | ivory/black, marble, satin, crop marks | luxury product detail, quiet commerce | minimalism, luxury | severe product crop, tiny CTA, gallery spacing | QUIET COMMERCE | + +## 강렬 / 실험 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| brutalism | Raw web document | concrete, default controls, photocopy | underlined links, tables, default-looking forms | new-brutalism, anti-design | playful shadows 없음, HTML index 느낌 | RAW WEB INDEX | +| new-brutalism | Chunky product directness | thick outlines, flat panels, hard shadows | component kit, pricing, forms, toggles | brutalism, postmodernism | actual app kit with native controls | RAW COMPONENT KIT | +| anti-design | Intentional awkward portfolio | torn scraps, neon gestures, off-grid crops | experimental portfolio and weird project shell | deconstructivism, maximalism | curated wrongness with scribble gesture | OFF-GRID PORTFOLIO | +| maximalism | Dense expressive product world | saturated pattern, textile, badges | campaign hero plus product world modules | kitsch, postmodernism | pattern density fills the page without error noise | PATTERN MARKET | +| glitch-art | System damage | macroblocks, RGB film, scanlines | diagnostic panels, code/error artifacts | cyberpunk, high-tech | corruption logic, not neon city scenery | SIGNAL DAMAGE | +| deconstructivism | Engineered instability | angular fragments, tracing overlays | architecture/project index with displaced modules | anti-design, avant-garde | broken grid still reads as designed structure | STRUCTURAL FAULT | +| avant-garde | Cultural provocation | constructivist planes, manifesto blocks | exhibition/program modules, essays, cultural agenda | posterism, postmodernism | social/cultural program grid, not playful remix | MANIFESTO PROGRAM | +| postmodernism | Historical remix with irony | classical fragments, terrazzo, Memphis accents | archive, shop, object index, quote modules | new-brutalism, maximalism | mixed-era cultural portal and quotation block | CLASSICAL QUOTE | + +## 레트로 / 빈티지 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| retro | Broad warm broadcast nostalgia | faded cards, halftone, analog media | broadcast landing, decade dial, merch queue | vintage, seventies-retro | cheerful media-commerce without aged patina or 70s groovy curves | RETRO BROADCAST SHOP | +| vintage | Archive patina and repaired heritage | foxed paper, sepia, brass, wood, cloth | heritage catalog, repair ticket ledger, patina material register | retro, rustic | aged paper catalog, muted ink, visible mending records | PAPER CATALOG | +| seventies-retro | Groovy warm lifestyle commerce | corduroy, walnut, wavy stripe, amber | wavy campaign shelf, arched product cards, material-chip rhythm | retro, mid-century-modern | 70s curves, warm orange rhythm, corduroy/walnut/amber signals | GROOVY LANDING | +| eighties-retro | Synth-era media console | neon grid, VHS, black plastic | dark media console, VHS mix queue, arcade controls | y2k, cyber-dashboard | magenta/cyan grid, black plastic bay, arcade control strip | SYNTH CONSOLE | +| nineties-graphic | Loud early digital collage | checkerboard, halftone, torn stickers, desktop scraps | DESKTOP ZINE window, sticker link grid, halftone scrap wall | y2k, street-campaign | rough 90s graphic window and zine links, no chrome gloss | DESKTOP ZINE | +| y2k | Glossy early-2000s portal | chrome, jelly plastic, capsules, glitter stamps | GLOSS PORTAL, bubble widget stack, sparkle guestbook rail | chromecore, nineties-graphic | pastel cyber gloss, portal widgets, jelly capsule dock | GLOSS PORTAL | +| retro-futurism | Space age travel optimism | capsule interfaces, chrome/aluminum, orbit lines, travel poster | FLIGHT DECK poster landing, destination poster rail, chrome capsule timetable | y2k, eighties-retro, futurism, mid-century-modern | optimistic space travel bureau, not bubble gloss, synth console, or live telemetry | FLIGHT DECK | +| mid-century-modern | Furniture catalog modernity | molded plywood, walnut slats, glass table, Girard textile | MIDCENTURY STUDIO showroom, walnut slat product rail, Girard textile swatch wall | seventies-retro, retro-futurism, bauhaus, japandi | furniture material catalog, not groovy campaign, space poster, primary geometry, or quiet interior minimalism | MIDCENTURY STUDIO | +| bauhaus | Design-school functional geometry | circles, squares, triangles, primary chips, black rules | BAUHAUS SCHOOL institution modules, workshop method grid, circle square triangle lab | mid-century-modern, swiss-design, modernism, posterism | school/workshop method and shape exercises, not furniture catalog, neutral information grid, broad rationalism, or poster wall | BAUHAUS SCHOOL | + +## 미래 / 디지털 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| futurism | Aerospace velocity | aluminum, carbon, launch diagrams | mission hero, launch window, telemetry strip | retro-futurism, high-tech | orbital civic-science framing | ORBITAL | +| cyberpunk | Night-market cyber commerce | wet asphalt, neon acetate, hardware | dense city protocol panels, black-market shop | glitch-art, neon-noir | urban culture and ripper-lane commerce | BRAINDANCE | +| neon-noir | Cinematic case mood | red room, rain, dark photo crops | film still, case file, single glow source | cyberpunk, dark-mode-design | noir restraint and case investigation | RED ROOM | +| techwear | Technical garment system | black fabric, straps, orange labels | product matrix, shell specs, utility catalog | streetwear, high-tech | apparel codes and garment matrix | SHELL SYSTEM | +| high-tech | Infrastructure control plane | graphs, dark product panels | deploy graph, edge regions, telemetry cards | saas-style, cyber-dashboard | precise software ops, not fantasy | CONTROL PLANE | +| ai-aesthetic | Model canvas workflow | synthetic gradients, prompt surfaces | prompt bar, latent queue, generated preview | startup-landing-page, high-tech | AI workflow and model canvas | MODEL CANVAS | +| hologram-style | Light-field interface depth | prism acrylic, translucent layers | spatial labels, depth panels, refraction | glassmorphism, chromecore | spectral depth, not flat glass blur | LIGHT FIELD | +| chromecore | Y2K molded chrome hardware | silver shells, star flashes, blue lenses | shiny gadget/product studio modules | y2k, luxury | molded hardware and specular chrome | Y2K CHROME | +| metaverse-style | Social spatial lobby | avatar mesh, room grid, world shards | virtual room navigation and presence labels | gaming, hologram-style | avatar/world navigation, not dashboard | SPATIAL LOBBY | + +## 럭셔리 / 클래식 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| classic | Balanced heritage commerce | navy, ivory, leather, archive cards | heritage product grid and restrained nav | old-money, luxury | timeless catalog balance | HERITAGE COMMERCE | +| neoclassic | Modern palace hospitality | marble, columns, champagne gold | hotel booking strip and suite cards | baroque, classic | symmetrical column rhythm and reservation strip | PALACE BOOKING | +| luxury | Material-led premium retail | silk, leather, glass, cream/black | low-copy product detail and close-up image | high-end-minimal, classic | material close-up and silent CTA | MATERIAL CLOSEUP | +| old-money | Understated club wardrobe | cashmere, leather, forest/navy | club shop, wardrobe cards, lifestyle rail | classic, streetwear | crest restraint and member shop | CLUB WARDROBE | +| art-deco | Geometric evening glamour | fan arcs, black lacquer, brass | hotel/lounge portal, marquee modules | baroque, retro-futurism | fan geometry and stepped vertical rhythm | DECO PORTAL | +| art-nouveau | Botanical ornamental flow | vine lines, perfume card, green gold | framed product/story page with organic lines | botanical, rococo | whiplash line and botanical frame | BOTANICAL ORNAMENT | +| baroque | Theatrical museum luxury | chiaroscuro, gilded frame, wine/black | gallery commerce, dramatic image staging | rococo, gothic | deep dark drama and ornate frame | GILDED GALLERY | +| rococo | Light salon ornament | shell curves, porcelain, pastel | delicate product/salon market cards | baroque, pastel-style | pastel shell asymmetry, no darkness | PORCELAIN SALON | +| gothic | Cathedral verticality | pointed arches, stained glass, stone | visitor/archive modules with vertical sacred mood | baroque, dark-mode-design | vaulted modules and stained-glass grid | CATHEDRAL ARCHIVE | + +## 자연 / 수공예 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| organic-design | Living-form wellness commerce | cork, clay, linen, flowing cutouts | curved apothecary/product modules | natural, botanical | flowing asymmetry and apothecary shelf | ORGANIC APOTHECARY | +| natural | Open-air simple lifestyle | landscape crops, linen, pale wood | breathable market shelf and simple product rows | organic-design, eco-design | plain open-air shelf, no campaign signage | NATURAL MARKET | +| botanical | Plant-specific commerce | pressed leaves, glassine, herbarium | plant shop, glasshouse filters, species cards | natural, art-nouveau | leaf structure and glasshouse taxonomy | BOTANICAL GLASSHOUSE | +| eco-design | Sustainability impact system | recycled paper, impact chips, green seals | impact metrics, refill loops, certification rows | natural, organic-design | quantified eco actions and impact cards | ECO IMPACT | +| rustic | Farmhouse/lodge texture | rough wood, burlap, iron, clay | lodge shop, rough material cards | vintage, craft | coarse wood and lodge commerce | RUSTIC LODGE | +| kinfolk | Slow lifestyle journal | natural light, quiet paper, table stills | slow article journal and lifestyle essay | wabi-sabi, japandi | editorial calm with lifestyle pacing | SLOW JOURNAL | +| handmade | Human-made marketplace | stitch, patch, uneven paper | maker cards, patch market, human labels | craft, kitsch | visible hand marks and irregular patches | PATCH MARKET | +| craft | Process-led workshop | tools, material samples, ledger cards | workshop ledger, process cards, inventory rows | handmade, rustic | making process and tool ledger | WORKSHOP LEDGER | +| wabi-sabi | Imperfect quiet aging | cracked ceramic, rough paper, shadow | tea gallery, sparse object cards | japandi, kinfolk | asymmetry, imperfection, quiet object spacing | TEA GALLERY | + +## 귀여움 / 캐주얼 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| kitsch | Novelty retail excess | odd objects, clashing pattern, sticker bursts | boutique drop, sale rail, product finder | dopamine-design, kawaii | humorous object shop, not clean rewards | ODD SHOP DROP | +| kawaii | Mascot-led soft community | heart badges, character tiles, stickers | mascot dashboard, stamps, tiny shop | kitsch, pastel-style | character club and collectible warmth | CHARACTER CLUB | +| dopamine-design | Reward-driven color energy | saturated chips, progress objects | streaks, reward ladder, conversion path | kitsch, playful-design | clean reward loop, not novelty clutter | COLOR REWARD LOOP | +| pop-art | Serial consumer icon archive | halftone, repeated object, primary chips | museum shop wall, object edition grid | comic-book-style, posterism | repeated object archive, no panels | POP OBJECT ARCHIVE | +| comic-book-style | Sequential issue browsing | speech balloons, ink borders, panels | issue grid, episode metadata, panel preview | pop-art, kawaii | narrative panel system and cover shelf | ISSUE DROP | +| toy-design | Modular playset builder | blocks, trays, chunky parts | age tabs, builder controls, instruction rail | claymorphism, bubble-design | assembly tray and toy parts | PLAYSET BUILDER | +| playful-design | Friendly product onboarding | mascot helper, soft progress, task cards | guided flow, completion states | kawaii, dopamine-design | onboarding path, not character shop | PLAYFUL ONBOARD | +| pastel-style | Airy beauty editorial | pale product rows, soft tint chips | shade story, low-contrast beauty shelf | kawaii, bubble-design | quiet beauty product edit | SOFT EDIT | +| bubble-design | Effervescent liquid product UI | inflated capsules, gel, circles | flavor carousel, nutrition bubbles | claymorphism, toy-design | liquid capsules and sparkling surface | BUBBLE FLOW | + +## 스트리트 / 서브컬처 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| streetwear | Drop-commerce ledger | product wall, size tags, lookbook strip | release clock, SKU wall, size matrix | skate-culture, graffiti | fashion drop system, not poster wall | DROP LEDGER | +| graffiti | Wall/tag archive | spray rack, mural photos, rough wall | wall scanner, crew tags, route map | streetwear, punk | mural map and spray inventory | WALL TAG INDEX | +| hiphop-style | Music release console | waveform, lyric cards, artist stack | tracklist index, annotation rail, beat grid | graffiti, rave-style | music metadata and waveform console | TRACKLIST INDEX | +| skate-culture | Spot/deck hardgoods board | deck wall, stickers, trick map | spot checklist, clip sequence, parts shop | streetwear, graffiti | skate spot and deck grid | SPOT CHECKLIST | +| punk | Zine protest dispatch | photocopy, ransom stack, patches | gig flyer rail, zine dispatch | grunge, graffiti | torn protest zine and patch grid | ZINE DISPATCH | +| grunge | Distorted tape archive | torn photos, flannel, cassette | basement gig log, setlist rail | punk, lo-fi | muddy archive and cassette setlist | DISTORTED ARCHIVE | +| indie-sleaze | Flash nightlife blog index | disposable photos, club stamps | bloghaus feed, outfit tags, club rail | grunge, rave-style | flash photo index and messy blog feed | FLASH PHOTO INDEX | +| rave-style | Warehouse stage system | lasers, wristbands, LED meters | lineup grid, ticket rail, sound meters | cyberpunk, indie-sleaze | event/stage infrastructure and BPM grid | LASER STAGE MAP | +| lo-fi | Bedroom analog listening desk | cassette, paper notes, soft photo | sampler pads, radio queue, loop desk | grunge, retro | calm analog listening room, no rave energy | LO-FI LOOP DESK | + +## 편집 / 타이포그래피 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| typography-focused | Type hierarchy as content | type scale blocks, baseline strips | specimen catalog, font pairing, narrow columns | swiss-design, editorial-design | type scale and specimen controls, little imagery | TYPE SCALE SPECIMEN | +| editorial-design | Longform article pacing | pull quote blocks, article spreads | article hero, photo essay, caption rail | magazine-style, newspaper-style | slower longform desk with image/text rhythm | LONGFORM EDIT DESK | +| magazine-style | Issue browsing system | cover blocks, contents grid, glossy paper | cover wall, section browsing, feature cards | editorial-design, posterism | issue cover and contents flow | ISSUE BROWSER | +| posterism | Single-message campaign wall | paste-up sheets, bold block, ink | poster hero, short campaign CTA | avant-garde, experimental-type | one dominant message and paste-up rail | POSTER WALL | +| grid-system | Structure-first layout method | rulers, module strips, grid overlays | column rulers, breakpoint modules, layout manual | swiss-design, flat-design | grid method dashboard, not content magazine | GRID METHOD | +| collage | Paper-layer composition | tape, torn paper, scraps | layered card pile, cutout tray | photomontage, punk | physical paper overlap and tape stack | PAPER COLLAGE DESK | +| photomontage | Photographic collision | sharp masks, photo fragments, acetate | campaign image grid and mask stack | collage, editorial-design | image collision, not paper craft | PHOTO MONTAGE ROOM | +| experimental-type | Letterform as image | warped shapes, distortion sheets | variable specimen, motion/distortion rail | posterism, anti-design | type mutation lab with glyph field | TYPE MUTATION LAB | +| newspaper-style | Dense news edition | masthead, headline columns, newsprint | headline stack, section bands, article teasers | editorial-design, magazine-style | urgent edition grid and masthead hierarchy | DAILY EDITION | + +## UI / 웹 + +| style slug | 핵심 정체성 | moodboard 시각 신호 | referenceSites 웹 UI 문법 | 겹치기 쉬운 스타일 | 반드시 다르게 보여야 하는 요소 | 샘플 고유 마커 | +|---|---|---|---|---|---|---| +| flat-design | Two-dimensional direct UI | solid color modules, matte chips | flat controls, no-depth buttons, color sections | material-design, saas-style | no shadow, solid fill UI board | FLAT CONTROL BOARD | +| material-design | Surface and state discipline | elevation paper, ripple circles | layered cards, state rail, component spec | flat-design, neumorphism | real elevation stack and state layers | MATERIAL STATE SHEET | +| neumorphism | Soft embossed controls | tone-on-tone wells, inset buttons | same-color cards, inner/outer shadows | claymorphism, soft-minimal | low-contrast pressed surface | SOFT EMBOSS PANEL | +| glassmorphism | Frosted layered depth | acrylic, glass, blurred fields | translucent cards over data/weather backdrop | hologram-style, dark-mode-design | blur/refraction and glass panels | FROSTED DEPTH DESK | +| claymorphism | Friendly soft 3D app | clay blobs, puffy modules | rounded 3D cards, playful task surface | bubble-design, neumorphism | puffy colorful depth, not embossed pale UI | CLAY APP WORKSHOP | +| dark-mode-design | Accessible dark product UI | contrast chips, OLED cards, focus rings | dark app console, status clarity, contrast audit | cyber-dashboard, high-tech | readability and focus audit, no neon fantasy | DARK MODE OPS | +| saas-style | B2B operations clarity | dashboard cards, pricing shapes, status chips | feature proof, sidebar, pricing, comparison | startup-landing-page, high-tech | operational home and pricing matrix | SAAS OPERATIONS HOME | +| startup-landing-page | Conversion story sequence | hero blocks, CTA bars, funnel arrows | hero, proof, feature ladder, CTA repeats | saas-style, ai-aesthetic | marketing funnel and optimistic sequence | STARTUP CONVERSION STORY | diff --git a/docs/style-moodboard-imagegen-guidelines.md b/docs/style-moodboard-imagegen-guidelines.md new file mode 100644 index 0000000..0b3599e --- /dev/null +++ b/docs/style-moodboard-imagegen-guidelines.md @@ -0,0 +1,152 @@ +# Style Moodboard Imagegen Guidelines + +This document defines how OpenDesignLab should prompt and review generated style moodboards. Use it before creating or replacing any asset in `public/generated/moodboards/`. + +## Goal + +Moodboards should look like realistic design research boards that a working designer could plausibly make for a web project. + +They should not look like generic AI UI cards, decorative collages, fake dashboards, or abstract posters. The image should help a viewer understand the style before reading the style label. + +## Core Direction + +Use this framing for every style: + +```text +Create a realistic editorial moodboard for a professional web design style reference library. + +The board should look like a real designer's research board photographed from above on a studio table. Include a believable mix of printed website screenshots, cropped layout references, material swatches, color chips, paper samples, photography fragments, and small physical objects that match the style. The composition should feel curated, not generated. + +Use natural imperfections: slight paper thickness, soft shadows, subtle dust, uneven crop edges, pin marks, tape corners, and real surface texture. Keep everything plausible and useful for a design team. + +No readable text, no brand names, no logos, no watermarks, no fake UI gibberish, no impossible floating cards, no overly perfect synthetic mockups, no decorative filler. +Landscape 16:10 composition, high-resolution editorial photography, realistic top-down flat lay. +``` + +## Moodboard Anatomy + +Each prompt should ask for a believable mix of real design research materials: + +- Printed website or landing page references, but without readable text. +- Cropped layout studies that show hierarchy, spacing, cards, navigation, or content rhythm. +- Material swatches that fit the style, such as paper, textile, stone, metal, wood, acetate, glass, or plastic. +- Color chips that match the style palette. +- Photography fragments that support the domain mood, such as architecture, interiors, product details, editorial crops, or cultural references. +- Small physical objects only when they explain the style, not as decoration. +- Real flat-lay evidence: tape, pins, paper curl, shadow, grain, crop edges, and varied paper thickness. + +## Prompt Rules + +Write prompts as production specs, not poetic descriptions. + +- Name the style and the design context. +- State that the board is for web design research. +- Describe why the style is distinct from neighboring styles. +- Include 6 to 10 concrete visual ingredients. +- Include physical materials and real-world imperfections. +- Keep the palette explicit. +- Ban readable text, brand names, logos, watermarks, fake labels, and generic UI filler. +- Avoid using only UI cards. UI cards should be one ingredient, not the whole image. +- Avoid impossible floating elements. Everything should feel photographed on a real surface. + +## Reusable Prompt Template + +```text +Create a realistic editorial moodboard for