Rename project to OpenDesignLab

CONTRIBUTING.md

@@ -1,6 +1,6 @@
-# Contributing to openlayout
+# Contributing to OpenDesignLab
 
-Thanks for taking the time to improve openlayout.
+Thanks for taking the time to improve OpenDesignLab.
 
 ## Development setup
 

README.ko.md

@@ -1,14 +1,14 @@
-# openlayout
+# OpenDesignLab
 
 **한국어** | [English](./README.md)
 
-웹사이트 레이아웃과 디자인 형식을 분리해서 고르고, 비교하고, 실제 웹페이지형 프리뷰로 확인하는 Web Layout Library입니다.
+레이아웃, 디자인 형식, 색상표, 컴포넌트 속성을 조합해 실제 웹페이지형 프리뷰와 프롬프트로 확인하는 디자인 랩입니다.
 
-openlayout은 디자인을 시작하기 전에 페이지 구조와 시각 언어를 빠르게 고를 수 있도록 만든 레이아웃/스타일 사전입니다. 96개의 레이아웃, 88개의 디자인 형식, 10개의 스타일 카테고리, 웹페이지형 샘플 렌더러를 제공하며, 각 항목은 추천 용도, 장단점, 반응형 동작, 접근성 체크포인트, 색상표, Tailwind 구현 힌트를 함께 보여줍니다.
+OpenDesignLab은 디자인을 시작하기 전에 페이지 구조와 시각 언어를 빠르게 고를 수 있도록 만든 레이아웃/스타일 조합 랩입니다. 96개의 레이아웃, 88개의 디자인 형식, 10개의 스타일 카테고리, 웹페이지형 샘플 렌더러를 제공하며, 각 항목은 추천 용도, 장단점, 반응형 동작, 접근성 체크포인트, 색상표, Tailwind 구현 힌트를 함께 보여줍니다.
 
 | 항목 | 값 |
 | --- | --- |
-| Repository | https://github.com/pandaofwild/openlayout |
+| Repository | https://github.com/pandaofwild/OpenDesignLab |
 | 마지막 검토일 | 2026-06-04 |
 
 ## 대상 사용자
@@ -23,7 +23,7 @@ openlayout은 디자인을 시작하기 전에 페이지 구조와 시각 언어
 - **Full-stage preview**: 상세 페이지와 비교 페이지에서 레이아웃을 실제 웹페이지 배경처럼 크게 확인합니다.
 - **Floating detail panel**: 기본 화면에는 작은 요약 박스만 두고, 클릭하면 구조 설명과 장단점이 패널로 떠오릅니다.
 - **Compare view**: 최대 3개의 레이아웃을 선택해 추천 용도, 모바일 대응, 밀도, 난이도를 나란히 비교합니다.
-- **Design Style Library**: 88개의 디자인 형식을 카테고리, 태그, 검색어로 탐색하고 상세 페이지에서 색상표와 웹페이지형 샘플을 확인합니다.
+- **Design Style Lab**: 88개의 디자인 형식을 카테고리, 태그, 검색어로 탐색하고 상세 페이지에서 색상표와 웹페이지형 샘플을 확인합니다.
 - **Style application**: `/styles`에서 선택한 디자인 형식이 `/layouts`와 `/layouts/compare`의 프리뷰 톤에 적용되고 localStorage에 유지됩니다.
 - **Studio copy**: `/studio`에서 선택한 Style x Layout 조합의 프롬프트와 self-contained HTML/CSS 코드를 복사할 수 있습니다.
 - **Component dictionary**: `/components`에서 같은 스타일 토큰이 주요 UI 컴포넌트에 어떻게 적용되는지 확인할 수 있습니다.

README.md

@@ -1,14 +1,14 @@
-# openlayout
+# OpenDesignLab
 
 **English** | [한국어](./README.ko.md)
 
-A web layout library for choosing, comparing, and previewing website structures and design styles separately, with real webpage-style previews.
+A design lab for combining layout, style, palette, and component attributes into real webpage-style previews, prompts, and implementation-ready snippets.
 
-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.
+OpenDesignLab 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 |
+| Repository | https://github.com/pandaofwild/OpenDesignLab |
 | Last reviewed | 2026-06-04 |
 
 ## Who It's For
