Add Landing Page And Ui Design System

Archived: 2026-06-07 · roadmap-id: web-nextjs-builtin-suite

Why

三个紧密关联的问题，本 change 一并解决：

问题一：模板没有对外可展示的入口 用户访问首页只看到 login 页面，无法了解产品、无法建立信任、无法驱动注册——没有 landing page，模板作为 SaaS starter 就是残缺的。

问题二：AI Coding Agent 做出来的 UI 千篇一律（AI Slop） 让 AI 直接生成 UI，得到的是 Inter 字体 + 紫蓝渐变 + 卡片套卡片 + 发光深色模式。这是 AI Slop——看上去精致但没有灵魂、没有辨识度，一眼就认出来是 AI 做的。根本原因：没有设计系统约束 AI，AI 只能用它训练数据里最常见的模板。

问题三：团队不知道如何让 AI Coding Agent 做出精美、有辨识度的页面 这是整个 AI Coding Era 最普遍的困境之一：工具有了，但工作流、设计规范、如何"管理"AI 设计团队的方法论还是空白。

本 change 的解法：

• Landing page：用 shadcn blocks 快速搭建，但在 Impeccable 设计工作流约束下完成，避免 AI Slop
• UI 设计系统：CSS custom properties + OKLCH 色彩 + Tailwind v4 @theme + next-themes 多主题 + mobile-first H5 响应式，构建 AI Coding Agent 可理解、可遵循的 CSS 规范体系；DESIGN.md 作为 AI 的设计上下文锚点
• 平台 apps/docs 新增 UI 设计专题：沉淀"AI 时代如何设计精美 UI"的知识，涵盖设计工作流（Impeccable 四步法）、CSS 设计系统原理、人+机器+AI agent 三位一体的新交互范式，以及给实现 LLM 的素材搜索与深度调研执行框架（规划层给方法论，研究执行由实现 LLM 完成）

Capabilities

New Capabilities

• landing-page：公开 landing page（/(public)/ route group），包含 Hero / Features / How-it-works / CTA / Footer，shadcn blocks + Impeccable 工作流，i18n 支持
• ui-design-system：CSS 设计系统（OKLCH tokens + Tailwind v4 @theme + next-themes + mobile-first responsive）+ DESIGN.md AI 上下文锚点 + Impeccable skill 安装
• ui-design-docs：平台 apps/docs UI 设计专题（工作流 + CSS 系统原理 + anti-patterns + 研究执行框架）

Modified Capabilities

• template-self-config：DESIGN.md 新增；copilot-instructions.md 加入设计系统规范；AGENTS.md 声明 Impeccable 工作流为合法操作

Non-goals

• 不做 Stripe payments / 定价页真实接入（定价区块为占位，payments 是下一个 change）
• 不做自定义图形设计、插图、自制 icon
• 不做 landing page 的 A/B 测试框架
• 不做平台 UI 设计文档的全双语（英文主，中文占位）
• 不做实际的素材搜索和调研（研究框架文档定义 HOW，实现 LLM 负责 DO）
• 不做 Impeccable 的所有 23 个命令的完整集成，MVP 只用 4 个核心命令（craft/critique/polish/adapt）