diff --git a/README.en.md b/README.en.md deleted file mode 100644 index 006c62b..0000000 --- a/README.en.md +++ /dev/null @@ -1,219 +0,0 @@ -# openlayout - -[한국어](./README.md) | **English** - -A web layout library for choosing, comparing, and previewing website structures and design styles separately — with real webpage-style previews. - -openlayout is a layout/style dictionary that helps you quickly pick page structure and visual language before you start designing. It provides 96 layouts, 88 design styles, 10 style categories, and a webpage-style sample renderer. Each entry comes with recommended use cases, pros and cons, responsive behavior, accessibility checkpoints, a color palette, and Tailwind implementation hints. - -| Item | Value | -| --- | --- | -| Repository | https://github.com/pandaofwild/openlayout | -| Last reviewed | 2026-06-03 | - -## Who it's for - -- Designers who need to quickly compare website structures -- Frontend developers looking for base skeletons for landing pages, dashboards, docs, and commerce screens -- Teams that want to check responsive behavior and accessibility at the same time - -## Key features - -- **Layout explorer**: Filter layouts by search term, category, purpose, and complexity. -- **Full-stage preview**: View layouts large, like a real webpage background, on detail and compare pages. -- **Floating detail panel**: The base screen shows only a small summary box; clicking floats up a panel with structure description and pros/cons. -- **Compare view**: Select up to 3 layouts to compare recommended use, mobile support, density, and difficulty side by side. -- **Design Style Library**: Explore 88 design styles by category, tag, and search term, and check color palettes and webpage-style samples on detail pages. -- **Style application**: A design style chosen in `/styles` is applied to the preview tone of `/layouts` and `/layouts/compare`, and persisted in localStorage. -- **Prompt palette**: Mix prompts to generate a custom color palette and apply it directly to the current layout preview. -- **Image generation admin**: In a local environment with `OPENAI_API_KEY`, generate per-style reference images and save them to `public/generated/design-styles`. -- **SVG controls**: Comparison arrows and the info/close/detail icons are managed as inline SVG. -- **Implementation hints**: Provides Tailwind code examples and implementation tips per previewType. -- **Project skills**: `skills/layout-recommender/SKILL.md` and `skills/design-style-recommender/SKILL.md` guide purpose-based layout/style recommendations. - -## Why it helps vibe coding - -- State your page purpose up front and you can quickly narrow down layout candidates. e.g. "SaaS dashboard landing", "brand campaign", "docs-style knowledge base". -- Each layout carries its recommended use, situations to avoid, responsive behavior, and accessibility checkpoints, so you can pull design constraints straight into your prompt. -- The large previews and floating description panels on the compare page make it easy to iterate with short feedback like "let's go with this structure" or "this one is weak on mobile". -- `previewType` works like shorthand for implementation direction. e.g. `hero`, `card-grid`, `dashboard`, `docs`, `comparison`. -- `DesignStyle` works like shorthand for visual direction. e.g. `brutalism`, `cyberpunk`, `luxury`, `organic-design`, `saas-style`. -- For a new screen, the most reliable flow is: pick a structure from the layout dictionary first, then pick color/typography/mood from a design style, and finally hand components and copy off to a coding agent. - -## Quick start - -Requirements: - -- Node.js 22 or later -- npm - -Install dependencies: - -```bash -npm install -``` - -Run the dev server: - -```bash -npm run dev -``` - -Open in your browser: - -```text -http://localhost:3000/layouts -``` - -The root path (`/`) redirects to `/layouts`. - -## Main routes - -| Route | Contents | -| --- | --- | -| `/layouts` | Layout search, filters, and card list | -| `/layouts/[slug]` | Structure description, pros/cons, responsive behavior, accessibility notes, live preview, code example | -| `/layouts/compare` | Compare up to 3 layouts with large structure previews | -| `/styles` | Design style search, category/tag filters, color palettes, webpage-style samples | -| `/styles/[slug]` | Design style detail, color palette, typography/layout traits, related styles | -| `/styles/generate` | Local reference image generation admin powered by the OpenAI Image API | - -## Image generation environment variables - -`/styles/generate` and `/api/design-style-images` are local admin features. - -```bash -OPENAI_API_KEY=sk-... -OPENAI_IMAGE_MODEL=gpt-image-1.5 -``` - -- `OPENAI_API_KEY` is required. -- `OPENAI_IMAGE_MODEL` is optional and defaults to `gpt-image-1.5`. -- Generated results are saved to `public/generated/design-styles/{slug}.webp`. -- The image generation route is restricted to local development; on read-only deployment platforms like Vercel, switch to external storage such as Blob/S3. - -## Open-source usage - -This project is distributed under the MIT License. See `LICENSE` for full terms. - -- How to contribute: `CONTRIBUTING.md` -- Security reports: `SECURITY.md` -- Local environment variable example: `.env.example` -- CI: `.github/workflows/ci.yml` - -## Quality checks - -Run these before deploying or uploading changes. - -```bash -npm run lint -npm run build -``` - -## Tech stack - -- Next.js App Router -- React -- TypeScript -- Tailwind CSS - -The layout catalog is static-data driven. No separate database or external API is required. - -## Project structure - -```text -src/app/layouts/page.tsx # Explorer page -src/app/layouts/[slug]/page.tsx # Layout detail page -src/app/layouts/compare/page.tsx # Compare page shell -src/app/styles/page.tsx # Design style library page -src/app/styles/[slug]/page.tsx # Design style detail page -src/app/styles/generate/page.tsx # Local image generation admin -src/app/api/design-style-images/route.ts # OpenAI Image API route -src/data/webLayouts.ts # Layout catalog and generated metadata -src/data/designStyles.ts # 88 design styles and generated metadata -src/components/web-layout/ # Explorer, cards, previews, compare UI -src/components/design-style/ # Style cards, filters, samples, generator UI -src/components/style-preset/ # Global selected style provider -src/components/ui/ # Small shared UI primitives -skills/layout-recommender/SKILL.md # Purpose-based layout recommendation skill -skills/design-style-recommender/SKILL.md # Brand-tone-based style recommendation skill -``` - -Key components: - -| File | Role | -| --- | --- | -| `WebLayoutExplorer.tsx` | Search and filter state for the layout list | -| `WebLayoutFilters.tsx` | Filter UI for search term, category, purpose, complexity | -| `WebLayoutCard.tsx` | Layout card and thumbnail | -| `LayoutStagePreview.tsx` | Full-background preview, floating summary, click-to-open description panel | -| `LayoutPreview.tsx` | Browser-style preview utility with viewport switching | -| `LayoutPreviewRenderer.tsx` | Large live preview templates per previewType | -| `WireframeThumbnail.tsx` | Structure thumbnails used on cards and the compare screen | -| `LayoutCodeExample.tsx` | Copyable Tailwind implementation example | -| `WebLayoutCompare.tsx` | Compare page selection, SVG arrow navigation, large preview display | -| `DesignStyleLibrary.tsx` | Search, filter, and applied state for the design style list | -| `DesignStyleCard.tsx` | Design style card, color palette, webpage-style sample, apply button | -| `DesignStyleSampleRenderer.tsx` | 10 webpage-style style samples per sampleType | -| `StylePresetProvider.tsx` | Persists the selected design style and custom palette in localStorage | -| `DesignStyleImageGenerator.tsx` | Style reference image generation admin UI | - -## Project skills - -`skills/layout-recommender/SKILL.md` is an internal skill a coding agent reads to recommend a layout that fits the intended use. - -`skills/design-style-recommender/SKILL.md` is an internal skill read to recommend a design style matching brand tone, industry, emotion, typography, and color direction. - -Example recommendation request: - -```text -This is a B2B SaaS onboarding page. Trust and feature explanation matter, and it has to work on mobile too. Which layout is best? -``` - -The skill is designed to first check the category, `bestFor`, `notGoodFor`, `tags`, and `previewType` in `src/data/webLayouts.ts`, then briefly suggest a top candidate, alternatives, and structures to avoid. - -Example design style recommendation request: - -```text -It's a premium beauty brand landing page, but it shouldn't be too flashy — it needs to look high-end. Which design style is best? -``` - -The design style skill suggests a top style, alternatives, and styles to avoid based on `category`, `tags`, `goodFor`, `useCases`, `palette`, and `sampleType` in `src/data/designStyles.ts`. - -## Adding a layout - -Layout data is managed in `src/data/webLayouts.ts`. - -1. Add a new entry to `layoutSeeds`. -2. Provide `nameKo`, `nameEn`, `category`, `summary`, `previewType`, and `complexity`. -3. Add `bestFor`, `notGoodFor`, and `tags` only when you need to override the defaults. -4. Let the data builder generate `slug`, the long description, pros/cons, responsive notes, accessibility notes, implementation tips, and related layouts. - -When adding a new category, also add a description and defaults to `categoryGuides`. - -## Adding a design style - -Design style data is managed in `src/data/designStyles.ts`. - -1. Add a new entry to `styleSeedTuples`. -2. Provide `slug`, `nameKo`, `nameEn`, `category`, `tone`, `tags`, and `sampleType`. -3. If needed, add a 9-color palette for that slug to `palettes`. -4. If a new category is needed, add visual traits, color notes, typography, and layout tendencies to `categoryProfiles`. -5. Extend `DesignStyleSampleType` and `DesignStyleSampleRenderer.tsx` only when the existing 10 sample renderers can't express it. - -## Adding a preview type - -Add a new previewType when existing templates don't reveal the structure well enough. - -1. Extend the `PreviewType` union in `src/data/webLayouts.ts`. -2. Add a structure description, responsive behavior, and implementation tips to `previewGuides`. -3. Add a live preview renderer to `src/components/web-layout/LayoutPreviewRenderer.tsx`. -4. Add a thumbnail diagram to `src/components/web-layout/WireframeThumbnail.tsx`. -5. If the implementation differs from existing examples, add a Tailwind example to `src/components/web-layout/LayoutCodeExample.tsx`. - -## Writing and design notes - -- Write layout names and summaries practically. A reader should understand when to use a structure without opening the detail page. -- Prefer concrete structure labels like `Header`, `Main`, `Sidebar`, `CTA`, `TOC`, `Product`. -- Detail pages explain limits and trade-offs, not just benefits. -- Long descriptions on the compare page are collapsed by default so the structure diagram can be scanned first. diff --git a/README.ko.md b/README.ko.md new file mode 100644 index 0000000..b0923cd --- /dev/null +++ b/README.ko.md @@ -0,0 +1,227 @@ +# openlayout + +**한국어** | [English](./README.md) + +웹사이트 레이아웃과 디자인 형식을 분리해서 고르고, 비교하고, 실제 웹페이지형 프리뷰로 확인하는 Web Layout Library입니다. + +openlayout은 디자인을 시작하기 전에 페이지 구조와 시각 언어를 빠르게 고를 수 있도록 만든 레이아웃/스타일 사전입니다. 96개의 레이아웃, 88개의 디자인 형식, 10개의 스타일 카테고리, 웹페이지형 샘플 렌더러를 제공하며, 각 항목은 추천 용도, 장단점, 반응형 동작, 접근성 체크포인트, 색상표, Tailwind 구현 힌트를 함께 보여줍니다. + +| 항목 | 값 | +| --- | --- | +| Repository | https://github.com/pandaofwild/openlayout | +| 마지막 검토일 | 2026-06-04 | + +## 대상 사용자 + +- 웹사이트 구조를 빠르게 비교해야 하는 디자이너 +- 랜딩페이지, 대시보드, 문서, 커머스 화면의 기본 골격을 찾는 프론트엔드 개발자 +- 반응형 동작과 접근성 관점까지 함께 확인하고 싶은 팀 + +## 주요 기능 + +- **Layout explorer**: 검색어, 카테고리, 사용 목적, 복잡도로 레이아웃을 필터링합니다. +- **Full-stage preview**: 상세 페이지와 비교 페이지에서 레이아웃을 실제 웹페이지 배경처럼 크게 확인합니다. +- **Floating detail panel**: 기본 화면에는 작은 요약 박스만 두고, 클릭하면 구조 설명과 장단점이 패널로 떠오릅니다. +- **Compare view**: 최대 3개의 레이아웃을 선택해 추천 용도, 모바일 대응, 밀도, 난이도를 나란히 비교합니다. +- **Design Style Library**: 88개의 디자인 형식을 카테고리, 태그, 검색어로 탐색하고 상세 페이지에서 색상표와 웹페이지형 샘플을 확인합니다. +- **Style application**: `/styles`에서 선택한 디자인 형식이 `/layouts`와 `/layouts/compare`의 프리뷰 톤에 적용되고 localStorage에 유지됩니다. +- **Studio copy**: `/studio`에서 선택한 Style x Layout 조합의 프롬프트와 self-contained HTML/CSS 코드를 복사할 수 있습니다. +- **Component dictionary**: `/components`에서 같은 스타일 토큰이 주요 UI 컴포넌트에 어떻게 적용되는지 확인할 수 있습니다. +- **Prompt palette**: 프롬프트를 섞어 커스텀 색상표를 생성하고 현재 레이아웃 프리뷰에 바로 적용합니다. +- **Image generation admin**: `OPENAI_API_KEY`가 있는 로컬 환경에서 스타일별 참조 이미지를 생성해 `public/generated/design-styles`에 저장할 수 있습니다. +- **SVG controls**: 비교 화살표와 설명/닫기/상세 아이콘은 inline SVG로 관리합니다. +- **Implementation hints**: previewType별 Tailwind 코드 예시와 구현 팁을 제공합니다. +- **Project skills**: `skills/layout-recommender/SKILL.md`와 `skills/design-style-recommender/SKILL.md`가 목적별 레이아웃/스타일 추천 방식을 안내합니다. + +## 바이브 코딩에 도움되는 점 + +- 시작 전에 페이지 목적을 말하면 레이아웃 후보를 빠르게 좁힐 수 있습니다. 예: "SaaS 대시보드 랜딩", "브랜드 캠페인", "문서형 지식 베이스". +- 각 레이아웃은 추천 용도, 피해야 할 상황, 반응형 동작, 접근성 체크포인트를 함께 갖고 있어 프롬프트에 넣을 설계 조건을 바로 뽑아낼 수 있습니다. +- 비교 페이지의 큰 프리뷰와 플로팅 설명 패널을 보면서 "이 구조로 가자", "이건 모바일에서 약하다" 같은 결정을 짧은 피드백으로 반복하기 좋습니다. +- `previewType`은 구현 방향의 압축어처럼 쓸 수 있습니다. 예: `hero`, `card-grid`, `dashboard`, `docs`, `comparison`. +- `DesignStyle`은 시각 방향의 압축어처럼 쓸 수 있습니다. 예: `brutalism`, `cyberpunk`, `luxury`, `organic-design`, `saas-style`. +- 새 화면을 만들 때는 먼저 레이아웃 사전에서 구조를 고르고, 그 다음 디자인 형식에서 색상/타이포/분위기를 고른 뒤, 컴포넌트와 카피를 코딩 에이전트에게 맡기는 흐름이 가장 안정적입니다. + +## 빠른 시작 + +요구 사항: + +- Node.js 22 이상 +- npm + +의존성 설치: + +```bash +npm install +``` + +개발 서버 실행: + +```bash +npm run dev +``` + +브라우저에서 열기: + +```text +http://localhost:3000/layouts +``` + +루트 경로(`/`)는 `/layouts`로 리다이렉트됩니다. + +## 주요 라우트 + +| Route | 내용 | +| --- | --- | +| `/layouts` | 레이아웃 검색, 필터, 카드 목록 | +| `/layouts/[slug]` | 구조 설명, 장단점, 반응형 동작, 접근성 노트, 라이브 프리뷰, 코드 예시 | +| `/layouts/compare` | 최대 3개 레이아웃 비교와 큰 구조 미리보기 | +| `/studio` | 디자인 스타일과 레이아웃을 조합해 실제 웹 프리뷰를 보고 코드/프롬프트를 복사 | +| `/styles` | 디자인 형식 검색, 카테고리/태그 필터, 색상표, 웹페이지형 스타일 샘플 | +| `/styles/[slug]` | 디자인 형식 상세 설명, 색상표, 타이포/레이아웃 특징, 관련 스타일 | +| `/styles/generate` | OpenAI Image API 기반 로컬 참조 이미지 생성 관리자 | +| `/components` | 디자인 스타일 토큰을 버튼, 카드, 내비게이션, 입력 필드, 배지에 적용해 비교 | + +## 이미지 생성 환경 변수 + +`/styles/generate`와 `/api/design-style-images`는 로컬 관리자 기능입니다. + +```bash +OPENAI_API_KEY=sk-... +OPENAI_IMAGE_MODEL=gpt-image-1.5 +``` + +- `OPENAI_API_KEY`는 필수입니다. +- `OPENAI_IMAGE_MODEL`은 선택값이며 기본값은 `gpt-image-1.5`입니다. +- 생성 결과는 `public/generated/design-styles/{slug}.webp`에 저장됩니다. +- Vercel 같은 읽기 전용 배포 환경에서는 Blob/S3 같은 외부 저장소로 바꾸는 것이 안전합니다. + +## 오픈소스 사용 + +이 프로젝트는 MIT 라이선스로 배포됩니다. 자세한 조건은 `LICENSE`를 확인하세요. + +- 기여 방법: `CONTRIBUTING.md` +- 보안 제보: `SECURITY.md` +- 로컬 환경 변수 예시: `.env.example` +- CI: `.github/workflows/ci.yml` + +## 품질 확인 + +변경 사항을 배포하거나 업로드하기 전에 확인합니다. + +```bash +npm run lint +npm run build +``` + +## 기술 스택 + +- Next.js App Router +- React +- TypeScript +- Tailwind CSS + +레이아웃 카탈로그는 정적 데이터 기반입니다. 별도 데이터베이스나 외부 API가 필요하지 않습니다. + +## 프로젝트 구조 + +```text +src/app/layouts/page.tsx # Explorer page +src/app/layouts/[slug]/page.tsx # Layout detail page +src/app/layouts/compare/page.tsx # Compare page shell +src/app/studio/page.tsx # Style x Layout studio +src/app/components/page.tsx # Component dictionary +src/app/styles/page.tsx # Design style library page +src/app/styles/[slug]/page.tsx # Design style detail page +src/app/styles/generate/page.tsx # Local image generation admin +src/app/api/design-style-images/route.ts # OpenAI Image API route +src/data/webLayouts.ts # Layout catalog and generated metadata +src/data/designStyles.ts # 88 design styles and generated metadata +src/data/componentSpecs.ts # Tokenized component dictionary specs +src/components/web-layout/ # Explorer, cards, previews, compare UI +src/components/design-style/ # Style cards, filters, samples, generator UI +src/components/component-dictionary/ # Component token previews and picker UI +src/components/style-preset/ # Global selected style provider +src/components/ui/ # Small shared UI primitives +skills/layout-recommender/SKILL.md # Purpose-based layout recommendation skill +skills/design-style-recommender/SKILL.md # Brand-tone-based style recommendation skill +``` + +주요 컴포넌트: + +| File | 역할 | +| --- | --- | +| `WebLayoutExplorer.tsx` | 레이아웃 목록의 검색과 필터 상태 | +| `WebLayoutFilters.tsx` | 검색어, 카테고리, 목적, 복잡도 필터 UI | +| `WebLayoutCard.tsx` | 레이아웃 카드와 썸네일 | +| `LayoutStagePreview.tsx` | 전체 배경형 프리뷰, 플로팅 요약, 클릭형 설명 패널 | +| `LayoutPreview.tsx` | 뷰포트 전환이 필요한 브라우저형 프리뷰 유틸 | +| `LayoutPreviewRenderer.tsx` | previewType별 큰 라이브 프리뷰 템플릿 | +| `WireframeThumbnail.tsx` | 카드와 비교 화면에 쓰이는 구조 썸네일 | +| `LayoutCodeExample.tsx` | 복사 가능한 Tailwind 구현 예시 | +| `WebLayoutCompare.tsx` | 비교 페이지 선택, SVG 화살표 탐색, 큰 프리뷰 표시 | +| `DesignStyleLibrary.tsx` | 디자인 형식 목록의 검색, 필터, 적용 상태 | +| `DesignStyleCard.tsx` | 디자인 형식 카드, 색상표, 웹페이지형 샘플, 적용 버튼 | +| `DesignStyleSampleRenderer.tsx` | sampleType별 10개 웹페이지형 스타일 샘플 | +| `StylePresetProvider.tsx` | 선택된 디자인 형식과 커스텀 팔레트 localStorage 유지 | +| `DesignStyleImageGenerator.tsx` | 스타일 참조 이미지 생성 관리자 UI | + +## 프로젝트 스킬 + +`skills/layout-recommender/SKILL.md`는 코딩 에이전트가 사용 목적에 맞는 레이아웃을 추천할 때 읽는 내부 스킬입니다. + +`skills/design-style-recommender/SKILL.md`는 브랜드 톤, 업종, 감정, 타이포그래피, 색상 방향에 맞는 디자인 형식을 추천할 때 읽는 내부 스킬입니다. + +추천 요청 예시: + +```text +이 서비스는 B2B SaaS 온보딩 페이지야. 신뢰와 기능 설명이 중요하고 모바일도 챙겨야 해. 어떤 레이아웃이 좋아? +``` + +스킬은 `src/data/webLayouts.ts`의 카테고리, `bestFor`, `notGoodFor`, `tags`, `previewType`을 먼저 확인하고 1순위 후보, 대안, 피해야 할 구조를 짧게 제안하도록 설계되어 있습니다. + +디자인 스타일 추천 요청 예시: + +```text +프리미엄 뷰티 브랜드 랜딩인데 너무 화려하진 않고 고급스럽게 보여야 해. 어떤 디자인 형식이 좋아? +``` + +디자인 스타일 스킬은 `src/data/designStyles.ts`의 `category`, `tags`, `goodFor`, `useCases`, `palette`, `sampleType`을 기준으로 1순위 스타일, 대안, 피해야 할 스타일을 제안합니다. + +## 레이아웃 추가 + +레이아웃 데이터는 `src/data/webLayouts.ts`에서 관리합니다. + +1. `layoutSeeds`에 새 항목을 추가합니다. +2. `nameKo`, `nameEn`, `category`, `summary`, `previewType`, `complexity`를 입력합니다. +3. 기본값을 바꿔야 할 때만 `bestFor`, `notGoodFor`, `tags`를 추가합니다. +4. `slug`, 긴 설명, 장단점, 반응형 노트, 접근성 노트, 구현 팁, 관련 레이아웃은 데이터 빌더가 생성하도록 둡니다. + +새 카테고리를 추가할 때는 `categoryGuides`에도 설명과 기본값을 추가해야 합니다. + +## 디자인 형식 추가 + +디자인 형식 데이터는 `src/data/designStyles.ts`에서 관리합니다. + +1. `styleSeedTuples`에 새 항목을 추가합니다. +2. `slug`, `nameKo`, `nameEn`, `category`, `tone`, `tags`, `sampleType`을 입력합니다. +3. 필요하면 `palettes`에 해당 slug의 9색 팔레트를 추가합니다. +4. 새 범주가 필요하면 `categoryProfiles`에 시각 특징, 색상 노트, 타이포그래피, 레이아웃 경향을 추가합니다. +5. 기존 10개 샘플 렌더러로 표현이 부족할 때만 `DesignStyleSampleType`과 `DesignStyleSampleRenderer.tsx`를 확장합니다. + +## Preview Type 추가 + +기존 템플릿으로 구조가 충분히 드러나지 않을 때 새 previewType을 추가합니다. + +1. `src/data/webLayouts.ts`의 `PreviewType` union을 확장합니다. +2. `previewGuides`에 구조 설명, 반응형 동작, 구현 팁을 추가합니다. +3. `src/components/web-layout/LayoutPreviewRenderer.tsx`에 라이브 프리뷰 렌더러를 추가합니다. +4. `src/components/web-layout/WireframeThumbnail.tsx`에 썸네일 다이어그램을 추가합니다. +5. 기존 예시와 구현 방식이 다르면 `src/components/web-layout/LayoutCodeExample.tsx`에 Tailwind 예시를 추가합니다. + +## 작성 및 설계 노트 + +- 레이아웃 이름과 요약은 실용적으로 씁니다. 상세 페이지를 열지 않아도 언제 쓰는 구조인지 알 수 있어야 합니다. +- `Header`, `Main`, `Sidebar`, `CTA`, `TOC`, `Product`처럼 구체적인 구조 라벨을 우선합니다. +- 상세 페이지는 장점만이 아니라 한계와 트레이드오프도 설명합니다. +- 비교 페이지의 긴 설명은 기본적으로 접어 두어 구조 그림을 먼저 훑을 수 있게 합니다. diff --git a/README.md b/README.md index 8eac7a0..3e0736f 100644 --- a/README.md +++ b/README.md @@ -1,139 +1,139 @@ # openlayout -**한국어** | [English](./README.en.md) +**English** | [한국어](./README.ko.md) -웹사이트 레이아웃과 디자인 형식을 분리해서 고르고, 비교하고, 실제 웹페이지형 프리뷰로 확인하는 Web Layout Library입니다. +A web layout library for choosing, comparing, and previewing website structures and design styles separately, with real webpage-style previews. -openlayout은 디자인을 시작하기 전에 페이지 구조와 시각 언어를 빠르게 고를 수 있도록 만든 레이아웃/스타일 사전입니다. 96개의 레이아웃, 88개의 디자인 형식, 10개의 스타일 카테고리, 웹페이지형 샘플 렌더러를 제공하며, 각 항목은 추천 용도, 장단점, 반응형 동작, 접근성 체크포인트, 색상표, Tailwind 구현 힌트를 함께 보여줍니다. +openlayout is a layout and style dictionary that helps you quickly pick page structure and visual language before you start designing. It provides 96 layouts, 88 design styles, 10 style categories, and webpage-style sample renderers. Each entry includes recommended use cases, trade-offs, responsive behavior, accessibility checkpoints, a color palette, and Tailwind implementation hints. -| 항목 | 값 | +| Item | Value | | --- | --- | | Repository | https://github.com/pandaofwild/openlayout | -| 마지막 검토일 | 2026-06-03 | +| Last reviewed | 2026-06-04 | -## 대상 사용자 +## Who It's For -- 웹사이트 구조를 빠르게 비교해야 하는 디자이너 -- 랜딩페이지, 대시보드, 문서, 커머스 화면의 기본 골격을 찾는 프론트엔드 개발자 -- 반응형 동작과 접근성 관점까지 함께 확인하고 싶은 팀 +- Designers who need to quickly compare website structures +- Frontend developers looking for base skeletons for landing pages, dashboards, docs, and commerce screens +- Teams that want responsive behavior and accessibility checkpoints alongside visual direction -## 주요 기능 +## Key Features -- **Layout explorer**: 검색어, 카테고리, 사용 목적, 복잡도로 레이아웃을 필터링합니다. -- **Full-stage preview**: 상세 페이지와 비교 페이지에서 레이아웃을 실제 웹페이지 배경처럼 크게 확인합니다. -- **Floating detail panel**: 기본 화면에는 작은 요약 박스만 두고, 클릭하면 구조 설명과 장단점이 패널로 떠오릅니다. -- **Compare view**: 최대 3개의 레이아웃을 선택해 추천 용도, 모바일 대응, 밀도, 난이도를 나란히 비교합니다. -- **Design Style Library**: 88개의 디자인 형식을 카테고리, 태그, 검색어로 탐색하고 상세 페이지에서 색상표와 웹페이지형 샘플을 확인합니다. -- **Style application**: `/styles`에서 선택한 디자인 형식이 `/layouts`와 `/layouts/compare`의 프리뷰 톤에 적용되고 localStorage에 유지됩니다. -- **Studio copy**: `/studio`에서 선택한 Style x Layout 조합의 프롬프트와 self-contained HTML/CSS 코드를 복사할 수 있습니다. -- **Component dictionary**: `/components`에서 같은 스타일 토큰이 주요 UI 컴포넌트에 어떻게 적용되는지 확인할 수 있습니다. -- **Prompt palette**: 프롬프트를 섞어 커스텀 색상표를 생성하고 현재 레이아웃 프리뷰에 바로 적용합니다. -- **Image generation admin**: `OPENAI_API_KEY`가 있는 로컬 환경에서 스타일별 참조 이미지를 생성해 `public/generated/design-styles`에 저장할 수 있습니다. -- **SVG controls**: 비교 화살표와 설명/닫기/상세 아이콘은 inline SVG로 관리합니다. -- **Implementation hints**: previewType별 Tailwind 코드 예시와 구현 팁을 제공합니다. -- **Project skills**: `skills/layout-recommender/SKILL.md`와 `skills/design-style-recommender/SKILL.md`가 목적별 레이아웃/스타일 추천 방식을 안내합니다. +- **Layout explorer**: Filter layouts by search term, category, purpose, and complexity. +- **Full-stage preview**: View layouts large, like a real webpage background, on detail and compare pages. +- **Floating detail panel**: Keep the base screen focused, then open structure details and pros/cons in a floating panel. +- **Compare view**: Select up to 3 layouts and compare recommended use, mobile support, density, and difficulty side by side. +- **Design Style Library**: Explore 88 design styles by category, tag, and search term, then inspect palettes and webpage-style samples on detail pages. +- **Style application**: A design style chosen in `/styles` is applied to `/layouts` and `/layouts/compare` previews and persisted in localStorage. +- **Studio copy**: Copy a prompt or self-contained HTML/CSS for the selected Style x Layout combination from `/studio`. +- **Component dictionary**: Preview how the same style tokens affect buttons, cards, navigation, input fields, and badges in `/components`. +- **Prompt palette**: Mix prompts to generate a custom color palette and apply it directly to the current layout preview. +- **Image generation admin**: In a local environment with `OPENAI_API_KEY`, generate per-style reference images and save them to `public/generated/design-styles`. +- **SVG controls**: Comparison arrows and info/close/detail icons are managed as inline SVG. +- **Implementation hints**: Tailwind code examples and implementation tips are provided per `previewType`. +- **Project skills**: `skills/layout-recommender/SKILL.md` and `skills/design-style-recommender/SKILL.md` guide purpose-based layout and style recommendations. -## 바이브 코딩에 도움되는 점 +## Why It Helps Vibe Coding -- 시작 전에 페이지 목적을 말하면 레이아웃 후보를 빠르게 좁힐 수 있습니다. 예: "SaaS 대시보드 랜딩", "브랜드 캠페인", "문서형 지식 베이스". -- 각 레이아웃은 추천 용도, 피해야 할 상황, 반응형 동작, 접근성 체크포인트를 함께 갖고 있어 프롬프트에 넣을 설계 조건을 바로 뽑아낼 수 있습니다. -- 비교 페이지의 큰 프리뷰와 플로팅 설명 패널을 보면서 "이 구조로 가자", "이건 모바일에서 약하다" 같은 결정을 짧은 피드백으로 반복하기 좋습니다. -- `previewType`은 구현 방향의 압축어처럼 쓸 수 있습니다. 예: `hero`, `card-grid`, `dashboard`, `docs`, `comparison`. -- `DesignStyle`은 시각 방향의 압축어처럼 쓸 수 있습니다. 예: `brutalism`, `cyberpunk`, `luxury`, `organic-design`, `saas-style`. -- 새 화면을 만들 때는 먼저 레이아웃 사전에서 구조를 고르고, 그 다음 디자인 형식에서 색상/타이포/분위기를 고른 뒤, 컴포넌트와 카피를 코딩 에이전트에게 맡기는 흐름이 가장 안정적입니다. +- State your page purpose up front and quickly narrow down layout candidates, such as "SaaS dashboard landing", "brand campaign", or "docs-style knowledge base". +- Each layout includes recommended use, situations to avoid, responsive behavior, and accessibility checkpoints, so design constraints can move directly into a prompt. +- Large previews and floating description panels make it easy to iterate with short feedback like "use this structure" or "this one is weak on mobile". +- `previewType` works like shorthand for implementation direction, such as `hero`, `card-grid`, `dashboard`, `docs`, or `comparison`. +- `DesignStyle` works like shorthand for visual direction, such as `brutalism`, `cyberpunk`, `luxury`, `organic-design`, or `saas-style`. +- For a new screen, the most reliable flow is to choose structure first, then choose color/typography/mood, then hand components and copy to a coding agent. -## 빠른 시작 +## Quick Start -요구 사항: +Requirements: -- Node.js 22 이상 +- Node.js 22 or later - npm -의존성 설치: +Install dependencies: ```bash npm install ``` -개발 서버 실행: +Run the dev server: ```bash npm run dev ``` -브라우저에서 열기: +Open in your browser: ```text http://localhost:3000/layouts ``` -루트 경로(`/`)는 `/layouts`로 리다이렉트됩니다. +The root path (`/`) redirects to `/layouts`. -## 주요 라우트 +## Main Routes -| Route | 내용 | +| Route | Contents | | --- | --- | -| `/layouts` | 레이아웃 검색, 필터, 카드 목록 | -| `/layouts/[slug]` | 구조 설명, 장단점, 반응형 동작, 접근성 노트, 라이브 프리뷰, 코드 예시 | -| `/layouts/compare` | 최대 3개 레이아웃 비교와 큰 구조 미리보기 | -| `/studio` | 디자인 스타일과 레이아웃을 조합해 실제 웹 프리뷰를 보고 코드/프롬프트를 복사 | -| `/styles` | 디자인 형식 검색, 카테고리/태그 필터, 색상표, 웹페이지형 스타일 샘플 | -| `/styles/[slug]` | 디자인 형식 상세 설명, 색상표, 타이포/레이아웃 특징, 관련 스타일 | -| `/styles/generate` | OpenAI Image API 기반 로컬 참조 이미지 생성 관리자 | -| `/components` | 디자인 스타일 토큰을 버튼, 카드, 내비게이션, 입력 필드, 배지에 적용해 비교 | +| `/layouts` | Layout search, filters, and card list | +| `/layouts/[slug]` | Structure description, pros/cons, responsive behavior, accessibility notes, live preview, and code example | +| `/layouts/compare` | Compare up to 3 layouts with large structure previews | +| `/studio` | Combine a design style and layout, preview the result, and copy code or prompts | +| `/styles` | Design style search, category/tag filters, color palettes, and webpage-style samples | +| `/styles/[slug]` | Design style detail, color palette, typography/layout traits, and related styles | +| `/styles/generate` | Local reference image generation admin powered by the OpenAI Image API | +| `/components` | Compare how design style tokens affect buttons, cards, navigation, inputs, and badges | -## 이미지 생성 환경 변수 +## Image Generation Environment Variables -`/styles/generate`와 `/api/design-style-images`는 로컬 관리자 기능입니다. +`/styles/generate` and `/api/design-style-images` are local admin features. ```bash OPENAI_API_KEY=sk-... OPENAI_IMAGE_MODEL=gpt-image-1.5 ``` -- `OPENAI_API_KEY`는 필수입니다. -- `OPENAI_IMAGE_MODEL`은 선택값이며 기본값은 `gpt-image-1.5`입니다. -- 생성 결과는 `public/generated/design-styles/{slug}.webp`에 저장됩니다. -- Vercel 같은 읽기 전용 배포 환경에서는 Blob/S3 같은 외부 저장소로 바꾸는 것이 안전합니다. +- `OPENAI_API_KEY` is required. +- `OPENAI_IMAGE_MODEL` is optional and defaults to `gpt-image-1.5`. +- Generated results are saved to `public/generated/design-styles/{slug}.webp`. +- On read-only deployment platforms like Vercel, switch to external storage such as Blob/S3. -## 오픈소스 사용 +## Open Source Usage -이 프로젝트는 MIT 라이선스로 배포됩니다. 자세한 조건은 `LICENSE`를 확인하세요. +This project is distributed under the MIT License. See `LICENSE` for full terms. -- 기여 방법: `CONTRIBUTING.md` -- 보안 제보: `SECURITY.md` -- 로컬 환경 변수 예시: `.env.example` +- How to contribute: `CONTRIBUTING.md` +- Security reports: `SECURITY.md` +- Local environment variable example: `.env.example` - CI: `.github/workflows/ci.yml` -## 품질 확인 +## Quality Checks -변경 사항을 배포하거나 업로드하기 전에 확인합니다. +Run these before deploying or uploading changes. ```bash npm run lint npm run build ``` -## 기술 스택 +## Tech Stack - Next.js App Router - React - TypeScript - Tailwind CSS -레이아웃 카탈로그는 정적 데이터 기반입니다. 별도 데이터베이스나 외부 API가 필요하지 않습니다. +The layout catalog is static-data driven. No separate database or external API is required. -## 프로젝트 구조 +## Project Structure ```text -src/app/layouts/page.tsx # Explorer page -src/app/layouts/[slug]/page.tsx # Layout detail page -src/app/layouts/compare/page.tsx # Compare page shell -src/app/studio/page.tsx # Style x Layout studio -src/app/components/page.tsx # Component dictionary -src/app/styles/page.tsx # Design style library page -src/app/styles/[slug]/page.tsx # Design style detail page -src/app/styles/generate/page.tsx # Local image generation admin +src/app/layouts/page.tsx # Explorer page +src/app/layouts/[slug]/page.tsx # Layout detail page +src/app/layouts/compare/page.tsx # Compare page shell +src/app/studio/page.tsx # Style x Layout studio +src/app/components/page.tsx # Component dictionary +src/app/styles/page.tsx # Design style library page +src/app/styles/[slug]/page.tsx # Design style detail page +src/app/styles/generate/page.tsx # Local image generation admin src/app/api/design-style-images/route.ts # OpenAI Image API route src/data/webLayouts.ts # Layout catalog and generated metadata src/data/designStyles.ts # 88 design styles and generated metadata @@ -147,81 +147,81 @@ skills/layout-recommender/SKILL.md # Purpose-based layout recommendation skills/design-style-recommender/SKILL.md # Brand-tone-based style recommendation skill ``` -주요 컴포넌트: +Key components: -| File | 역할 | +| File | Role | | --- | --- | -| `WebLayoutExplorer.tsx` | 레이아웃 목록의 검색과 필터 상태 | -| `WebLayoutFilters.tsx` | 검색어, 카테고리, 목적, 복잡도 필터 UI | -| `WebLayoutCard.tsx` | 레이아웃 카드와 썸네일 | -| `LayoutStagePreview.tsx` | 전체 배경형 프리뷰, 플로팅 요약, 클릭형 설명 패널 | -| `LayoutPreview.tsx` | 뷰포트 전환이 필요한 브라우저형 프리뷰 유틸 | -| `LayoutPreviewRenderer.tsx` | previewType별 큰 라이브 프리뷰 템플릿 | -| `WireframeThumbnail.tsx` | 카드와 비교 화면에 쓰이는 구조 썸네일 | -| `LayoutCodeExample.tsx` | 복사 가능한 Tailwind 구현 예시 | -| `WebLayoutCompare.tsx` | 비교 페이지 선택, SVG 화살표 탐색, 큰 프리뷰 표시 | -| `DesignStyleLibrary.tsx` | 디자인 형식 목록의 검색, 필터, 적용 상태 | -| `DesignStyleCard.tsx` | 디자인 형식 카드, 색상표, 웹페이지형 샘플, 적용 버튼 | -| `DesignStyleSampleRenderer.tsx` | sampleType별 10개 웹페이지형 스타일 샘플 | -| `StylePresetProvider.tsx` | 선택된 디자인 형식과 커스텀 팔레트 localStorage 유지 | -| `DesignStyleImageGenerator.tsx` | 스타일 참조 이미지 생성 관리자 UI | +| `WebLayoutExplorer.tsx` | Search and filter state for the layout list | +| `WebLayoutFilters.tsx` | Filter UI for search term, category, purpose, and complexity | +| `WebLayoutCard.tsx` | Layout card and thumbnail | +| `LayoutStagePreview.tsx` | Full-background preview, floating summary, and click-to-open description panel | +| `LayoutPreview.tsx` | Browser-style preview utility with viewport switching | +| `LayoutPreviewRenderer.tsx` | Large live preview templates per `previewType` | +| `WireframeThumbnail.tsx` | Structure thumbnails used on cards and the compare screen | +| `LayoutCodeExample.tsx` | Copyable Tailwind implementation example | +| `WebLayoutCompare.tsx` | Compare page selection, SVG arrow navigation, and large preview display | +| `DesignStyleLibrary.tsx` | Search, filter, and applied state for the design style list | +| `DesignStyleCard.tsx` | Design style card, color palette, webpage-style sample, and apply button | +| `DesignStyleSampleRenderer.tsx` | 10 webpage-style samples by `sampleType` | +| `StylePresetProvider.tsx` | Persists the selected design style and custom palette in localStorage | +| `DesignStyleImageGenerator.tsx` | Style reference image generation admin UI | -## 프로젝트 스킬 +## Project Skills -`skills/layout-recommender/SKILL.md`는 코딩 에이전트가 사용 목적에 맞는 레이아웃을 추천할 때 읽는 내부 스킬입니다. +`skills/layout-recommender/SKILL.md` is an internal skill a coding agent reads to recommend a layout that fits the intended use. -`skills/design-style-recommender/SKILL.md`는 브랜드 톤, 업종, 감정, 타이포그래피, 색상 방향에 맞는 디자인 형식을 추천할 때 읽는 내부 스킬입니다. +`skills/design-style-recommender/SKILL.md` is an internal skill read to recommend a design style matching brand tone, industry, emotion, typography, and color direction. -추천 요청 예시: +Example recommendation request: ```text -이 서비스는 B2B SaaS 온보딩 페이지야. 신뢰와 기능 설명이 중요하고 모바일도 챙겨야 해. 어떤 레이아웃이 좋아? +This is a B2B SaaS onboarding page. Trust and feature explanation matter, and it has to work on mobile too. Which layout is best? ``` -스킬은 `src/data/webLayouts.ts`의 카테고리, `bestFor`, `notGoodFor`, `tags`, `previewType`을 먼저 확인하고 1순위 후보, 대안, 피해야 할 구조를 짧게 제안하도록 설계되어 있습니다. +The skill is designed to first check the category, `bestFor`, `notGoodFor`, `tags`, and `previewType` in `src/data/webLayouts.ts`, then briefly suggest a top candidate, alternatives, and structures to avoid. -디자인 스타일 추천 요청 예시: +Example design style recommendation request: ```text -프리미엄 뷰티 브랜드 랜딩인데 너무 화려하진 않고 고급스럽게 보여야 해. 어떤 디자인 형식이 좋아? +It is a premium beauty brand landing page, but it should not be too flashy. It needs to look high-end. Which design style is best? ``` -디자인 스타일 스킬은 `src/data/designStyles.ts`의 `category`, `tags`, `goodFor`, `useCases`, `palette`, `sampleType`을 기준으로 1순위 스타일, 대안, 피해야 할 스타일을 제안합니다. +The design style skill suggests a top style, alternatives, and styles to avoid based on `category`, `tags`, `goodFor`, `useCases`, `palette`, and `sampleType` in `src/data/designStyles.ts`. -## 레이아웃 추가 +## Adding a Layout -레이아웃 데이터는 `src/data/webLayouts.ts`에서 관리합니다. +Layout data is managed in `src/data/webLayouts.ts`. -1. `layoutSeeds`에 새 항목을 추가합니다. -2. `nameKo`, `nameEn`, `category`, `summary`, `previewType`, `complexity`를 입력합니다. -3. 기본값을 바꿔야 할 때만 `bestFor`, `notGoodFor`, `tags`를 추가합니다. -4. `slug`, 긴 설명, 장단점, 반응형 노트, 접근성 노트, 구현 팁, 관련 레이아웃은 데이터 빌더가 생성하도록 둡니다. +1. Add a new entry to `layoutSeeds`. +2. Provide `nameKo`, `nameEn`, `category`, `summary`, `previewType`, and `complexity`. +3. Add `bestFor`, `notGoodFor`, and `tags` only when you need to override the defaults. +4. Let the data builder generate `slug`, the long description, pros/cons, responsive notes, accessibility notes, implementation tips, and related layouts. -새 카테고리를 추가할 때는 `categoryGuides`에도 설명과 기본값을 추가해야 합니다. +When adding a new category, also add a description and defaults to `categoryGuides`. -## 디자인 형식 추가 +## Adding a Design Style -디자인 형식 데이터는 `src/data/designStyles.ts`에서 관리합니다. +Design style data is managed in `src/data/designStyles.ts`. -1. `styleSeedTuples`에 새 항목을 추가합니다. -2. `slug`, `nameKo`, `nameEn`, `category`, `tone`, `tags`, `sampleType`을 입력합니다. -3. 필요하면 `palettes`에 해당 slug의 9색 팔레트를 추가합니다. -4. 새 범주가 필요하면 `categoryProfiles`에 시각 특징, 색상 노트, 타이포그래피, 레이아웃 경향을 추가합니다. -5. 기존 10개 샘플 렌더러로 표현이 부족할 때만 `DesignStyleSampleType`과 `DesignStyleSampleRenderer.tsx`를 확장합니다. +1. Add a new entry to `styleSeedTuples`. +2. Provide `slug`, `nameKo`, `nameEn`, `category`, `tone`, `tags`, and `sampleType`. +3. If needed, add a 9-color palette for that slug to `palettes`. +4. If a new category is needed, add visual traits, color notes, typography, and layout tendencies to `categoryProfiles`. +5. Extend `DesignStyleSampleType` and `DesignStyleSampleRenderer.tsx` only when the existing 10 sample renderers cannot express it. -## Preview Type 추가 +## Adding a Preview Type -기존 템플릿으로 구조가 충분히 드러나지 않을 때 새 previewType을 추가합니다. +Add a new `previewType` when existing templates do not reveal the structure clearly enough. -1. `src/data/webLayouts.ts`의 `PreviewType` union을 확장합니다. -2. `previewGuides`에 구조 설명, 반응형 동작, 구현 팁을 추가합니다. -3. `src/components/web-layout/LayoutPreviewRenderer.tsx`에 라이브 프리뷰 렌더러를 추가합니다. -4. `src/components/web-layout/WireframeThumbnail.tsx`에 썸네일 다이어그램을 추가합니다. -5. 기존 예시와 구현 방식이 다르면 `src/components/web-layout/LayoutCodeExample.tsx`에 Tailwind 예시를 추가합니다. +1. Extend the `PreviewType` union in `src/data/webLayouts.ts`. +2. Add a structure description, responsive behavior, and implementation tips to `previewGuides`. +3. Add a live preview renderer to `src/components/web-layout/LayoutPreviewRenderer.tsx`. +4. Add a thumbnail diagram to `src/components/web-layout/WireframeThumbnail.tsx`. +5. If the implementation differs from existing examples, add a Tailwind example to `src/components/web-layout/LayoutCodeExample.tsx`. -## 작성 및 설계 노트 +## Writing and Design Notes -- 레이아웃 이름과 요약은 실용적으로 씁니다. 상세 페이지를 열지 않아도 언제 쓰는 구조인지 알 수 있어야 합니다. -- `Header`, `Main`, `Sidebar`, `CTA`, `TOC`, `Product`처럼 구체적인 구조 라벨을 우선합니다. -- 상세 페이지는 장점만이 아니라 한계와 트레이드오프도 설명합니다. -- 비교 페이지의 긴 설명은 기본적으로 접어 두어 구조 그림을 먼저 훑을 수 있게 합니다. +- Write layout names and summaries practically. A reader should understand when to use a structure without opening the detail page. +- Prefer concrete structure labels like `Header`, `Main`, `Sidebar`, `CTA`, `TOC`, and `Product`. +- Detail pages explain limits and trade-offs, not just benefits. +- Long descriptions on the compare page are collapsed by default so the structure diagram can be scanned first. diff --git a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md new file mode 100644 index 0000000..b8fef44 --- /dev/null +++ b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md @@ -0,0 +1,1011 @@ +# Representative Style Redesign Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Re-author all 88 design styles so each style reads as a representative design direction, not a category-default palette swap. + +**Architecture:** Treat `scripts/style-references.json` as the research source of truth, but do not assume the current entries are enough. Every style requires fresh discovery: real sites or archives plus Pinterest, Awwwards, and Dribbble references that match the specific visual language. Those references then drive explicit per-style data in `src/data/designStyles.ts`: a style brief, a unique palette, non-color token overrides, a suitable sample variant, and prompt copy that describes the actual visual language. Validation should fail when styles fall back to generated/default-looking data or when any required discovery source is missing. + +**Tech Stack:** Modified Next.js 16 App Router, React 19, TypeScript, Tailwind CSS v4, static TypeScript data, Node 22, Playwright for reference capture and visual QA. Before editing framework routes or config, read the relevant guide in `node_modules/next/dist/docs/`. + +--- + +## Current Findings + +- `README.md` is now the English default and links to `README.ko.md`; the branch has been pushed to the draft PR. +- The strongest existing memo for this work is `scripts/style-references.json`, but it is only a starting point. +- `scripts/style-references.json` currently covers only 12 of 88 styles: + - `minimalism` + - `brutalism` + - `cyberpunk` + - `luxury` + - `organic-design` + - `kawaii` + - `streetwear` + - `editorial-design` + - `glassmorphism` + - `y2k` + - `maximalism` + - `swiss-design` +- `scripts/capture-references.mjs` captures those references to `public/references/[slug]/`, which is intentionally gitignored for copyright and local-only review. +- Each style still needs additional platform research from Pinterest, Awwwards, and Dribbble. If a platform does not have a perfect direct category page for a style, store the best matching search/results URL and explain the limitation in `note`. +- `src/data/designStyles.ts` has 88 styles, but many fields are generated from category profiles. +- `styleTokenOverrides` currently covers 24 styles; 64 styles still inherit category defaults for most non-color behavior. +- Palettes are explicit for a small subset and hash-assigned from `paletteBank` for the rest. +- The sample system has only 10 broad `DesignStyleSampleType` renderers, so many styles share the same structural expression. + +## Source Files + +### Research And Reference Files + +- Modify: `scripts/style-references.json` + - Add reference entries for all 88 style slugs. + - Keep entries split into `sites` and `galleries`. + - Prefer real brand/product/editorial sites in `sites`; keep curation platforms in `galleries`. + - For every style, include Pinterest, Awwwards, and Dribbble entries in `galleries`. + - Use exact style pages when available; otherwise use platform search/result URLs with precise notes. +- Modify: `scripts/capture-references.mjs` + - Keep screenshots local-only under `public/references/`. + - Add a coverage summary that reports missing slugs before capture starts. +- Create: `scripts/check-style-references.mjs` + - Validate all 88 style slugs have references. + - Validate each referenced style has at least 2 `sites` and at least 3 `galleries` entries. + - Validate each style has Pinterest, Awwwards, and Dribbble coverage in `galleries`. + - Validate each reference item has `url`, `title`, and `note`. + +### Style Data Files + +- Modify: `src/data/designStyles.ts` + - Replace generated copy for each style with explicit per-style copy. + - Add explicit palettes for all 88 styles. + - Add explicit token overrides for all 88 styles. + - Add source-reference slugs or titles to each style record if needed for traceability. +- Modify: `scripts/check-data.mjs` + - Raise tuned token coverage from 24 to 88. + - Add checks that no style has generated fallback summary/description patterns. + - Add checks that each style has a unique enough palette and token signature. + +### Rendering Files + +- Modify: `src/components/design-style/DesignStyleSampleRenderer.tsx` + - Expand from 10 broad sample renderers to style-family variants where visual language actually differs. + - Keep each renderer responsive at 390px. +- Modify: `src/components/style-preset/styleTokenVars.ts` + - Add new token variables only if the re-authoring proves the current token model cannot express a style. +- Modify: `src/app/globals.css` + - Add effect utilities only after a concrete style needs them. + +### Documentation + +- Modify: `README.md` + - Mention that style data is reference-backed. +- Modify: `README.ko.md` + - Mirror the same note in Korean. +- Create: `docs/style-research/README.md` + - Explain how to add or update style references and how to run local capture. + +--- + +## Style Inventory + +Each style below must end with explicit references, explicit copy, explicit palette, explicit tokens, and a visual QA screenshot. + +### 모던 / 미니멀 + +- [x] `minimalism` +- [x] `modernism` +- [x] `swiss-design` +- [x] `international-style` +- [x] `scandinavian` +- [x] `japandi` +- [x] `warm-minimal` +- [x] `soft-minimal` +- [x] `high-end-minimal` + +### 강렬 / 실험 + +- [x] `brutalism` +- [x] `new-brutalism` +- [x] `anti-design` +- [x] `maximalism` +- [x] `glitch-art` +- [x] `deconstructivism` +- [x] `avant-garde` +- [x] `postmodernism` + +### 레트로 / 빈티지 + +- [x] `retro` +- [x] `vintage` +- [x] `seventies-retro` +- [x] `eighties-retro` +- [x] `nineties-graphic` +- [x] `y2k` +- [x] `retro-futurism` +- [ ] `mid-century-modern` +- [ ] `bauhaus` + +### 미래 / 디지털 + +- [ ] `futurism` +- [ ] `cyberpunk` +- [ ] `neon-noir` +- [ ] `techwear` +- [ ] `high-tech` +- [ ] `ai-aesthetic` +- [ ] `hologram-style` +- [ ] `chromecore` +- [ ] `metaverse-style` + +### 럭셔리 / 클래식 + +- [ ] `classic` +- [ ] `neoclassic` +- [ ] `luxury` +- [ ] `old-money` +- [ ] `art-deco` +- [ ] `art-nouveau` +- [ ] `baroque` +- [ ] `rococo` +- [ ] `gothic` + +### 자연 / 수공예 + +- [ ] `organic-design` +- [ ] `natural` +- [ ] `botanical` +- [ ] `eco-design` +- [ ] `rustic` +- [ ] `kinfolk` +- [ ] `handmade` +- [ ] `craft` +- [ ] `wabi-sabi` + +### 귀여움 / 캐주얼 + +- [ ] `kitsch` +- [ ] `kawaii` +- [ ] `dopamine-design` +- [ ] `pop-art` +- [ ] `comic-book-style` +- [ ] `toy-design` +- [ ] `playful-design` +- [ ] `pastel-style` +- [ ] `bubble-design` + +### 스트리트 / 서브컬처 + +- [ ] `streetwear` +- [ ] `graffiti` +- [ ] `hiphop-style` +- [ ] `skate-culture` +- [ ] `punk` +- [ ] `grunge` +- [ ] `indie-sleaze` +- [ ] `rave-style` +- [ ] `lo-fi` + +### 편집 / 타이포그래피 + +- [ ] `typography-focused` +- [ ] `editorial-design` +- [ ] `magazine-style` +- [ ] `posterism` +- [ ] `grid-system` +- [ ] `collage` +- [ ] `photomontage` +- [ ] `experimental-type` +- [ ] `newspaper-style` + +### UI / 웹 + +- [ ] `flat-design` +- [ ] `material-design` +- [ ] `neumorphism` +- [ ] `glassmorphism` +- [ ] `claymorphism` +- [ ] `dark-mode-design` +- [ ] `saas-style` +- [ ] `startup-landing-page` + +--- + +## Data Contract + +Add this explicit data shape inside `src/data/designStyles.ts` or split it into a focused helper file if the file becomes too large: + +```ts +type StyleReferenceSource = { + title: string; + url: string; + note: string; +}; + +type StyleResearchBrief = { + referenceSites: StyleReferenceSource[]; + referenceGalleries: StyleReferenceSource[]; + representativeTraits: string[]; + avoidTraits: string[]; + tokenIntent: string; +}; +``` + +Every style must satisfy: + +- `referenceSites.length >= 2` +- `referenceGalleries.length >= 3` +- `referenceGalleries` includes at least one Pinterest URL +- `referenceGalleries` includes at least one Awwwards URL +- `referenceGalleries` includes at least one Dribbble URL +- `representativeTraits.length >= 4` +- `avoidTraits.length >= 2` +- `tokenIntent.length >= 40` +- Explicit palette assigned by slug, not by hash fallback +- Explicit `styleTokenOverrides[slug]` +- Summary must not be generated from `${nameKo}은 ${tone}입니다.` + +--- + +## Task 1: Add Reference Coverage Validation + +**Files:** +- Create: `scripts/check-style-references.mjs` +- Modify: `package.json` +- Modify: `scripts/capture-references.mjs` + +- [x] **Step 1: Create reference check script** + +Create `scripts/check-style-references.mjs`: + +```js +import references from "./style-references.json" with { type: "json" }; +import { designStyles } from "../src/data/designStyles.ts"; + +const errors = []; +function assert(condition, message) { + if (!condition) errors.push(message); +} + +const referenceSlugs = new Set(Object.keys(references).filter((key) => !key.startsWith("_"))); +const styleSlugs = new Set(designStyles.map((style) => style.slug)); + +for (const slug of referenceSlugs) { + assert(styleSlugs.has(slug), `reference slug does not exist in designStyles: ${slug}`); +} + +for (const style of designStyles) { + const entry = references[style.slug]; + assert(entry, `missing references for ${style.slug}`); + if (!entry) continue; + + const sites = entry.sites ?? []; + const galleries = entry.galleries ?? []; + + assert(Array.isArray(entry.sites), `references.${style.slug}.sites must be an array`); + assert(Array.isArray(entry.galleries), `references.${style.slug}.galleries must be an array`); + assert(sites.length >= 2, `${style.slug} needs at least 2 real site references`); + assert(galleries.length >= 3, `${style.slug} needs Pinterest, Awwwards, and Dribbble references`); + + const galleryUrls = galleries.map((item) => item.url); + assert(galleryUrls.some((url) => url.includes("pinterest.")), `${style.slug} missing Pinterest reference`); + assert(galleryUrls.some((url) => url.includes("awwwards.")), `${style.slug} missing Awwwards reference`); + assert(galleryUrls.some((url) => url.includes("dribbble.")), `${style.slug} missing Dribbble reference`); + + for (const [groupName, items] of [["sites", sites], ["galleries", galleries]]) { + for (const item of items) { + assert(typeof item.url === "string" && item.url.startsWith("https://"), `${style.slug}.${groupName} has bad url`); + assert(typeof item.title === "string" && item.title.length > 0, `${style.slug}.${groupName} missing title`); + assert(typeof item.note === "string" && item.note.length >= 12, `${style.slug}.${groupName} missing useful note for ${item.url}`); + } + } +} + +if (errors.length) { + console.error("STYLE REFERENCE CHECK FAILED:\n" + errors.join("\n")); + process.exit(1); +} + +console.log(`style reference check passed: ${designStyles.length} styles covered`); +``` + +- [x] **Step 2: Add npm script** + +In `package.json`, add: + +```json +"check:style-refs": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/check-style-references.mjs" +``` + +- [x] **Step 3: Add capture preflight summary** + +In `scripts/capture-references.mjs`, import `designStyles`: + +```js +import { designStyles } from "../src/data/designStyles.ts"; +``` + +Add this before launching Chromium: + +```js +const knownReferenceSlugs = new Set(Object.keys(references).filter((key) => !key.startsWith("_"))); +const missingReferenceSlugs = designStyles.map((style) => style.slug).filter((slug) => !knownReferenceSlugs.has(slug)); + +if (missingReferenceSlugs.length > 0) { + console.log(`\n⚠️ Missing reference entries: ${missingReferenceSlugs.length}`); + console.log(` ${missingReferenceSlugs.join(", ")}\n`); +} +``` + +- [x] **Step 4: Verify failure before adding all references** + +Run: + +```powershell +npm run check:style-refs +``` + +Expected now: + +```text +STYLE REFERENCE CHECK FAILED: +missing references for international-style +``` + +- [x] **Step 5: Commit** + +```powershell +git add package.json scripts/check-style-references.mjs scripts/capture-references.mjs +git commit -m "Add style reference coverage validation" +``` + +--- + +## Task 2: Discover Pinterest, Awwwards, And Dribbble References For Every Style + +**Files:** +- Modify: `scripts/style-references.json` + +- [ ] **Step 1: Use a fixed search pattern per style** + +For each style slug, search and review all of these source patterns: + +```text +Pinterest: {style.nameEn} website design inspiration pinterest +Awwwards: {style.nameEn} website design awwwards +Dribbble: {style.nameEn} website design dribbble +Real sites: {style.nameEn} brand website examples +Archive or guide: {style.nameEn} web design style guide +``` + +Examples: + +```text +Pinterest: swiss design website design inspiration pinterest +Awwwards: swiss design website design awwwards +Dribbble: swiss design website design dribbble +Real sites: swiss design brand website examples +Archive or guide: swiss design web design style guide +``` + +- [ ] **Step 2: Add missing reference entries by category** + +Add entries for every slug listed in the Style Inventory. Use this as a concrete entry shape, then replace the style and references with researched matches for each slug: + +```json +"minimalism": { + "sites": [ + { "url": "https://linear.app", "title": "Linear", "note": "Restrained typography, quiet surfaces, compact spacing, and product-focused hierarchy inform the minimalism tokens." }, + { "url": "https://www.apple.com", "title": "Apple", "note": "Large negative space, disciplined image scale, precise type rhythm, and low-noise navigation inform the layout and copy density." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=minimalist%20website%20design", "title": "Pinterest - Minimalist Website Design", "note": "Moodboard reference for restrained layouts, neutral palettes, whitespace, and understated composition patterns." }, + { "url": "https://www.awwwards.com/websites/minimalism/", "title": "Awwwards - Minimalism Websites", "note": "High-quality web execution reference for minimal interactions, typography, layout proportion, and detail restraint." }, + { "url": "https://dribbble.com/search/minimalist-website", "title": "Dribbble - Minimalist Website", "note": "UI reference for minimal cards, controls, type scale, and component-level visual vocabulary." } + ] +} +``` + +Rules: + +- Use real sites for `sites` when possible. +- Use museum/archive pages for historical styles when active brand sites are misleading. +- Use Pinterest, Awwwards, and Dribbble for every style, even when the best link is a search/result page rather than a curated category page. +- Avoid adding references whose visual language is merely adjacent. +- Keep notes specific: mention typography, spacing, shape, color, texture, grid, motion, or density. + +- [ ] **Step 3: Verify reference coverage** + +Run: + +```powershell +npm run check:style-refs +``` + +Expected: + +```text +style reference check passed: 88 styles covered +``` + +- [ ] **Step 4: Capture selected references locally** + +Run a sites-only capture first: + +```powershell +npm run capture:refs -- --sites-only +``` + +Expected: + +```text +Done +Captured: 176 +Failed: 0 +``` + +If some live sites block capture, keep the URL in `style-references.json`, add a precise note, and capture the remaining references. Do not commit `public/references/`. + +- [ ] **Step 5: Commit** + +```powershell +git add scripts/style-references.json +git commit -m "Expand platform reference coverage for all design styles" +``` + +--- + +## Task 3: Add Explicit Style Briefs And Remove Generated Copy + +**Files:** +- Modify: `src/data/designStyles.ts` +- Modify: `scripts/check-data.mjs` + +- [ ] **Step 1: Add explicit style brief data** + +Introduce a slug-keyed `styleBriefs` record near `styleSeedTuples`: + +```ts +type StyleBrief = { + summary: string; + description: string; + visualFeatures: string[]; + colorPalette: string[]; + typography: string[]; + layoutTraits: string[]; + useCases: string[]; + goodFor: string[]; + cautions: string[]; + representativeTraits: string[]; + avoidTraits: string[]; + tokenIntent: string; +}; + +const styleBriefs: Record = { + minimalism: { + summary: "Minimalism uses restraint, whitespace, and precise hierarchy so content feels calm and intentional.", + description: "Minimalism should feel quieter than a generic modern UI, with large negative space, restrained contrast, and very few decorative moves. It relies on proportion, alignment, and type scale instead of ornaments. The representative version should look closer to Linear, Stripe, or Muji than a blank wireframe. It must preserve one memorable visual signal so the result does not become anonymous.", + visualFeatures: [ + "Large uninterrupted whitespace around core content.", + "Thin rules or subtle surface shifts instead of heavy cards.", + "One restrained accent used for navigation state or CTA only.", + "Precise grid alignment with few competing focal points." + ], + colorPalette: [ + "Warm off-white or cool white base.", + "Near-black text with a muted gray secondary scale.", + "One low-saturation accent.", + "Very light borders for surface separation." + ], + typography: [ + "Clean sans-serif display with moderate weight.", + "Small uppercase metadata labels.", + "Comfortable body line height with restrained tracking." + ], + layoutTraits: [ + "Single-column or quiet two-column structure.", + "Large section spacing.", + "Low card density.", + "CTA placement that does not compete with content." + ], + useCases: ["Product overview", "Studio portfolio", "Documentation landing", "Premium service introduction"], + goodFor: ["SaaS", "Design studios", "Architecture", "Editorial portfolios"], + cautions: [ + "Do not remove so much detail that the page becomes generic.", + "Do not rely on color alone for hierarchy.", + "Avoid crowded card grids." + ], + representativeTraits: ["Whitespace", "Precision", "Restraint", "Single accent"], + avoidTraits: ["Generic empty boxes", "Decorative gradients"], + tokenIntent: "Use airy spacing, thin borders, no shadow, restrained weights, and near-neutral palette so the style is driven by proportion rather than decoration." + } +}; +``` + +Use `minimalism` as the pattern for all 88 entries. Do not leave temporary or generic entries. + +- [ ] **Step 2: Replace generated fields in `buildStyle()`** + +Replace generated copy in `buildStyle()`: + +```ts +const brief = styleBriefs[seed.slug]; +``` + +Then set: + +```ts +summary: brief.summary, +description: brief.description, +visualFeatures: brief.visualFeatures, +colorPalette: brief.colorPalette, +typography: brief.typography, +layoutTraits: brief.layoutTraits, +useCases: brief.useCases, +goodFor: brief.goodFor, +cautions: brief.cautions, +``` + +Keep generated `related` only until a later task replaces it with explicit related styles. + +- [ ] **Step 3: Add data checks for explicit copy** + +In `scripts/check-data.mjs`, add: + +```js +for (const s of designStyles) { + assert(!s.summary.includes(`${s.nameKo}은 `), `style ${s.slug} still has generated summary`); + assert(!s.description.includes("범주 안에서"), `style ${s.slug} still has generated description`); + assert(s.visualFeatures.every((item) => item.length >= 12), `style ${s.slug} has weak visualFeatures`); + assert(s.layoutTraits.every((item) => item.length >= 8), `style ${s.slug} has weak layoutTraits`); +} +``` + +- [ ] **Step 4: Verify** + +Run: + +```powershell +npm run check:data +npm run lint +npm run build +``` + +Expected: + +```text +data check passed: 88 styles, 10 categories +``` + +- [ ] **Step 5: Commit** + +```powershell +git add src/data/designStyles.ts scripts/check-data.mjs +git commit -m "Replace generated style copy with explicit briefs" +``` + +--- + +## Task 4: Make Palettes Explicit For All 88 Styles + +**Files:** +- Modify: `src/data/designStyles.ts` +- Modify: `scripts/check-data.mjs` + +- [ ] **Step 1: Replace hash palette fallback** + +In `styleSeeds`, replace: + +```ts +palette: palettes[slug] ?? paletteBank[Math.abs(hashSlug(slug)) % paletteBank.length], +``` + +with: + +```ts +palette: palettes[slug], +``` + +- [ ] **Step 2: Add a missing-palette guard** + +Before `styleSeeds`, add: + +```ts +for (const [slug] of styleSeedTuples) { + if (!palettes[slug]) { + throw new Error(`Missing palette for design style: ${slug}`); + } +} +``` + +- [ ] **Step 3: Add explicit palettes for all missing slugs** + +For every style slug, add a researched 9-color palette. This is a concrete shape example: + +```ts +"minimalism": { + base: "#F7F6F2", + surface: "#FFFFFF", + text: "#171717", + mutedText: "#6F6B63", + primary: "#111111", + accent: "#B9ADA0", + accent2: "#D9D2C7", + accent3: "#8B908A", + border: "#E5E0D8", +}, +``` + +Palette rules: + +- `base`, `surface`, `text`, and `border` must preserve readable contrast. +- `accent`, `accent2`, and `accent3` must reflect the representative references. +- Neighboring styles in the same category must not share identical palettes. +- Historic styles should use era-specific color relationships rather than trendy defaults. + +- [ ] **Step 4: Strengthen data check** + +In `scripts/check-data.mjs`, add: + +```js +const paletteSignatures = new Map(); +for (const s of designStyles) { + const signature = [ + s.palette.base, + s.palette.surface, + s.palette.text, + s.palette.primary, + s.palette.accent, + s.palette.accent2, + s.palette.accent3, + s.palette.border, + ].join("|"); + const existing = paletteSignatures.get(signature) ?? []; + existing.push(s.slug); + paletteSignatures.set(signature, existing); +} + +for (const [signature, slugs] of paletteSignatures) { + assert(slugs.length === 1, `duplicate palette signature: ${slugs.join(", ")}`); +} +``` + +- [ ] **Step 5: Verify** + +Run: + +```powershell +npm run check:data +npm run lint +npm run build +``` + +- [ ] **Step 6: Commit** + +```powershell +git add src/data/designStyles.ts scripts/check-data.mjs +git commit -m "Make all design style palettes explicit" +``` + +--- + +## Task 5: Make Token Overrides Explicit For All 88 Styles + +**Files:** +- Modify: `src/data/designStyles.ts` +- Modify: `scripts/check-data.mjs` + +- [ ] **Step 1: Raise tuned style target** + +In `scripts/check-data.mjs`, replace: + +```js +assert(tunedStyleTokenSlugs.length >= 24, `expected at least 24 tuned style token overrides, got ${tunedStyleTokenSlugs.length}`); +``` + +with: + +```js +assert(tunedStyleTokenSlugs.length === designStyles.length, `expected all ${designStyles.length} styles to have tuned token overrides, got ${tunedStyleTokenSlugs.length}`); +``` + +- [ ] **Step 2: Add override completeness checks** + +In `scripts/check-data.mjs`, add: + +```js +for (const s of designStyles) { + assert(tunedStyleTokenSlugs.includes(s.slug), `style ${s.slug} missing explicit token override`); + assert(typeof s.tokens.decoration.effect === "string", `style ${s.slug} missing decoration effect`); + assert(["left", "center", "split"].includes(s.tokens.layout.heroVariant), `style ${s.slug} bad heroVariant`); + assert(["minimal", "boxed", "underline"].includes(s.tokens.layout.navStyle), `style ${s.slug} bad navStyle`); +} +``` + +- [ ] **Step 3: Add non-color overrides for all styles** + +For every slug in `styleSeedTuples`, add `styleTokenOverrides[slug]` that changes at least two of: + +- `typography` +- `shape` +- `space` +- `decoration` +- `layout` + +Token rules: + +- `minimalism`, `swiss-design`, `grid-system`, and `flat-design` must not share the same token signature. +- `luxury`, `old-money`, `classic`, `neoclassic`, `baroque`, `rococo`, and `art-deco` must use distinct type/shape/spacing behaviors. +- `cyberpunk`, `neon-noir`, `rave-style`, `ai-aesthetic`, and `hologram-style` must differ beyond neon color. +- `kawaii`, `pastel-style`, `bubble-design`, `toy-design`, and `claymorphism` must differ in radius, shadow, density, and surface behavior. +- `streetwear`, `graffiti`, `punk`, `grunge`, and `indie-sleaze` must differ in texture/effect and density. + +- [ ] **Step 4: Add token signature duplicate guard** + +In `scripts/check-data.mjs`, add: + +```js +const tokenSignatures = new Map(); +for (const s of designStyles) { + const signature = [ + s.tokens.typography.displayFont, + s.tokens.typography.weightDisplay, + s.tokens.typography.tracking, + s.tokens.typography.headingScale, + s.tokens.shape.radius, + s.tokens.shape.radiusPill, + s.tokens.shape.borderWidth, + s.tokens.shape.borderStyle, + s.tokens.space.density, + s.tokens.space.gap, + s.tokens.space.padScale, + s.tokens.decoration.effect, + s.tokens.layout.heroVariant, + s.tokens.layout.navStyle, + s.tokens.layout.alignment, + ].join("|"); + const existing = tokenSignatures.get(signature) ?? []; + existing.push(s.slug); + tokenSignatures.set(signature, existing); +} + +for (const [signature, slugs] of tokenSignatures) { + assert(slugs.length <= 2, `token signature reused too often: ${slugs.join(", ")}`); +} +``` + +- [ ] **Step 5: Verify** + +Run: + +```powershell +npm run check:data +npm run lint +npm run build +``` + +- [ ] **Step 6: Commit** + +```powershell +git add src/data/designStyles.ts scripts/check-data.mjs +git commit -m "Tune tokens for every design style" +``` + +--- + +## Task 6: Expand Sample Rendering Beyond 10 Generic Types + +**Files:** +- Modify: `src/data/designStyles.ts` +- Modify: `src/components/design-style/DesignStyleSampleRenderer.tsx` + +- [ ] **Step 1: Add sample variants** + +Extend `DesignStyleSampleType` with concrete variants: + +```ts +export type DesignStyleSampleType = + | "minimal-editorial" + | "modernist-grid" + | "swiss-poster-grid" + | "japandi-product" + | "brutalist-poster" + | "anti-design-chaos" + | "maximalist-pattern" + | "glitch-interface" + | "retro-commerce" + | "y2k-browser" + | "bauhaus-composition" + | "cyber-dashboard" + | "neon-noir-terminal" + | "hologram-interface" + | "luxury-product" + | "art-deco-lobby" + | "baroque-editorial" + | "organic-brand" + | "botanical-journal" + | "craft-market" + | "kawaii-app" + | "comic-panel" + | "toy-shelf" + | "street-campaign" + | "graffiti-wall" + | "punk-zine" + | "magazine-layout" + | "newspaper-front" + | "collage-board" + | "saas-landing" + | "material-dashboard" + | "glass-panel-ui" + | "neumorphic-controls" + | "clay-ui"; +``` + +- [ ] **Step 2: Implement variant renderers** + +In `DesignStyleSampleRenderer.tsx`, add one function per new variant. Each function must: + +- Use `SampleFrame`. +- Use `styleTokenVars(style)` through existing `sampleVariables`. +- Render a concrete webpage-like surface, not only abstract boxes. +- Keep text inside bounds at 390px. +- Avoid nested cards inside cards. + +- [ ] **Step 3: Re-map every style to a specific sample variant** + +Update every `styleSeedTuples` entry with the most accurate variant. Examples: + +```ts +["swiss-design", "스위스 디자인", "Swiss Design", "모던 / 미니멀", "스위스 포스터 전통의 엄격한 그리드와 산세리프 질서를 웹 화면에 적용하는 스타일", ["swiss", "grid", "typography"], "swiss-poster-grid"], +["y2k", "Y2K", "Y2K", "레트로 / 빈티지", "2000년대 초 웹의 크롬, 글로스, 버블, 글리터 감각을 현대적으로 재구성하는 스타일", ["y2k", "chrome", "gloss"], "y2k-browser"], +["punk", "펑크", "Punk", "스트리트 / 서브컬처", "찢긴 지면, 거친 복사 질감, 저항적 메시지를 앞세우는 zine 기반 웹 스타일", ["punk", "rebellious", "raw"], "punk-zine"], +``` + +- [ ] **Step 4: Verify visual coverage** + +Run: + +```powershell +npm run lint +npm run build +``` + +Then use Playwright to capture `/styles` and one style detail page per sample type. + +Expected: + +- No sample type is blank. +- No page has horizontal overflow at 390px. +- Neighboring styles in the same category are visually distinguishable. + +- [ ] **Step 5: Commit** + +```powershell +git add src/data/designStyles.ts src/components/design-style/DesignStyleSampleRenderer.tsx +git commit -m "Expand representative design style sample variants" +``` + +--- + +## Task 7: Final Style QA Report + +**Files:** +- Create: `docs/style-research/README.md` +- Create: `docs/style-research/2026-06-04-style-redesign-qa.md` +- Modify: `README.md` +- Modify: `README.ko.md` + +- [ ] **Step 1: Create research README** + +Create `docs/style-research/README.md`: + +```md +# Style Research Workflow + +Style references are stored in `scripts/style-references.json`. + +Reference screenshots are local-only and saved under `public/references/`, which is gitignored because the screenshots can include copyrighted third-party pages. + +## Commands + +```bash +npm run check:style-refs +npm run capture:refs -- --sites-only +npm run check:data +npm run lint +npm run build +``` + +## Quality Rules + +- Each style must have at least 2 real site or archive references. +- Each style must include Pinterest, Awwwards, and Dribbble references. +- Each style must have explicit copy, palette, and token overrides. +- Each style must be visually distinguishable from neighboring styles in the same category. +- Captured screenshots are for local research only and must not be committed. +``` + +- [ ] **Step 2: Create QA report** + +Create `docs/style-research/2026-06-04-style-redesign-qa.md` with: + +```md +# Style Redesign QA + +## Verification Commands + +- [ ] `npm run check:style-refs` +- [ ] `npm run check:data` +- [ ] `npm run lint` +- [ ] `npm run build` + +## Visual QA + +- [ ] `/styles` desktop +- [ ] `/styles` mobile 390px +- [ ] One detail page per category +- [ ] One detail page per sample variant +- [ ] `/studio?style=cyberpunk&layout=dashboard-layout` +- [ ] `/studio?style=luxury&layout=product-demo-layout` +- [ ] `/components` + +## Findings + +Record screenshots and notes here after QA. Keep third-party reference screenshots out of git. +``` + +- [ ] **Step 3: Update README files** + +In `README.md`, add under "Adding a Design Style": + +```md +Before adding or changing a design style, update `scripts/style-references.json` and run `npm run check:style-refs`. Reference screenshots are captured locally with `npm run capture:refs -- --sites-only` and are not committed. +``` + +In `README.ko.md`, add: + +```md +디자인 형식을 추가하거나 수정하기 전에 `scripts/style-references.json`을 먼저 업데이트하고 `npm run check:style-refs`를 실행합니다. 참고 스크린샷은 `npm run capture:refs -- --sites-only`로 로컬에만 저장하며 커밋하지 않습니다. +``` + +- [ ] **Step 4: Verify final gates** + +Run: + +```powershell +npm run check:style-refs +npm run check:data +npm run lint +npm run build +``` + +Expected: + +```text +style reference check passed: 88 styles covered +data check passed: 88 styles, 10 categories +``` + +- [ ] **Step 5: Commit** + +```powershell +git add docs/style-research README.md README.ko.md +git commit -m "Document representative style research workflow" +``` + +--- + +## Progress Log + +- [x] 2026-06-04: User identified that current styles do not yet feel representative enough and asked to find the earlier reference notes. +- [x] 2026-06-04: Found `scripts/style-references.json` as the existing reference memo. It covers 12 styles and is consumed by `scripts/capture-references.mjs`. +- [x] 2026-06-04: Confirmed current implementation has 88 styles, 24 tuned token overrides, 12 reference-backed styles, 64 mostly untuned styles, and 76 styles without reference entries. +- [x] 2026-06-04: User clarified that reference work must include additional matching sources for each style, specifically Pinterest, Awwwards, and Dribbble, not only existing real-site references. +- [x] 2026-06-04: Completed the first per-style pass for `minimalism`: refreshed Linear, Apple, Stripe, Pinterest, Awwwards, and Dribbble references; added targeted reference validation; rewrote copy, palette, tokens, research brief, and a dedicated sample renderer; verified desktop and mobile renders with Playwright. +- [x] 2026-06-04: Completed the second per-style pass for `modernism`: added Bauhaus-Archiv, MoMA, Vitra, AIM, Pinterest, Awwwards, and Dribbble references; separated it from quiet minimalism with functional grid, primary color blocks, black structure, explicit copy, palette, tokens, research brief, and a dedicated web-like sample renderer; verified desktop and mobile renders with Playwright. +- [x] 2026-06-04: Completed the next modern/minimal pass through `warm-minimal`: added Swiss, International, Scandinavian, Japandi, and Warm Minimal references; rewrote copy, palettes, tokens, research briefs, and dedicated web-like sample renderers; fixed mobile card overflow; verified `/styles` plus all five detail pages at desktop and 390px mobile. +- [x] 2026-06-04: Completed the next representative pass through `retro-futurism`: added references, copy, palettes, token overrides, and dedicated web-like samples for `soft-minimal`, `high-end-minimal`, `brutalism`, `new-brutalism`, `anti-design`, `maximalism`, `glitch-art`, `deconstructivism`, `avant-garde`, `postmodernism`, `retro`, `vintage`, `seventies-retro`, `eighties-retro`, `nineties-graphic`, `y2k`, and `retro-futurism`. Verified targeted references for 24 styles, data, lint, build, and browser QA across `/styles` plus the 17 detail pages at desktop and 390px mobile. Reference capture completed for target real-site sources after replacing inaccessible URLs with captureable equivalents. +- [x] 2026-06-04: Refined `retro-futurism` after visual review: added NASA JPL `Visions of the Future` as a primary reference; moved the style away from dark sci-fi console language toward Space Age travel-poster advertising, Atomic/Googie motifs, cream/coral/turquoise color, ticket-style destination cards, and browser-verified desktop/mobile rendering. +- [x] 2026-06-04: Refined `high-end-minimal` through `vintage` after visual review: rebuilt the 11 sample renderers as distinct real-web surfaces, including luxury product detail, raw HTML index, neo-brutalist creator dashboard, anti-design link hub, maximalist pattern market, glitch diagnostic interface, deconstructive architecture exhibition, avant-garde cultural program, Memphis product portal, retro radio shop, and vintage mail-order catalog. Verified targeted references, data, lint, build, in-app browser rendering, and Playwright desktop/mobile overflow checks. +- [x] 2026-06-04: Reworked the brutalism pair after visual review and additional research: updated `brutalism` toward raw content, underlined links, default-like forms, table/file-directory structure, and no shadow; updated `new-brutalism` toward Gumroad/component-library product UI with flat fills, 3px outlines, hard shadows, dashboard widgets, and explicit token references. Verified references, data, lint, build, in-app browser QA, and Playwright desktop/mobile overflow checks. +- [x] 2026-06-04: Reworked `anti-design` through `glitch-art` after visual review and additional source checks: tightened `anti-design` into an awkward but clickable link portal, `maximalism` into a layered pattern-commerce campaign backed by FARM Rio, Meow Wolf, and Liberty London, and `glitch-art` into a diagnostic distortion console backed by Cyberpunk, SarahwebFX, and Patatap. +- [x] 2026-06-04: Corrected `anti-design` after user reference feedback: moved away from neon link-hub/brutalist-poster language toward Bryantcodes and Dribbble anti-design references, with a creative-developer portfolio shell, huge hand-drawn neon gestures, irregular dark hero panel, off-grid project cards, and updated tags/research metadata. diff --git a/package.json b/package.json index b6a638e..65352b2 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "start": "next start", "lint": "eslint", "check:data": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/check-data.mjs", + "check:style-refs": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/check-style-references.mjs", "capture:refs": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/capture-references.mjs" }, "engines": { diff --git a/scripts/capture-references.mjs b/scripts/capture-references.mjs index 3e5726c..6b74020 100644 --- a/scripts/capture-references.mjs +++ b/scripts/capture-references.mjs @@ -20,6 +20,7 @@ import { mkdir, writeFile } from "node:fs/promises"; import { existsSync } from "node:fs"; import { join, dirname } from "node:path"; import { fileURLToPath } from "node:url"; +import { designStyles } from "../src/data/designStyles.ts"; import references from "./style-references.json" with { type: "json" }; const __dirname = dirname(fileURLToPath(import.meta.url)); @@ -34,6 +35,24 @@ const slugsToCapture = targetSlugs.length > 0 ? targetSlugs : Object.keys(references).filter((k) => !k.startsWith("_")); +const allStyleSlugs = designStyles.map((style) => style.slug); +const knownStyleSlugs = new Set(allStyleSlugs); + +function printCoverageSummary() { + const referenceSlugs = Object.keys(references).filter((key) => !key.startsWith("_")); + const referenceSlugSet = new Set(referenceSlugs); + const missingSlugs = allStyleSlugs.filter((slug) => !referenceSlugSet.has(slug)); + const unknownSlugs = referenceSlugs.filter((slug) => !knownStyleSlugs.has(slug)); + + console.log(` Reference coverage: ${referenceSlugs.length}/${allStyleSlugs.length} styles`); + if (missingSlugs.length > 0) { + console.log(` Missing style references: ${missingSlugs.join(", ")}`); + } + if (unknownSlugs.length > 0) { + console.log(` Unknown reference slugs: ${unknownSlugs.join(", ")}`); + } +} + const VIEWPORT = { width: 1440, height: 900 }; const TIMEOUT = 20_000; @@ -90,6 +109,8 @@ async function capture() { console.log(`\n📸 Capturing reference screenshots`); console.log(` Styles: ${slugsToCapture.join(", ")}`); console.log(` Mode: ${sitesOnly ? "sites only" : "sites + galleries"}\n`); + printCoverageSummary(); + console.log(""); const browser = await chromium.launch({ headless: true }); const context = await browser.newContext({ viewport: VIEWPORT }); @@ -113,13 +134,18 @@ async function capture() { const sites = entry.sites ?? []; const galleries = sitesOnly ? [] : (entry.galleries ?? []); - const page = await context.newPage(); + let page = await context.newPage(); for (const item of sites) { const result = await capturePage(page, item, outDir, `site`); if (result.ok && !result.skipped) total++; else if (!result.ok) failed++; else skipped++; + + if (!result.ok) { + await page.close().catch(() => {}); + page = await context.newPage(); + } } for (const item of galleries) { @@ -127,6 +153,11 @@ async function capture() { if (result.ok && !result.skipped) total++; else if (!result.ok) failed++; else skipped++; + + if (!result.ok) { + await page.close().catch(() => {}); + page = await context.newPage(); + } } await page.close(); diff --git a/scripts/check-style-references.mjs b/scripts/check-style-references.mjs new file mode 100644 index 0000000..f6fb8c3 --- /dev/null +++ b/scripts/check-style-references.mjs @@ -0,0 +1,61 @@ +// scripts/check-style-references.mjs +import { designStyles } from "../src/data/designStyles.ts"; +import references from "./style-references.json" with { type: "json" }; + +const args = process.argv.slice(2).filter((arg) => !arg.startsWith("--")); +const allSlugs = designStyles.map((style) => style.slug); +const knownSlugs = new Set(allSlugs); +const slugsToCheck = args.length > 0 ? args : allSlugs; +const errors = []; + +function assert(condition, message) { + if (!condition) errors.push(message); +} + +function itemLabel(slug, groupName, index) { + return `${slug}.${groupName}[${index}]`; +} + +for (const slug of args) { + assert(knownSlugs.has(slug), `unknown style slug requested: ${slug}`); +} + +for (const key of Object.keys(references)) { + if (key.startsWith("_")) continue; + assert(knownSlugs.has(key), `reference entry has unknown style slug: ${key}`); +} + +for (const slug of slugsToCheck) { + const entry = references[slug]; + assert(entry, `missing references for ${slug}`); + if (!entry) continue; + + const sites = entry.sites ?? []; + const galleries = entry.galleries ?? []; + + assert(Array.isArray(entry.sites), `references.${slug}.sites must be an array`); + assert(Array.isArray(entry.galleries), `references.${slug}.galleries must be an array`); + assert(sites.length >= 2, `${slug} needs at least 2 real site or archive references`); + assert(galleries.length >= 3, `${slug} needs Pinterest, Awwwards, and Dribbble references`); + + const galleryUrls = galleries.map((item) => item.url); + assert(galleryUrls.some((url) => typeof url === "string" && url.includes("pinterest.")), `${slug} missing Pinterest reference`); + assert(galleryUrls.some((url) => typeof url === "string" && url.includes("awwwards.")), `${slug} missing Awwwards reference`); + assert(galleryUrls.some((url) => typeof url === "string" && url.includes("dribbble.")), `${slug} missing Dribbble reference`); + + for (const [groupName, items] of [["sites", sites], ["galleries", galleries]]) { + for (const [index, item] of items.entries()) { + const label = itemLabel(slug, groupName, index); + assert(typeof item.url === "string" && item.url.startsWith("https://"), `${label} has bad url`); + assert(typeof item.title === "string" && item.title.trim().length > 0, `${label} missing title`); + assert(typeof item.note === "string" && item.note.trim().length >= 24, `${label} needs a specific note`); + } + } +} + +if (errors.length) { + console.error("STYLE REFERENCE CHECK FAILED:\n" + errors.join("\n")); + process.exit(1); +} + +console.log(`style reference check passed: ${slugsToCheck.length} styles covered`); diff --git a/scripts/style-references.json b/scripts/style-references.json index 4132203..00fb834 100644 --- a/scripts/style-references.json +++ b/scripts/style-references.json @@ -3,25 +3,251 @@ "minimalism": { "sites": [ - { "url": "https://linear.app", "title": "Linear", "note": "타이포, 넓은 여백, 모노크롬 — 현대 SaaS 미니멀의 교과서" }, - { "url": "https://stripe.com", "title": "Stripe", "note": "여백·그리드·타이포 비율이 매우 정교한 미니멀 B2B" }, - { "url": "https://www.muji.com", "title": "Muji", "note": "일본식 절제 미니멀, 오프화이트 배경 + 로우 채도" } + { "url": "https://linear.app", "title": "Linear", "note": "Muted palette, spacious layout, sharp typography, and restrained product surfaces define modern SaaS minimalism." }, + { "url": "https://www.apple.com", "title": "Apple", "note": "Generous white space, product-first composition, neutral color, and very low visual noise anchor premium minimalism." }, + { "url": "https://stripe.com", "title": "Stripe", "note": "Precise grid rhythm, restrained copy density, thin dividers, and controlled accent use show minimalism for complex B2B content." } ], "galleries": [ - { "url": "https://www.awwwards.com/websites/minimal/", "title": "Awwwards — Minimal", "note": "수상작 모음 — 타이포/여백 토큰 참고용" }, - { "url": "https://dribbble.com/tags/minimalist-web-design", "title": "Dribbble — Minimalist Web Design" } + { "url": "https://www.pinterest.com/web_design_mini_blog/web-design-inspiration-minimalist/", "title": "Pinterest - Web Design Inspiration Minimalist", "note": "Moodboard reference for white space, neutral palettes, thin rules, sparse product imagery, and quiet composition patterns." }, + { "url": "https://www.awwwards.com/websites/minimalist-websites/", "title": "Awwwards - Minimalist Websites", "note": "Award-gallery reference for high-quality minimal web execution, interaction restraint, layout proportion, and typographic detail." }, + { "url": "https://dribbble.com/tags/minimalist-website", "title": "Dribbble - Minimalist Website", "note": "UI reference for minimal cards, interface hierarchy, button restraint, muted surfaces, and component-level visual vocabulary." } + ] + }, + + "modernism": { + "sites": [ + { "url": "https://www.bauhaus.de/en/", "title": "Bauhaus-Archiv / Museum für Gestaltung", "note": "Historical design institution reference for functional typography, modular information, black structure, and modernist graphic discipline." }, + { "url": "https://www.moma.org/", "title": "MoMA", "note": "Museum reference for modernist institutional hierarchy, large type, direct navigation, and rational event/content modules." }, + { "url": "https://www.vitra.com/en-us/home", "title": "Vitra", "note": "Product and furniture reference for modernist object culture, functional categories, clear grids, and disciplined product storytelling." }, + { "url": "https://aim.obys.agency/", "title": "AIM - AI Modernism of Kharkiv", "note": "Contemporary web reference for explicit modernist graphics, strong typography, geometric composition, and structured digital storytelling." } + ], + "galleries": [ + { "url": "https://kr.pinterest.com/pinewatt/modernism/", "title": "Pinterest - Modernism", "note": "Moodboard reference for modernist graphic layouts, geometric marks, primary color accents, asymmetric grids, and poster-like structure." }, + { "url": "https://www.awwwards.com/websites/modern/", "title": "Awwwards - Modern Websites", "note": "Gallery reference for contemporary modern web execution, including architecture, cultural, and modernist-coded digital projects." }, + { "url": "https://dribbble.com/tags/modernist", "title": "Dribbble - Modernist", "note": "UI and graphic reference for modernist interface modules, geometric symbols, strict grids, and high-contrast typography." } + ] + }, + + "soft-minimal": { + "sites": [ + { "url": "https://normcph.com/project/soft-minimal-2/", "title": "Norm Architects - Soft Minimal", "note": "Concept reference for gentle restraint, tactile neutrals, soft light, and human-centered minimal composition." }, + { "url": "https://www.vellum.studio/", "title": "Vellum Studio", "note": "Interior studio reference for low-contrast warm surfaces, calm portfolio pacing, and quiet service-oriented modules." }, + { "url": "https://www.toogood.com/", "title": "Toogood", "note": "Design studio reference for softened editorial minimalism, sculptural product rhythm, and restrained off-white brand storytelling." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=soft%20minimal%20website%20design", "title": "Pinterest - Soft Minimal Website Design", "note": "Moodboard reference for cream neutrals, gentle shadows, rounded editorial cards, and low-pressure web service layouts." }, + { "url": "https://www.awwwards.com/awwwards/collections/minimal/", "title": "Awwwards - Minimal Collection", "note": "Closest gallery reference for polished minimal sites that use soft pacing, subtle surface separation, and restrained typography." }, + { "url": "https://dribbble.com/search/soft%20minimal%20website", "title": "Dribbble - Soft Minimal Website", "note": "UI reference for soft forms, neutral cards, approachable service blocks, and gentle conversion components." } + ] + }, + + "high-end-minimal": { + "sites": [ + { "url": "https://www.aesop.com", "title": "Aesop", "note": "Premium retail reference for disciplined product storytelling, refined spacing, muted material color, and controlled interaction detail." }, + { "url": "https://www.jilsander.com", "title": "Jil Sander", "note": "Fashion reference for austere luxury minimalism, precise product grids, quiet typography, and severe neutral composition." }, + { "url": "https://www.toteme.com", "title": "Toteme", "note": "Luxury fashion reference for image-led restraint, exact spacing, black-and-cream hierarchy, and editorial commerce modules." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=high%20end%20minimal%20website%20design", "title": "Pinterest - High End Minimal Website Design", "note": "Moodboard reference for luxury whitespace, refined serif and sans typography, premium product framing, and controlled neutral palettes." }, + { "url": "https://www.awwwards.com/websites/luxury/", "title": "Awwwards - Luxury Websites", "note": "Award-gallery reference for high-end web execution, premium imagery, restrained motion, and careful editorial pacing." }, + { "url": "https://dribbble.com/search/luxury%20minimal%20website", "title": "Dribbble - Luxury Minimal Website", "note": "UI reference for refined product detail pages, elegant navigation, premium cards, and spare conversion layouts." } ] }, "brutalism": { "sites": [ - { "url": "https://www.balenciaga.com", "title": "Balenciaga", "note": "패션 브루탈리즘 — 검정 배경, 굵은 산세리프, 각진 레이아웃" }, - { "url": "https://brutalistwebsites.com", "title": "Brutalist Websites", "note": "브루탈리즘 전문 갤러리 사이트 — 실제 예시 풍부" }, - { "url": "https://www.bloomberg.com", "title": "Bloomberg", "note": "에디토리얼 브루탈리즘 — 높은 정보 밀도, 굵은 타이포" } + { "url": "https://brutalistwebsites.com", "title": "Brutalist Websites", "note": "Reference archive for raw HTML structure, default-looking controls, hard borders, and deliberately plain web composition." }, + { "url": "https://brutalist-web.design/", "title": "Brutalist Web Design", "note": "Guideline reference for readable raw content, underlined links, button-like buttons, normal scrolling, and performance-first web construction." }, + { "url": "https://www.secession.at", "title": "Secession", "note": "Cultural reference for table-like structure, strict columns, plain surfaces, and brutalist institutional web rhythm." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=brutalist%20website%20design", "title": "Pinterest - Brutalist Website Design", "note": "Moodboard reference for raw typography, stark black-white layouts, exposed boxes, and intentionally severe web surfaces." }, + { "url": "https://www.awwwards.com/awwwards/collections/brutalism/", "title": "Awwwards - Brutalism Collection", "note": "Gallery reference for award-level brutalist executions, including hard grids, exposed UI, oversized type, and rough interaction cues." }, + { "url": "https://dribbble.com/tags/brutalist_website", "title": "Dribbble - Brutalist Website", "note": "UI reference for brutalist cards, thick borders, raw navigation, stark CTAs, and component-level layout tension." } + ] + }, + + "new-brutalism": { + "sites": [ + { "url": "https://gumroad.com", "title": "Gumroad", "note": "Product reference for playful digital brutalism, thick outline cards, blunt commerce hierarchy, and saturated accent blocks." }, + { "url": "https://neubrutalism.com/", "title": "Neubrutalism Guide", "note": "Design-language reference for flat fills, thick outlines, hard shadows, square corners, and commercial product UI token systems." }, + { "url": "https://neobrutalism.dev/", "title": "Neo Brutalism UI", "note": "Component reference for offset shadows, heavy borders, direct controls, high-contrast panels, and web-native neo-brutalist rules." }, + { "url": "https://www.brutxui.site/docs", "title": "BrutxUI", "note": "Component-library reference for neo-brutalist SaaS, dashboard, form, pricing, and utility interfaces with configurable borders and hard shadows." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=neo%20brutalism%20web%20design", "title": "Pinterest - Neo Brutalism Web Design", "note": "Moodboard reference for chunky outlines, playful shadows, saturated panels, and intentionally simple app interfaces." }, + { "url": "https://www.awwwards.com/awwwards/collections/brutalism/", "title": "Awwwards - Brutalism Collection", "note": "Gallery reference for brutalist and neo-brutalist web executions, hard-edged modules, and expressive web-native structures." }, + { "url": "https://dribbble.com/tags/neo-brutalism", "title": "Dribbble - Neo Brutalism", "note": "UI reference for neo-brutalist dashboards, cards, buttons, pricing blocks, and high-contrast product surfaces." } + ] + }, + + "anti-design": { + "sites": [ + { "url": "https://bryantcodes.art/", "title": "Bryantcodes", "note": "Creative developer portfolio reference for massive hand-drawn neon gestures, irregular dark focal forms, experimental web craft, and project-led storytelling." }, + { "url": "https://www.superbad.com", "title": "Superbad", "note": "Historical web reference for intentionally awkward composition, early-web friction, clashing visuals, and anti-polished navigation." }, + { "url": "https://thehtml.review/", "title": "The HTML Review", "note": "Independent web reference for strange editorial systems, raw HTML feeling, unexpected layouts, and handcrafted anti-design energy." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=anti%20design%20website", "title": "Pinterest - Anti Design Website", "note": "Moodboard reference for clashing layouts, deliberate imbalance, uncomfortable type scale, and anti-commercial web composition." }, + { "url": "https://www.awwwards.com/websites/experimental/", "title": "Awwwards - Experimental Websites", "note": "Gallery reference for unconventional web systems, broken expectations, experimental navigation, and intentionally unstable visual rhythm." }, + { "url": "https://dribbble.com/tags/anti-design", "title": "Dribbble - Anti Design", "note": "UI reference for anti-design portfolios, experimental app shots, scribbled overlays, off-grid cards, and weird but intentional digital surfaces." } + ] + }, + + "maximalism": { + "sites": [ + { "url": "https://farmrio.com/", "title": "FARM Rio", "note": "Fashion maximalism reference for saturated prints, joyful pattern density, tropical color, and expressive product storytelling." }, + { "url": "https://meowwolf.com/", "title": "Meow Wolf", "note": "Immersive arts reference for maximal color, layered worlds, dense visual storytelling, and experience-led web composition." }, + { "url": "https://www.libertylondon.com", "title": "Liberty London", "note": "Retail reference for textile pattern density, floral maximalism, heritage color, and layered commerce modules." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=maximalist%20website%20design", "title": "Pinterest - Maximalist Website Design", "note": "Moodboard reference for saturated color, layered pattern, dense composition, eclectic type, and decorative web scenes." }, + { "url": "https://www.awwwards.com/websites/colorful/", "title": "Awwwards - Colorful Websites", "note": "Closest gallery reference for award-level maximal color, bold visual systems, ornamental motion, and dense campaign pages." }, + { "url": "https://dribbble.com/tags/maximalism", "title": "Dribbble - Maximalism", "note": "UI reference for pattern-rich landing pages, expressive product cards, layered hero modules, and decorative component systems." } + ] + }, + + "glitch-art": { + "sites": [ + { "url": "https://www.cyberpunk.net", "title": "Cyberpunk 2077 Official", "note": "Commercial reference for error-like overlays, neon distortion, aggressive digital panels, and high-energy sci-fi interface rhythm." }, + { "url": "https://www.sarahwebfx.com/lab.html", "title": "SarahwebFX Distortion Lab", "note": "Browser-based glitch reference for VHS, CRT, RGB split, pixel sort, binary overlays, glitch blocks, and live distortion controls." }, + { "url": "https://patatap.com", "title": "Patatap", "note": "Interactive reference for audiovisual pulses, reactive digital marks, simple controls, and playful glitch-adjacent feedback." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=glitch%20website%20design", "title": "Pinterest - Glitch Website Design", "note": "Moodboard reference for RGB splits, broken scanlines, noisy panels, digital corruption, and distorted typography." }, + { "url": "https://www.awwwards.com/websites/experimental/", "title": "Awwwards - Experimental Websites", "note": "Gallery reference for interactive experimental sites, digital distortion, non-linear motion, and unconventional interface effects." }, + { "url": "https://dribbble.com/search/glitch%20website", "title": "Dribbble - Glitch Website", "note": "UI reference for glitch dashboards, corrupted type treatments, scanline overlays, and cyber interface modules." } + ] + }, + + "deconstructivism": { + "sites": [ + { "url": "https://www.moma.org/calendar/exhibitions/1813", "title": "MoMA - Deconstructivist Architecture", "note": "Historical reference for fragmented structure, broken geometry, spatial tension, and deconstructivist visual principles." }, + { "url": "https://www.coop-himmelblau.at", "title": "Coop Himmelb(l)au", "note": "Architecture reference for angular fragments, asymmetric space, sharp structural overlays, and engineered visual disruption." }, + { "url": "https://www.zaha-hadid.com/?lang=en-US", "title": "Zaha Hadid Architects", "note": "Architecture reference for dynamic deconstructive forms, sharp spatial movement, and complex project-driven visual structure." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=deconstructivism%20website%20design", "title": "Pinterest - Deconstructivism Website Design", "note": "Moodboard reference for broken grids, sliced panels, tilted forms, architectural fragments, and tense editorial composition." }, + { "url": "https://www.awwwards.com/websites/experimental/", "title": "Awwwards - Experimental Websites", "note": "Gallery reference for unconventional structures, fragmented navigation, dynamic composition, and architecture-adjacent web work." }, + { "url": "https://dribbble.com/search/deconstructivism%20web%20design", "title": "Dribbble - Deconstructivism Web Design", "note": "UI reference for angular cards, displaced content blocks, skewed editorial layouts, and fractured hero systems." } + ] + }, + + "avant-garde": { + "sites": [ + { "url": "https://www.serpentinegalleries.org", "title": "Serpentine Galleries", "note": "Art institution reference for experimental editorial hierarchy, cultural programming, unexpected rhythm, and contemporary exhibition pages." }, + { "url": "https://canopycanopycanopy.com/", "title": "Triple Canopy", "note": "Publishing reference for conceptual editorial systems, unusual reading pace, art-critical typography, and non-commercial structure." }, + { "url": "https://walkerart.org", "title": "Walker Art Center", "note": "Museum reference for bold cultural navigation, flexible editorial modules, and progressive institutional visual language." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=avant%20garde%20website%20design", "title": "Pinterest - Avant Garde Website Design", "note": "Moodboard reference for experimental typography, art-poster composition, asymmetry, and cultural web layouts." }, + { "url": "https://www.awwwards.com/websites/experimental/", "title": "Awwwards - Experimental Websites", "note": "Gallery reference for forward-looking web work, unusual navigation, expressive typography, and conceptual interaction systems." }, + { "url": "https://dribbble.com/search/avant%20garde%20website", "title": "Dribbble - Avant Garde Website", "note": "UI reference for avant-garde landing pages, editorial experiments, angular typography, and gallery-style modules." } + ] + }, + + "postmodernism": { + "sites": [ + { "url": "https://www.memphis-milano.com", "title": "Memphis Milano", "note": "Primary postmodern reference for Memphis forms, bright geometric surfaces, ironic color, and playful product presentation." }, + { "url": "https://www.vitra.com/en-us/magazine/details/the-memphis-group", "title": "Vitra - The Memphis Group", "note": "Design-history reference for postmodern pattern, anti-functional color, expressive furniture, and cultural context." }, + { "url": "https://designmuseum.org/exhibitions/memphis-plastic-field", "title": "Design Museum - Memphis: Plastic Field", "note": "Museum reference for postmodern exhibition framing, graphic motifs, playful material, and Memphis visual vocabulary." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=postmodern%20website%20design%20memphis", "title": "Pinterest - Postmodern Memphis Website Design", "note": "Moodboard reference for Memphis patterns, playful geometry, ironic type, and colorful postmodern web composition." }, + { "url": "https://www.awwwards.com/websites/colorful/", "title": "Awwwards - Colorful Websites", "note": "Closest gallery reference for postmodern-adjacent color, expressive geometry, layered campaign pages, and playful digital rhythm." }, + { "url": "https://dribbble.com/search/postmodern%20website", "title": "Dribbble - Postmodern Website", "note": "UI reference for Memphis cards, mismatched shapes, colorful product modules, and ironic interface treatments." } + ] + }, + + "retro": { + "sites": [ + { "url": "https://poolside.fm", "title": "Poolside FM", "note": "Retro web reference for nostalgia, playful media interface, warm color, and intentionally analog browsing cues." }, + { "url": "https://radiooooo.com", "title": "Radiooooo", "note": "Music experience reference for time-travel navigation, nostalgic color, map-like interaction, and retro audio discovery." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for historical web aesthetics, period UI patterns, typography, palettes, and layout conventions." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=retro%20website%20design", "title": "Pinterest - Retro Website Design", "note": "Moodboard reference for nostalgic palettes, rounded badges, vintage-inspired web graphics, and playful commerce layouts." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Gallery reference for modern retro web executions, nostalgic imagery, period color, and contemporary interaction polish." }, + { "url": "https://dribbble.com/search/retro%20website", "title": "Dribbble - Retro Website", "note": "UI reference for retro landing pages, badge systems, diner-style cards, and nostalgic product screens." } + ] + }, + + "vintage": { + "sites": [ + { "url": "https://www.filson.com", "title": "Filson", "note": "Heritage retail reference for rugged catalog rhythm, aged neutrals, serif accents, and practical vintage product storytelling." }, + { "url": "https://www.levi.com", "title": "Levi's", "note": "Heritage apparel reference for archival denim tone, classic commerce modules, and vintage Americana brand cues." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for older web layouts, historic graphics, period typography, and document-like page structure." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=vintage%20website%20design", "title": "Pinterest - Vintage Website Design", "note": "Moodboard reference for paper texture, muted ink, heritage badges, classic catalog grids, and aged color systems." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Closest gallery reference for vintage and retro web executions, heritage color, editorial pacing, and archival atmosphere." }, + { "url": "https://dribbble.com/search/vintage%20website", "title": "Dribbble - Vintage Website", "note": "UI reference for vintage catalogs, badges, serif headings, paper-like cards, and heritage product pages." } + ] + }, + + "seventies-retro": { + "sites": [ + { "url": "https://www.houseplant.com", "title": "Houseplant", "note": "Lifestyle commerce reference for warm 70s color, rounded typography, product character, and relaxed editorial modules." }, + { "url": "https://www.rollingstone.com", "title": "Rolling Stone", "note": "Media reference for 70s cultural heritage, strong editorial identity, music nostalgia, and bold magazine hierarchy." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for period web interpretation, old interface rhythm, nostalgic graphics, and historical color cues." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=70s%20retro%20website%20design", "title": "Pinterest - 70s Retro Website Design", "note": "Moodboard reference for groovy curves, warm orange and avocado palettes, psychedelic patterns, and relaxed retro layouts." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Gallery reference for contemporary retro sites that reinterpret 70s color, soft shapes, and nostalgic campaign structure." }, + { "url": "https://dribbble.com/search/70s%20website%20design", "title": "Dribbble - 70s Website Design", "note": "UI reference for 70s landing pages, groovy badges, wavy modules, and warm product cards." } + ] + }, + + "eighties-retro": { + "sites": [ + { "url": "https://poolside.fm", "title": "Poolside FM", "note": "Interface reference for 80s media nostalgia, lo-fi desktop cues, bright controls, and playful analog-digital interaction." }, + { "url": "https://www.cyberpunk.net", "title": "Cyberpunk 2077 Official", "note": "Commercial reference for neon futurist palettes, dark interface panels, sci-fi campaign hierarchy, and high-contrast digital drama." }, + { "url": "https://windows93.net", "title": "Windows 93", "note": "Desktop-web reference for retro OS windows, pixel-era controls, playful app framing, and 80s/90s digital nostalgia." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=80s%20retro%20website%20design", "title": "Pinterest - 80s Retro Website Design", "note": "Moodboard reference for neon grids, synthwave gradients, VHS graphics, and arcade-style web surfaces." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Gallery reference for retro-futurist and 80s-inspired sites, neon motion, dark stages, and nostalgic interaction cues." }, + { "url": "https://dribbble.com/search/synthwave%20website", "title": "Dribbble - Synthwave Website", "note": "UI reference for synthwave dashboards, neon panels, arcade buttons, and dark retro digital layouts." } + ] + }, + + "nineties-graphic": { + "sites": [ + { "url": "https://www.spacejam.com/1996/", "title": "Space Jam 1996", "note": "Historic web reference for 90s graphics, tiled backgrounds, image-heavy navigation, and early-web composition." }, + { "url": "https://windows93.net", "title": "Windows 93", "note": "Retro desktop reference for playful window chrome, pixel controls, chaotic app surfaces, and 90s computing nostalgia." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for historical 90s web layouts, visual tropes, browser-era UI, and graphic density." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=90s%20graphic%20website%20design", "title": "Pinterest - 90s Graphic Website Design", "note": "Moodboard reference for loud patterns, early digital graphics, sticker-like elements, and zine-style web layouts." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Gallery reference for modern retro sites that reinterpret 90s web energy, collage density, and graphic nostalgia." }, + { "url": "https://dribbble.com/search/90s%20website%20design", "title": "Dribbble - 90s Website Design", "note": "UI reference for 90s landing pages, desktop windows, bold stickers, and high-energy graphic modules." } + ] + }, + + "y2k": { + "sites": [ + { "url": "https://www.webdesignmuseum.org/exhibitions/y2k-aesthetic-in-web-design", "title": "Web Design Museum - Y2K Aesthetic", "note": "Archive reference for early-2000s web design, chrome effects, optimistic digital color, and period interface conventions." }, + { "url": "https://www.blingee.com", "title": "Blingee", "note": "Living web reference for glitter graphics, decorative internet nostalgia, shiny surfaces, and participatory Y2K visual culture." }, + { "url": "https://windows93.net", "title": "Windows 93", "note": "Retro desktop reference for playful legacy UI, pixel controls, layered windows, and early web nostalgia." } ], "galleries": [ - { "url": "https://www.awwwards.com/awwwards/collections/brutalism/", "title": "Awwwards — Brutalism Collection" }, - { "url": "https://dribbble.com/tags/neo-brutalism", "title": "Dribbble — Neo Brutalism" } + { "url": "https://www.pinterest.com/ideas/y2k-website-design-inspiration/893524089634/", "title": "Pinterest - Y2K Website Design Inspiration", "note": "Moodboard reference for chrome, gradients, bubble type, glitter, plastic surfaces, and early-2000s web optimism." }, + { "url": "https://www.awwwards.com/websites/y2k/", "title": "Awwwards - Y2K Websites", "note": "Gallery reference for contemporary Y2K web executions, glossy gradients, nostalgic interfaces, and cyber-pop visual systems." }, + { "url": "https://dribbble.com/search/y2k%20website", "title": "Dribbble - Y2K Website", "note": "UI reference for Y2K landing pages, shiny cards, bubble navigation, chrome-like widgets, and playful web portals." } + ] + }, + + "retro-futurism": { + "sites": [ + { "url": "https://www.jpl.nasa.gov/galleries/visions-of-the-future/", "title": "NASA JPL - Visions of the Future", "note": "Official space-tourism poster reference for retro-future travel advertising, WPA-inspired composition, optimistic destinations, and scientific imagination." }, + { "url": "https://retro-futurism.com/", "title": "Retro Futurism", "note": "Archive reference for past visions of the future, space-age graphics, optimistic technology motifs, and period futurist imagery." }, + { "url": "https://paleofuture.com/", "title": "Paleofuture", "note": "Cultural archive reference for historical future speculation, mid-century technology imagery, and optimistic space-age narrative." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for historical digital aesthetics, period UI systems, and older web interpretations of future-facing design." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=retro%20futurism%20website%20design", "title": "Pinterest - Retro Futurism Website Design", "note": "Moodboard reference for space-age curves, chrome panels, pastel planets, vintage technology, and optimistic future nostalgia." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Closest gallery reference for retro-futurist web execution, nostalgic future visuals, playful motion, and modern polish." }, + { "url": "https://dribbble.com/search/retro%20futurism%20website", "title": "Dribbble - Retro Futurism Website", "note": "UI reference for space-age landing pages, rocket dashboards, rounded control panels, and future-nostalgia product screens." } ] }, @@ -110,40 +336,68 @@ ] }, - "y2k": { + "swiss-design": { "sites": [ - { "url": "https://www.webdesignmuseum.org/exhibitions/y2k-aesthetic-in-web-design", "title": "Web Design Museum — Y2K", "note": "실제 2000년대 초 웹디자인 아카이브 — 색·폰트·레이아웃 원형 확인" }, - { "url": "https://www.blingee.com", "title": "Blingee", "note": "크롬·글리터·버블 Y2K 에너지 살아있는 실제 사이트" } + { "url": "https://www.swissinfo.ch", "title": "SWI swissinfo.ch", "note": "Swiss editorial reference for strict news hierarchy, multilingual content modules, objective typography, and restrained public-service layout." }, + { "url": "https://www.sbb.ch", "title": "SBB", "note": "Swiss transport reference for functional navigation, red system accent, timetable-like structure, and highly legible information design." }, + { "url": "https://webdesignlookbook.webflow.io/", "title": "Web Design Lookbook - Swiss Design", "note": "Style study reference for Swiss grid principles, type-led hierarchy, structured margins, and clarity-first digital layouts." } ], "galleries": [ - { "url": "https://www.pinterest.com/ideas/y2k-website-design-inspiration/893524089634/", "title": "Pinterest — Y2K Website Design Inspiration", "note": "Y2K 웹디자인 무드보드 — 크롬, 그라디언트, 버블폰트 참고" }, - { "url": "https://www.behance.net/search/projects/y2k%20website", "title": "Behance — Y2K Website Projects" }, - { "url": "https://webflow.com/blog/y2k-aesthetic", "title": "Webflow Blog — Y2K Aesthetic Guide" } + { "url": "https://www.pinterest.com/tonyxj/swiss-grids/", "title": "Pinterest - Swiss Grids", "note": "Moodboard reference for poster grids, asymmetric columns, type blocks, red markers, and modular Swiss-style spacing." }, + { "url": "https://www.awwwards.com/websites/Switzerland/", "title": "Awwwards - Switzerland Websites", "note": "Gallery reference for Swiss web executions, local agencies, clean grid systems, and restrained precision in digital interfaces." }, + { "url": "https://dribbble.com/tags/swiss-grid", "title": "Dribbble - Swiss Grid", "note": "UI and poster reference for grid-driven cards, baseline rhythm, numbered layouts, and strict typographic composition." } ] }, - "maximalism": { + "international-style": { "sites": [ - { "url": "https://www.gucci.com", "title": "Gucci", "note": "패션 맥시멀리즘 — 패턴 레이어, 에클렉틱 타이포, 강한 색" }, - { "url": "https://www.versace.com", "title": "Versace", "note": "그리스 모티프 + 골드 + 볼드 패턴 — 과감한 장식성" }, - { "url": "https://www.libertylondon.com", "title": "Liberty London", "note": "꽃무늬·패턴 맥시멀리즘 — 텍스타일 기반 밀도감" } + { "url": "https://www.ibm.com/design/language/", "title": "IBM Design Language", "note": "Global corporate system reference for neutral typography, repeatable components, modular grids, and international product communication." }, + { "url": "https://www.ibm.com/design/language/layout/overview/", "title": "IBM Design Language - Layout", "note": "Layout reference for precise grid behavior, consistent alignment, engineered hierarchy, and corporate-scale design rules." }, + { "url": "https://www.moma.org/", "title": "MoMA", "note": "Institutional reference for universal information structure, objective navigation, and cross-content modules across art, events, and visits." } ], "galleries": [ - { "url": "https://onepagelove.com/tag/maximalist", "title": "One Page Love — Maximalist" }, - { "url": "https://dribbble.com/tags/maximalism", "title": "Dribbble — Maximalism" } + { "url": "https://id.pinterest.com/4340m/international-typographic-style/", "title": "Pinterest - International Typographic Style", "note": "Moodboard reference for objective grids, Helvetica-like typography, asymmetric alignment, and universal information hierarchy." }, + { "url": "https://www.awwwards.com/websites/business-corporate/", "title": "Awwwards - Business & Corporate Websites", "note": "Gallery reference for corporate-scale web systems, rational content architecture, neutral tone, and product/institution clarity." }, + { "url": "https://dribbble.com/search/international%20typographic%20style", "title": "Dribbble - International Typographic Style", "note": "UI and graphic reference for typographic systems, neutral components, grid-based presentation, and corporate information modules." } ] }, - "swiss-design": { + "scandinavian": { + "sites": [ + { "url": "https://www.ikea.com", "title": "IKEA", "note": "Mass-market Scandinavian reference for friendly product navigation, bright surfaces, practical room modules, and approachable home commerce." }, + { "url": "https://www.muuto.com", "title": "Muuto", "note": "Contemporary Scandinavian brand reference for soft color, furniture-led storytelling, generous product cards, and warm minimal composition." }, + { "url": "https://www.nordicnest.com/", "title": "Nordic Nest", "note": "Scandinavian commerce reference for lifestyle categories, pale backgrounds, cozy product density, and practical shopping hierarchy." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=scandinavian%20website%20design", "title": "Pinterest - Scandinavian Website Design", "note": "Moodboard/search reference for light interiors, pale wood, home-product layouts, soft neutrals, and cozy-but-ordered web composition." }, + { "url": "https://www.awwwards.com/websites/minimal/", "title": "Awwwards - Minimal Websites", "note": "Closest gallery reference for refined Scandinavian-adjacent minimal web execution, bright layouts, product calm, and restrained interaction." }, + { "url": "https://dribbble.com/tags/scandinavian", "title": "Dribbble - Scandinavian", "note": "UI and brand reference for Nordic furniture cards, soft product palettes, clean ecommerce modules, and lifestyle interface details." } + ] + }, + + "japandi": { + "sites": [ + { "url": "https://www.karimoku-case.com/creators/", "title": "Karimoku Case - Creators", "note": "Japandi reference for Japanese craft plus Scandinavian restraint, natural materials, quiet furniture presentation, and calm editorial spacing." }, + { "url": "https://normcph.com/project/azabu-residence/", "title": "Norm Architects - Azabu Residence", "note": "Project reference for muted palette, tactile materials, wood warmth, and Japanese-Danish spatial calm in a web editorial format." }, + { "url": "https://normcph.com/project/soft-minimal-2/", "title": "Norm Architects - Soft Minimal", "note": "Concept reference for human-centric restraint, tactility, natural light, and soft-minimal web storytelling that overlaps with Japandi." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=japandi%20website%20design", "title": "Pinterest - Japandi Website Design", "note": "Moodboard/search reference for wood, rice-paper neutrals, interior whitespace, low contrast, and quiet Japanese-Scandinavian layouts." }, + { "url": "https://www.awwwards.com/websites/architecture/", "title": "Awwwards - Architecture Websites", "note": "Closest gallery reference for architectural calm, image-led spaces, restrained motion, and premium interior/architecture web presentation." }, + { "url": "https://dribbble.com/search/japandi", "title": "Dribbble - Japandi", "note": "UI reference for Japandi furniture landings, interior cards, muted e-commerce flows, and calm booking/product layouts." } + ] + }, + + "warm-minimal": { "sites": [ - { "url": "https://www.swissinfo.ch", "title": "Swissinfo", "note": "실제 스위스 정보 포털 — 그리드, 인터내셔널 타이포 시스템" }, - { "url": "https://www.sbb.ch", "title": "SBB 스위스 철도", "note": "기능 중심 그리드 — 스위스 공공 디자인 언어" }, - { "url": "https://www.muji.com", "title": "Muji", "note": "스위스 스타일 응용 — 그리드 질서, 산세리프, 오프화이트" } + { "url": "https://ququstudio.com/en/", "title": "QUQU Design Studio", "note": "Warm minimalist studio reference for cream surfaces, soft interior imagery, quiet navigation, and selected-work portfolio rhythm." }, + { "url": "https://www.vellum.studio/", "title": "Vellum Studio", "note": "Interior studio reference for tranquil warm minimalism, tactile residential imagery, soft brutalist restraint, and calm editorial pacing." }, + { "url": "https://normcph.com/project/soft-minimal-2/", "title": "Norm Architects - Soft Minimal", "note": "Soft-minimal reference for warm neutrals, tactile material language, slower reading rhythm, and human-centered restraint." } ], "galleries": [ - { "url": "https://dribbble.com/tags/swiss-grid", "title": "Dribbble — Swiss Grid", "note": "그리드 시스템 + 타이포 구성 참고" }, - { "url": "https://www.pinterest.com/ideas/swiss-design/", "title": "Pinterest — Swiss Design" }, - { "url": "https://docs.mew.design/blog/swiss-design-style/", "title": "Mew Design — Swiss Style Guide" } + { "url": "https://www.pinterest.com/search/pins/?q=warm%20minimal%20website%20design", "title": "Pinterest - Warm Minimal Website Design", "note": "Moodboard/search reference for cream, taupe, terracotta, soft shadows, natural texture, and welcoming minimal web layouts." }, + { "url": "https://www.awwwards.com/awwwards/collections/minimal/", "title": "Awwwards - Minimal Collection", "note": "Closest gallery reference for quiet minimal sites, soft portfolio pacing, restrained modules, and polished warm-minimal execution cues." }, + { "url": "https://dribbble.com/search/minimal-page", "title": "Dribbble - Minimal Page", "note": "UI reference for warm minimal product pages, soft conversion modules, spacious hero sections, and gently layered neutral components." } ] } } diff --git a/src/components/design-style/DesignStyleCard.tsx b/src/components/design-style/DesignStyleCard.tsx index 79aa30f..81fd7ff 100644 --- a/src/components/design-style/DesignStyleCard.tsx +++ b/src/components/design-style/DesignStyleCard.tsx @@ -16,16 +16,16 @@ export function DesignStyleCard({ isSelected, onSelect, style }: Props) { return (
-
+
-
+