@@ -23,7 +23,7 @@ openlayout is a layout and style dictionary that helps you quickly pick page str
 - **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.
+- **Design Style Lab**: 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`.

package.json

@@ -1,17 +1,17 @@
 {
-  "name": "openlayout",
+  "name": "opendesignlab",
   "version": "0.1.4",
   "private": false,
-  "description": "A web layout and design style library for choosing, comparing, and previewing website structures.",
+  "description": "A design lab for combining layout and style attributes into previews, prompts, and implementation-ready snippets.",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/pandaofwild/openlayout.git"
+    "url": "https://github.com/pandaofwild/OpenDesignLab.git"
   },
   "bugs": {
-    "url": "https://github.com/pandaofwild/openlayout/issues"
+    "url": "https://github.com/pandaofwild/OpenDesignLab/issues"
   },
-  "homepage": "https://github.com/pandaofwild/openlayout#readme",
+  "homepage": "https://github.com/pandaofwild/OpenDesignLab#readme",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

skills/design-style-recommender/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: design-style-recommender
-description: Use when recommending openlayout design styles by brand tone, audience, industry, visual intensity, typography needs, palette direction, or when adding/refining design style catalog entries in this project.
+description: Use when recommending OpenDesignLab design styles by brand tone, audience, industry, visual intensity, typography needs, palette direction, or when adding/refining design style catalog entries in this project.
 ---
 
 # Design Style Recommender
 
-Use this skill inside openlayout when a user needs a visual style direction before applying it to a layout.
+Use this skill inside OpenDesignLab when a user needs a visual style direction before applying it to a layout.
 
 ## Source of Truth
 

skills/layout-recommender/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: layout-recommender
-description: Use when recommending openlayout web layouts by purpose, audience, content density, conversion goal, navigation depth, device priority, or when adding/refining layout catalog entries in this project.
+description: Use when recommending OpenDesignLab web layouts by purpose, audience, content density, conversion goal, navigation depth, device priority, or when adding/refining layout catalog entries in this project.
 ---
 
 # Layout Recommender
 
-Use this skill inside the openlayout project to recommend layouts that match a page purpose.
+Use this skill inside the OpenDesignLab project to recommend layouts that match a page purpose.
 
 ## Source of truth
 

src/app/components/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { ComponentDictionaryView } from "@/components/component-dictionary/ComponentDictionaryView";
 
 export const metadata: Metadata = {
-  title: "Components | openlayout",
+  title: "Components",
   description: "Preview UI components with design style tokens.",
 };
 

src/app/layout.tsx

@@ -5,10 +5,10 @@ import "./globals.css";
 
 export const metadata: Metadata = {
   title: {
-    default: "Web Layout Library",
-    template: "%s | Web Layout Library",
+    default: "OpenDesignLab",
+    template: "%s | OpenDesignLab",
   },
-  description: "웹사이트 설계에 활용할 수 있는 레이아웃 구조 사전",
+  description: "디자인 속성을 조합해 미리보기, 프롬프트, 구현 힌트로 바꾸는 디자인 랩",
 };
 
 export const viewport: Viewport = {
@@ -42,10 +42,10 @@ function RawNavigation() {
     >
       <div className="mx-auto grid max-w-[1720px] grid-cols-[1fr_auto] items-center gap-4 md:grid-cols-[1fr_auto_1fr]">
         <Link
-          className="min-w-0 truncate font-display text-2xl font-bold uppercase leading-none tracking-[-0.05em] text-white md:text-[#1E1E1E]"
+          className="min-w-0 truncate font-display text-2xl font-bold leading-none tracking-[-0.03em] text-white md:text-[#1E1E1E]"
           href="/layouts"
         >
-          Openlayout
+          OpenDesignLab
         </Link>
         <div className="hidden items-center gap-8 md:flex">
           {[
@@ -94,7 +94,9 @@ function RawFooter() {
           <p className="font-display text-5xl font-bold uppercase leading-[0.8] tracking-[-0.05em]">
             Open
             <br />
-            Layout
+            Design
+            <br />
+            Lab
           </p>
           <div className="mt-6 flex gap-3">
             {["GH", "AI", "UI"].map((item) => (
@@ -114,7 +116,7 @@ function RawFooter() {
             ["Studio", "/studio"],
             ["Components", "/components"],
             ["Compare", "/layouts/compare"],
-            ["GitHub", "https://github.com/pandaofwild/openlayout"],
+            ["GitHub", "https://github.com/pandaofwild/OpenDesignLab"],
           ]}
           title="Navigate"
         />
@@ -129,8 +131,8 @@ function RawFooter() {
         <div>
           <p className="raw-label text-[#E4E2DD]/60">Build note</p>
           <p className="mt-4 max-w-xs text-sm leading-6 text-[#E4E2DD]/70">
-            목적을 먼저 정하고, 구조를 고른 뒤, 컴포넌트와 카피를 빠르게
-            반복하는 레이아웃 사전입니다.
+            디자인 속성을 고르고 조합한 뒤, 프리뷰와 프롬프트로 빠르게
+            이어가는 디자인 랩입니다.
           </p>
         </div>
       </div>
@@ -139,7 +141,7 @@ function RawFooter() {
           2026
         </p>
         <p className="pb-3 text-right text-xs font-medium uppercase tracking-[0.14em] text-[#E4E2DD]/60">
-          openlayout / web structure library
+          opendesignlab / preview and prompt lab
         </p>
       </div>
     </footer>

src/app/layouts/page.tsx

@@ -5,8 +5,8 @@ import { AppliedStyleStrip } from "@/components/style-preset/AppliedStyleStrip";
 import { WebLayoutExplorer } from "@/components/web-layout/WebLayoutExplorer";
 
 export const metadata: Metadata = {
-  title: "Web Layout Library",
-  description: "웹사이트 설계에 활용할 수 있는 레이아웃 구조 사전",
+  title: "Layout Library",
+  description: "OpenDesignLab에서 웹사이트 구조를 고르고 프리뷰와 프롬프트로 조합합니다.",
 };
 
 export default function WebLayoutsPage() {
@@ -26,13 +26,14 @@ export default function WebLayoutsPage() {
               <h1 className="raw-display max-w-full text-[4.35rem] uppercase min-[420px]:text-[5.3rem] sm:text-[8rem] md:text-[12rem] xl:text-[14rem] 2xl:text-[15.5rem]">
                 Open
                 <br />
-                <span className="ml-3 block sm:ml-8 md:ml-32 xl:ml-52">Layout</span>
+                <span className="ml-3 block sm:ml-8 md:ml-24 xl:ml-40">Design</span>
+                <span className="block sm:ml-16 md:ml-48 xl:ml-72">Lab</span>
               </h1>
             </div>
             <div className="min-w-0 max-w-[20.5rem] pb-2 sm:max-w-md lg:col-start-2">
               <p className="text-lg leading-7 text-[#1E1E1E] sm:text-xl sm:leading-8">
-                웹사이트 구조를 고르고, 실제 화면처럼 비교하고, 바로 구현 조건으로
-                바꾸는 레이아웃 사전입니다.
+                디자인 속성을 조합해 실제 화면처럼 비교하고, 바로 쓸 수 있는
+                프롬프트와 구현 조건으로 바꾸는 디자인 랩입니다.
               </p>
               <div className="mt-8 flex flex-wrap items-center gap-5">
                 <Link

src/app/studio/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { StudioView } from "@/components/studio/StudioView";
 
 export const metadata: Metadata = {
-  title: "Studio | openlayout",
+  title: "Studio",
   description: "Combine a design style with a layout and preview the result.",
 };
 

src/app/styles/[slug]/page.tsx

@@ -28,7 +28,7 @@ export async function generateMetadata({
 
   return {
     description: style.summary,
-    title: `${style.nameKo} | Design Style Library`,
+    title: `${style.nameKo} | Design Style Lab`,
   };
 }
 

src/app/styles/page.tsx

@@ -4,8 +4,8 @@ import { designStyleCategories, designStyles } from "@/data/designStyles";
 import { DesignStyleLibrary } from "@/components/design-style/DesignStyleLibrary";
 
 export const metadata: Metadata = {
-  title: "Design Style Library",
-  description: "레이아웃 예시에 적용할 수 있는 디자인 형식과 색상표 프리셋",
+  title: "Design Style Lab",
+  description: "OpenDesignLab에서 레이아웃 예시에 적용할 디자인 형식과 색상표를 고릅니다.",
 };
 
 const categories = designStyleCategories;

src/components/style-preset/StylePresetProvider.tsx

@@ -37,7 +37,8 @@ type StylePresetContextValue = {
 type StyleVariables = CSSProperties & Record<`--style-${string}`, string>;
 
 const StylePresetContext = createContext<StylePresetContextValue | null>(null);
-const storageKey = "openlayout-style-preset-v1";
+const legacyStorageKey = "openlayout-style-preset-v1";
+const storageKey = "opendesignlab-style-preset-v1";
 
 const defaultPrompt =
   "브랜드, 웹, 그래픽, UI 디자인에 활용할 수 있는 디자인 풍 사전. 대표 이미지는 카드 썸네일처럼 명확하고 색감이 강해야 한다.";
@@ -103,7 +104,7 @@ function styleVariablesFor(palette: DesignStylePalette): StyleVariables {
 function readStoredStyleState(): StoredStyleState {
   if (typeof window === "undefined") return defaultStyleState;
 
-  const saved = window.localStorage.getItem(storageKey);
+  const saved = window.localStorage.getItem(storageKey) ?? window.localStorage.getItem(legacyStorageKey);
   if (!saved) return defaultStyleState;
 
   try {
@@ -116,6 +117,7 @@ function readStoredStyleState(): StoredStyleState {
     };
   } catch {
     window.localStorage.removeItem(storageKey);
+    window.localStorage.removeItem(legacyStorageKey);
     return defaultStyleState;
   }
 }

src/lib/exportCode.ts

@@ -10,56 +10,56 @@ function cssVars(style: DesignStyle) {
 
 export function exportDesignCode(style: DesignStyle, layout: WebLayout) {
   return `<!-- ${style.nameKo} x ${layout.nameKo} -->
