release: v0.11.0

apps/site/src/components/Landing.astro

@@ -36,6 +36,12 @@ const copiedLabel = lang === "ko" ? "복사했어요" : "Copied";
             <path d="M3 5.5 8 10l5-4.5" />
           </svg>
         </a>
+        <a class="btn btn-text" href={showcasePath}>
+          {c.outputs.archiveCta}
+          <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true">
+            <path d="M3 8h10M9 4l4 4-4 4" />
+          </svg>
+        </a>
       </div>
     </div>
 
@@ -348,14 +354,22 @@ const copiedLabel = lang === "ko" ? "복사했어요" : "Copied";
 
   .proof-facts > div + div { border-left: var(--line-width) solid var(--line); }
 
-  .proof-facts dt { display: grid; gap: var(--space-2); }
+  .proof-facts dt {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-2);
+    min-width: 0;
+  }
   .proof-value {
     color: var(--accent);
     font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
     font-weight: var(--weight-medium);
     line-height: 1;
+    overflow-wrap: anywhere;
   }
 
+  .proof-facts dt > span { overflow-wrap: anywhere; }
+
   .proof-facts dd {
     margin-top: var(--space-4);
     color: var(--ink-muted);

apps/site/src/components/OutputSpecimens.astro

@@ -213,6 +213,7 @@ const copy = lang === "en"
 
   .direction-stage {
     position: relative;
+    display: flow-root;
     aspect-ratio: 2 / 1;
     overflow: clip;
     background: var(--surface-soft);
@@ -292,10 +293,11 @@ const copy = lang === "en"
   .direction-axis-3 { right: 5%; bottom: 12%; text-align: right; }
 
   .direction-statement {
-    position: absolute;
+    position: relative;
     left: 48%;
-    top: 48%;
     width: min(43%, 18rem);
+    margin-top: 24%;
+    margin-bottom: 5%;
     color: var(--ink);
     font-size: var(--step-1);
     line-height: 1.38;
@@ -637,6 +639,7 @@ const copy = lang === "en"
     .specimen-tokens,
     .specimen-proof { grid-column: 1; margin-top: 0; }
     .direction-stage { aspect-ratio: 16 / 9; }
+    .direction-statement { margin-top: 27%; }
     .type-stage { min-height: 24rem; }
     .proof-stage { grid-template-columns: minmax(0, 1fr); }
     .viewport-family { min-height: 18rem; border-right: 0; border-bottom: var(--line-width) solid var(--line); }

apps/site/src/i18n/landing.ts

@@ -120,7 +120,7 @@ export const landingKo = {
   hero: {
     h1: "AI 코딩에\n디자인을 더합니다",
     lead:
-      "레퍼런스를 조사해 방향을 정하고, 디자인 토큰부터 반응형 구현과 프리플라이트 검증까지 일관된 절차로 연결합니다.",
+      "웹 디자인 원리와 실제 사례를 조사해, 브랜드에 맞는 방향부터 반응형 구현과 실화면 검증까지 연결합니다.",
     command: "npx designpaca",
     primaryCta: "설치 명령 복사",
     secondaryCta: "산출물 살펴보기",
@@ -128,7 +128,7 @@ export const landingKo = {
   outputs: {
     h2: "정한 기준이 코드와 검사까지 이어집니다",
     lead: "레퍼런스에서 고른 원칙은 결정 기록에 남고, 디자인 토큰과 구현 규칙이 되며, 마지막에는 반복 가능한 검사로 확인됩니다.",
-    archiveCta: "설계 예시 보기",
+    archiveCta: "만든 사이트 보기",
   },
   process: {
     h2: "일곱 단계로 판단과 구현을 연결합니다",
@@ -177,18 +177,18 @@ export const landingKo = {
     facts: [
       {
         value: "7",
-        label: "설계 단계",
-        description: "브리프부터 결정 기록까지 0부터 6까지의 단계를 순서대로 수행합니다.",
+        label: "파이프라인",
+        description: "조사, 맥락 판단, 구현, 검증과 결정 기록을 0부터 6까지의 단계로 연결합니다.",
       },
       {
-        value: "15",
-        label: "하드 게이트",
-        description: "오버플로, 대비, 토큰, SEO와 죽은 코드를 완료 전에 확인합니다.",
+        value: "근거 · 맥락",
+        label: "기준을 구분하는 판단",
+        description: "보편적인 사용성 기준과 프로젝트에 맞는 스타일 결정을 분리해 적용합니다.",
       },
       {
-        value: "KO / EN",
-        label: "동등한 콘텐츠 구조",
-        description: "한국어와 영어가 같은 정보 구조와 주요 행동을 공유합니다.",
+        value: "실화면",
+        label: "두 종류의 검토",
+        description: "기능 검사는 자동화하고, 화면에서 읽히는 구성과 위계는 별도로 검토합니다.",
       },
     ],
     details: {
@@ -198,9 +198,9 @@ export const landingKo = {
         "제목, 본문과 버튼의 간격 및 정렬이 토큰 체계를 따르는지 확인합니다.",
         "텍스트와 인터페이스 색의 대비를 측정합니다.",
         "키보드만으로 내비게이션과 주요 행동을 완료할 수 있는지 확인합니다.",
-        "이미지가 목적에 맞게 contain 또는 cover로 표시되는지 확인합니다.",
-        "메타데이터, 언어, 대체 텍스트와 ARIA 라벨이 실제 화면과 일치하는지 확인합니다.",
-        "죽은 선택자, 정의되지 않은 토큰과 불필요한 스크립트를 찾습니다.",
+        "감소 모션과 200% 확대에서도 내용과 주요 행동이 유지되는지 확인합니다.",
+        "실제 전후 화면에서 구성, 위계와 반응형 동작을 함께 검토합니다.",
+        "출처, 메타데이터, 언어, 대체 텍스트와 ARIA 라벨을 화면과 연결하고 토큰·SEO·불필요한 코드를 점검합니다.",
       ],
     },
   },
@@ -243,7 +243,7 @@ export const landingEn = {
   hero: {
     h1: "Design rigor\nfor AI coding",
     lead:
-      "Research references, choose a direction, define tokens, build responsively, and verify the result through one repeatable process.",
+      "Research web design principles and real examples to connect a brand-fit direction with responsive implementation and rendered-screen verification.",
     command: "npx designpaca",
     primaryCta: "Copy install command",
     secondaryCta: "See the deliverables",
@@ -251,7 +251,7 @@ export const landingEn = {
   outputs: {
     h2: "Decisions carry through to code and checks",
     lead: "Principles selected from research are recorded, translated into design tokens and implementation rules, then verified through repeatable checks.",
-    archiveCta: "Browse design examples",
+    archiveCta: "Explore example sites",
   },
   process: {
     h2: "Connect judgment to implementation in seven stages",
@@ -300,18 +300,18 @@ export const landingEn = {
     facts: [
       {
         value: "7",
-        label: "Design stages",
-        description: "Move in order from stage 0, the brief, through stage 6, the decision record.",
+        label: "Pipeline stages",
+        description: "Connect research, contextual judgment, implementation, verification, and decision records from stage 0 through stage 6.",
       },
       {
-        value: "15",
-        label: "Hard gates",
-        description: "Check overflow, contrast, tokens, SEO, and dead code before declaring the work complete.",
+        value: "Evidence · context",
+        label: "Criteria kept distinct",
+        description: "Apply universal usability criteria separately from style decisions that fit the project.",
       },
       {
-        value: "KO / EN",
-        label: "Equivalent content structure",
-        description: "Korean and English share the same information architecture and primary actions.",
+        value: "Rendered screens",
+        label: "Two kinds of review",
+        description: "Automate functional checks, then separately review the composition and hierarchy users actually see.",
       },
     ],
     details: {
@@ -321,9 +321,9 @@ export const landingEn = {
         "Check that heading, body, and button spacing follows the token system.",
         "Measure contrast for text and interface controls.",
         "Complete navigation and primary actions with a keyboard.",
-        "Confirm each image uses contain or cover for its purpose.",
-        "Match metadata, language, alt text, and ARIA labels to the rendered page.",
-        "Flag dead selectors, undefined tokens, and unnecessary scripts.",
+        "Keep content and primary actions available with reduced motion and at 200% zoom.",
+        "Review real before-and-after screens for composition, hierarchy, and responsive behavior.",
+        "Connect sources, metadata, language, alt text, and ARIA labels to the rendered page, then check tokens, SEO, and unnecessary code.",
       ],
     },
   },