{style.category} diff --git a/src/components/design-style/DesignStyleSampleRenderer.tsx b/src/components/design-style/DesignStyleSampleRenderer.tsx index 675cbeb..d7ea034 100644 --- a/src/components/design-style/DesignStyleSampleRenderer.tsx +++ b/src/components/design-style/DesignStyleSampleRenderer.tsx @@ -114,6 +114,1347 @@ function MinimalEditorial({ compact = false, style }: Props) { ); } +function MinimalismProductSystem({ className, compact = false, style }: Props) { + const metrics = [ + ["MRR", "$48.2k", "+8%"], + ["Active", "1,284", "94%"], + ["Tasks", "32", "12 due"], + ]; + const workItems = [ + ["Launch page", "Ready"], + ["Billing flow", "Review"], + ["Docs update", "Live"], + ]; + + return ( + +

+
+
+ +
+

Northstar

+

Product workspace

+
+
+
+ Overview + Projects + Billing + +
+
+ +
+
+
+

Design system / {style.nameEn}

+

+ Calm product pages for focused teams. +

+
+

+ {style.summary} +

+
+ + Start project + + + View docs + +
+
+ +
+
+
+
+

Workspace overview

+

June release

+
+ On track +
+ +
+ {metrics.map(([label, value, meta]) => ( +
+

{label}

+

{value}

+

{meta}

+
+ ))} +
+ +
+
+
+
+

Progress

+

72%

+
+ +
+
+ +
+
+ +
+ {workItems.map(([label, status]) => ( +
+ {label} + {status} +
+ ))} +
+
+
+
+
+
+ + ); +} + +function ModernismFunctionalGrid({ className, compact = false, style }: Props) { + const modules = [ + ["01", "Archive"], + ["02", "Objects"], + ["03", "Program"], + ]; + + return ( + +
+
+
+ M28 +
+
+ Research + Objects + Program +
+
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+ +
+
+
+

Form follows function

+

+ Function shapes form. +

+
+
+ + +
+
+ +
+
+ {modules.map(([number, label], index) => ( +
+

{number}

+

{label}

+ +
+ ))} +
+ +
+
+
+
+
+ + +
+
+
+ Object index + 1920-1960 +
+
+ +
+ {["Visit", "Collection", "Lecture"].map((label, index) => ( +
+ + {index + 1} + + {label} +
+ ))} +
+
+ +
+

{style.summary}

+ + System + +
+
+
+
+ + ); +} + +function SwissInformationGrid({ className, compact = false, style }: Props) { + const rows = compact ? ["N", "C", "D"] : ["Politics", "Culture", "Economy"]; + const headline = compact ? ["Public", "Briefing"] : ["Clear", "public", "information"]; + + return ( + +
+
+ CH +
+ World + Briefing + Archive +
+ 06.04 +
+
+
+
+

Grid first / Type leads

+

+ {headline.map((line) => ( + + {line} + + ))} +

+
+
+ 01 + Multilingual editorial system +
+
+
+
+ {rows.map((row, index) => ( +
+

0{index + 2}

+

{row}

+
+ ))} +
+
+
+
+ {[84, 64, 92, 52].map((width) => ( + + ))} +
+ + +
+
+
+
+ {style.nameEn} / legibility index +
+
+
+
+ + ); +} + +function InternationalSystemPortal({ className, compact = false, style }: Props) { + const panels = ["Standards", "Grid", "Language"]; + + return ( + +
+
+
+

Global System

+

Design language portal

+
+ Docs +
+
+
+
+

Universal clarity

+

+ One system for every market. +

+
+
+ View guidelines + Use template +
+
+
+
+ {panels.map((panel, index) => ( +
+

0{index + 1}

+

{panel}

+
+ ))} +
+
+ {["Layout grid", "Typography", "Components", "Data states"].map((item, index) => ( +
+ {index + 1} + {item} + Active +
+ ))} +
+
+
+
+ + ); +} + +function ScandinavianCommerceHome({ className, compact = false, style }: Props) { + const products = ["Lounge", "Lighting", "Textiles"]; + + return ( + +
+
+
+

Nord Room

+

Home essentials

+
+ Shop +
+
+
+
+

Spring home edit

+

+ Bright rooms, useful objects. +

+
+
+ New arrivals + Room ideas +
+
+
+ {products.map((product, index) => ( +
+ +
+

{product}

+

From ${[84, 126, 48][index]}

+
+
+ ))} +
+
+
+ + ); +} + +function JapandiSpatialLanding({ className, compact = false, style }: Props) { + return ( + +
+
+ Karuma House + Materials / Stay / Journal +
+
+
+
+

Quiet materials

+

+ Slow rooms for everyday rituals. +

+
+
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+
+
+
+
+
+
+
+

Azabu

+

{style.summary}

+
+
+
+
+
+ + ); +} + +function WarmMinimalStudio({ className, compact = false, style }: Props) { + const works = ["Hallway", "Bedroom", "Dining"]; + + return ( + +
+
+
+

Atelier Warm

+

Interior consultation

+
+ Book +
+
+
+

Selected works

+

+ Soft rooms, clear decisions. +

+

{style.summary}

+
+
+ {works.map((work, index) => ( +
+ + {work} + 0{index + 1} +
+ ))} +
+
+
+ + ); +} + +function SoftMinimalService({ className, compact = false, style }: Props) { + const services = compact ? ["Audit", "Plan", "Launch"] : ["Mindful audit", "Care plan", "Quiet launch"]; + + return ( + +
+
+ Soft Office + Journal / Services / Book +
+
+
+
+

Consultation studio

+

+ Gentle pages for careful decisions. +

+
+
+ Book a call + View packages +
+
+
+
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+ {services.map((service, index) => ( +
+ + {service} + 0{index + 1} +
+ ))} +
+
+
+
+ + ); +} + +function HighEndMinimalProduct({ className, compact = false, style }: Props) { + const details = [ + ["Material", "wool silk / brushed taupe"], + ["Made in", "small atelier, Kyoto"], + ["Delivery", "reserved dispatch"], + ]; + const swatches = [style.palette.surface, style.palette.accent2, style.palette.accent]; + + return ( + +
+
+ Atelier product page + Objects / Service / Bag 01 +
+
+
+
+
+ + +
+
+
+ {swatches.map((color, index) => ( + + ))} +
+
+
+
+

Edition 04 / Objet 219

+

+ One object, three decisions. +

+

+ Quiet retail framing based on material, proportion, and a single decisive purchase action. +

+
+
+
+ {details.map(([label, value]) => ( +
+ {label} + {value} +
+ ))} +
+
+ Reserve object + $680 +
+
+
+
+
+ + ); +} + +function RawBrutalistIndex({ className, compact = false, style }: Props) { + const rows = compact + ? [ + ["01", "notice.txt", "text"], + ["02", "tickets.html", "form"], + ["03", "press/", "dir"], + ] + : [ + ["01", "notice.txt", "plain text"], + ["02", "tickets.html", "default form"], + ["03", "press/index.html", "directory"], + ["04", "manifesto.pdf", "download"], + ["05", "server-log.txt", "raw log"], + ]; + + return ( + +
+
+
+ /public/index.html + no framework / no cards +
+

+ Plain files, real links. +

+
+
+
+ + + + + + + + + + {rows.map(([number, file, type]) => ( + + + + + + ))} + +
nohreftype
{number} + + {file} + + {type}
+
+
+ + + 
+              GET /archive{"\n"}200 text/html{"\n"}back button works
+
+
+
+

+ Buttons look like buttons. Links are underlined. Content is the material. +

+
+ + ); +} + +function NeoBrutalistApp({ className, compact = false, style }: Props) { + const metrics = [ + ["Revenue", "$8,420", style.palette.accent], + ["Orders", "147", style.palette.accent2], + ["Payout", "Fri 09", style.palette.accent3], + ]; + const checklist = ["Landing live", "Checkout tested", "Email queued"]; + + return ( + +
+
+
+ Component kit for loud products. + cmd+k + Ship +
+
+
+

creator product

+

+ Launch the loud template. +

+
+ landing-kit.zip + $29 +
+
+
+
+ {metrics.map(([metric, value, color]) => ( +
+ {metric} + + {value} + +
+ ))} +
+
+ {checklist.map((item, index) => ( +
+ + x + + {item} +
+ ))} +
+
+
+
+ + ); +} + +function AntiDesignLanding({ className, compact = false, style }: Props) { + const projects = [ + ["01", "Handshake", "brand system"], + ["02", "Typeforce 12", "motion type"], + ["03", "Offset", "noise cut"], + ]; + + return ( + +
+
+
+
+
+
+
+ wildweb.studio + work / about / contact +
+
+
+ creative dev portfolio +

+ Wild web work, still usable. +

+

+ I build web experiences for designers with improbable ideas. +

+
+
+
+ selected work + Projects that should have been impossible. +
+ {projects.map(([number, title, meta], index) => ( + + {number} + + {title} + {meta} + + + ))} +
+
+
+ hello @ wildweb.studio + available +
+
+ + ); +} + +function MaximalistPatternMarket({ className, compact = false, style }: Props) { + const items = [ + ["Silk scarf", "$88"], + ["Bloom coat", "$240"], + ["Gold tote", "$132"], + ]; + const badges = ["print drop", "lookbook", "limited"]; + + return ( + +
+
+
+
+ Pattern market + Cart 03 +
+
+
+ +
+ {items.map(([item, price], index) => ( +
+ + + {item} + {price} + +
+ ))} +
+
+
+ {badges.map((badge, index) => ( + + {badge} + + ))} +
+
+ + ); +} + +function GlitchArtInterface({ className, compact = false, style }: Props) { + const meters = [ + ["RGB drift", "84%", style.palette.accent], + ["Frame loss", "39%", style.palette.accent2], + ["Checksum", "91%", style.palette.accent3], + ]; + const logs = [ + "> buffer split at 00:17", + "> scanline memory: dirty", + "> image packet rejected", + ]; + + return ( + +
+
+
+
+
+ ERROR LAB // SIGNAL 04 + REC 00:17 +
+
+
+ {meters.map(([node, value, color]) => ( +
+

{node}

+
+
+
+
+ ))} +
+ {logs.map((log) => ( +

{log}

+ ))} +
+
+
+
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3, style.palette.surface].map((color, index) => ( + + ))} +
+ + +