-<section class="openlayout-export" style="
+<section class="opendesignlab-export" style="
 ${cssVars(style)}
 ">
-  <header class="openlayout-nav">
+  <header class="opendesignlab-nav">
     <strong>${style.nameEn}</strong>
     <nav>${layout.nameEn}</nav>
   </header>
-  <main class="openlayout-hero">
-    <p class="openlayout-kicker">${layout.previewType}</p>
+  <main class="opendesignlab-hero">
+    <p class="opendesignlab-kicker">${layout.previewType}</p>
     <h1>${layout.nameKo}</h1>
     <p>${layout.summary}</p>
     <button>Primary action</button>
   </main>
 </section>
 
 <style>
-.openlayout-export {
+.opendesignlab-export {
   min-height: 100vh;
   padding: calc(2rem * var(--st-pad-scale, 1));
   background: var(--st-base);
   color: var(--st-text);
   font-family: var(--st-font-body);
 }
-.openlayout-nav {
+.opendesignlab-nav {
   display: flex;
   justify-content: space-between;
   gap: var(--st-gap);
   border: var(--st-border-width) var(--st-border-style, solid) rgb(var(--st-border-rgb) / 0.22);
   border-radius: var(--st-radius);
   padding: 1rem;
 }
-.openlayout-hero {
+.opendesignlab-hero {
   display: grid;
   gap: var(--st-gap);
   max-width: 760px;
   margin-top: 4rem;
 }
-.openlayout-kicker {
+.opendesignlab-kicker {
   color: var(--st-accent);
   font-weight: 800;
   text-transform: uppercase;
 }
-.openlayout-hero h1 {
+.opendesignlab-hero h1 {
   font-family: var(--st-font-display);
   font-size: clamp(3rem, 8vw, 7rem);
   line-height: 0.9;
   letter-spacing: var(--st-tracking);
   font-weight: var(--st-weight-display);
 }
-.openlayout-hero button {
+.opendesignlab-hero button {
   width: max-content;
   border: var(--st-border-width) var(--st-border-style, solid) var(--st-primary);
   border-radius: var(--st-radius-pill, var(--st-radius));