+ Signal damage is the interface. +

+
+ {[48, 72, 38, 91, 56, 80].map((height, index) => ( + + ))} +
+
+
+
+ + ); +} + +function DeconstructiveExhibition({ className, compact = false, style }: Props) { + const projects = ["Folded hall", "Cut section", "Open void"]; + + return ( + +
+
+ Architecture exhibition + Projects / 12 +
+
+
+
+
+
+

+ Broken grid, built intent. +

+
+
+ {projects.map((project, index) => ( +
+

0{index + 1}

+

{project}

+
+ ))} +
+
+
+ + ); +} + +function AvantGardeEditorial({ className, compact = false, style }: Props) { + const program = ["Talk / 19:30", "Film / black box", "Essay / reading room"]; + + return ( + +
+
+ AG + Program / Publishing + 2026 +
+
+
+

+ Culture should disturb the grid. +

+
+ +

A cultural program page with poster tension, dates, modules, and readable asymmetry.

+
+
+
+ {program.map((item, index) => ( +
+ 0{index + 1} + {item} +
+ ))} +
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+
+
+ + ); +} + +function PostmodernMemphisPortal({ className, compact = false, style }: Props) { + const shapes = ["Chair", "Lamp", "Vase"]; + + return ( + +
+
+
+ Memphis portal + +
+
+
+ $240 / object +

+ Rules are props. +

+
+
+ {shapes.map((shape, index) => ( +
+ +

{shape}

+
+ ))} +
+
+
+ + ); +} + +function RetroDinerShop({ className, compact = false, style }: Props) { + const products = ["Soda", "Vinyl", "Tote"]; + + return ( + +
+
+ Retro radio mart + ON AIR +
+
+
+
+ +
+

+ Tune in, shop later. +

+
+ FM 74.5 summer shelf + play +
+
+
+ {products.map((product, index) => ( +
+ +

{product}

+
+ ))} +
+
+
+ + ); +} + +function VintagePaperCatalog({ className, compact = false, style }: Props) { + const rows = compact ? ["Jacket", "Boot", "Tin"] : ["Wax jacket", "Field boot", "Tool tin", "Archive bag"]; + + return ( + +
+
+
+ Heritage catalog / mail order + Est. 1912 +
+
+
+

+ Archival goods, ordered by hand. +

+ + INSPECTED + +
+
+ {rows.map((row, index) => ( +
+ 0{index + 1} + {row} + ${[48, 92, 18, 64][index]} +
+ ))} +
+
+
+ + ); +} + +function SeventiesGroovyLanding({ className, compact = false, style }: Props) { + const cards = ["Listen", "Shop", "Gather"]; + + return ( + +
+
+
+ Groove house + RSVP +
+
+
+

+ Warm curves for easy days. +

+
+
+ {cards.map((card, index) => ( +
+ +

{card}

+
+ ))} +
+
+
+ + ); +} + +function EightiesSynthConsole({ className, compact = false, style }: Props) { + const tracks = ["FM", "VHS", "Arcade"]; + + return ( + +
+
+
+ SYNTH://88 + ON AIR +
+
+
+

+ Neon signal, midnight grid. +

+
+
+ {tracks.map((track, index) => ( +
+ {track} + +
+ ))} +
+
+
+ + ); +} + +function NinetiesGraphicZine({ className, compact = false, style }: Props) { + const windows = ["Drop", "Links", "Guestbook"]; + + return ( + +
+
+
+ browser window + [x] +
+
+
+

+ Web stickers and loud links. +

+
+
+ {windows.map((window, index) => ( + + {window} + + ))} +
+
+
+ + ); +} + +function Y2KGlossPortal({ className, compact = false, style }: Props) { + const widgets = ["Profile", "Chat", "Hits"]; + + return ( + +
+
+ Crystal portal + login +
+
+
+

+ Glossy widgets for web dreams. +

+
+
+ {widgets.map((widget, index) => ( +
+ +

{widget}

+
+ ))} +
+
+
+ + ); +} + +function RetroFuturismFlightDeck({ className, compact = false, style }: Props) { + const destinations = compact ? ["Moon", "Mars", "Titan"] : ["Lunar resort", "Mars canyons", "Titan seas"]; + + return ( + +
+