教程概述

系列索引: gstack 教程系列

设计管道通过三个阶段将想法转化为生产 HTML。

你将学到

• ✅ /design-consultation — 从零构建设计系统
• ✅ /design-shotgun — 生成带品味记忆的变体
• ✅ /design-html — 带 Pretext 的生产 HTML
• ✅ 框架自动检测
• ✅ 智能 API 路由模式

管道流程

flowchart LR
    A[想法] --> B[/design-consultation]
    B --> C[设计系统]
    C --> D[/design-shotgun]
    D --> E[4-6 个变体]
    E --> F[用户选择]
    F --> G[/design-html]
    G --> H[生产 HTML]

    style B fill:#e1f5ff
    style D fill:#e8f5e9
    style G fill:#fff3e0

/design-consultation — 设计系统构建器

功能

从零构建完整的设计系统：

1. 研究景观 — 竞争对手、模式、趋势
2. 提出创意风险 — 不是安全，而是有意图
3. 编写 DESIGN.md — 颜色、排版、组件、语调
4. 创建组件库 — 按钮、表单、卡片、布局

示例输出

# DESIGN.md

## 品牌身份

**语调**：专业但平易近人。自信而不傲慢。
**基调**：有帮助、清晰、简洁。

## 色彩调色板

| Token | Hex | 用途 |
|-------|-----|------|
| primary | #0066CC | CTA、链接、焦点状态 |
| secondary | #6B7280 | 次要文本、边框 |
| accent | #10B981 | 成功状态、高亮 |
| error | #EF4444 | 错误、破坏性操作 |
| background | #F9FAFB | 页面背景 |
| surface | #FFFFFF | 卡片、模态框 |

## 排版

- **标题**: Inter 600, 32px/40px
- **正文**: Inter 400, 16px/24px
- **小字**: Inter 400, 14px/20px
- **代码**: JetBrains Mono 400, 14px

## 间距比例

| Token | 值 | 用途 |
|-------|-----|------|
| xs | 4px | 图标内边距 |
| sm | 8px | 按钮内边距 |
| md | 16px | 卡片内边距 |
| lg | 24px | 章节内边距 |
| xl | 32px | 页面边距 |

## 组件

- **按钮**: 主要、次要、幽灵变体
- **输入框**: 带标签、错误状态、图标
- **卡片**: 带头部、主体、底部
- **模态框**: 带背景、关闭、操作

何时使用

• 开始新项目
• 品牌重塑
• 创建设计系统
• 设置组件库

/design-shotgun — 视觉探索

功能

生成 4-6 个 AI 原型变体进行比较：

1. 创建变体 — 不同布局、颜色、风格
2. 打开比较面板 — 所有变体在浏览器中并排显示
3. 收集反馈 — “更多留白”、“更粗标题”
4. 学习品味 — 跨会话记住你喜欢什么
5. 迭代 — 根据反馈生成新一轮

工作流

sequenceDiagram
    participant U as 用户
    participant S as /design-shotgun
    participant B as 浏览器

    U->>S: SaaS 应用的落地页
    S->>S: 生成 6 个变体
    S->>B: 打开比较面板
    B->>U: 显示所有变体
    U->>S: "更多留白，更粗标题"
    S->>S: 应用反馈 + 品味记忆
    S->>B: 新变体
    U->>S: "喜欢变体 #2"
    S->>U: 已选择用于 /design-html

品味记忆

gstack 跨会话学习你的偏好：

taste_memory:
  preferences:
    - "喜欢充足留白"
    - "喜欢粗体无衬线标题"
    - "避免背景渐变"
    - "喜欢圆角 (8px)"
    - "使用微妙阴影，不厚重"
  avoids:
    - "千篇一律的英雄区"
    - "无意义渐变"
    - "库存照片背景"

何时使用

• 探索设计方向
• 创意卡住时
• 比较多种方法
• 与利益相关者建立共识

/design-html — 生产 HTML

功能

将批准的原型转化为可交付 HTML：

1. Pretext 计算布局 — 文本重排、高度调整
2. 零依赖 — 30KB 开销，无需框架
3. 框架检测 — 如果检测到则输出 React/Svelte/Vue
4. 智能 API 路由 — 不同页面类型使用不同模式

Pretext 计算布局

传统 AI HTML 在调整大小时会出问题。Pretext 修复了这个问题：

<!-- 传统（调整大小时出错） -->
<div style="height: 400px">
  <h1>固定高度破坏文本重排</h1>
</div>

<!-- Pretext（动态） -->
<div data-pretext="layout">
  <h1 data-pretext="heading">文本自然重排</h1>
</div>
<script src="pretext.js" data-auto></script>

框架检测

gstack 检测你的框架并正确输出：

智能 API 路由

不同页面类型使用不同模式：

示例输出

<!-- 落地页英雄区 - 由 /design-html 生成 -->

<section class="hero" data-pretext="section">
  <div class="hero__container">
    <h1 class="hero__title" data-pretext="heading">
      用先思考再编码的 AI 更快交付
    </h1>
    <p class="hero__subtitle">
      23 位专家。8 个强力工具。一个虚拟工程团队。
    </p>
    <div class="hero__cta-group">
      <a href="/get-started" class="btn btn--primary">
        免费开始
      </a>
      <a href="/demo" class="btn btn--ghost">
        观看演示
      </a>
    </div>
  </div>
</section>

<style>
.hero {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}
.hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}
/* ... 响应式样式 ... */
</style>

<script src="https://cdn.gstack.dev/pretext/1.0.0.min.js" data-auto></script>

完整示例：SaaS 落地页

步骤 1：设计咨询

/design-consultation

我需要一个开发者工具 SaaS 的落地页。
目标受众：初创公司的高级工程师。
竞争对手：Vercel、Linear、Railway。

输出：带颜色、排版、组件的 DESIGN.md

步骤 2：视觉探索

/design-shotgun

为英雄区生成变体。
偏好：极简、开发者导向、支持暗色模式。

输出：比较面板中的 6 个英雄区变体

步骤 3：选择

用户："我喜欢变体 #3，但要有更多留白和
       代码示例而不是插图。"

输出：融入反馈的新变体

步骤 4：生产 HTML

/design-html

将变体 #3 转换为生产 HTML。
框架：React（已检测）。
包含：英雄区、功能部分、定价、页脚。

输出：带 Pretext 布局的可交付 React 组件

技能快速参考

总结

设计管道将想法转化为生产代码：

1. 咨询 — 从零构建设计系统
2. 探索 — 生成带品味记忆的变体
3. 产出 — 带 Pretext 布局的可交付 HTML

关键要点

• ✅ 新项目从 /design-consultation 开始
• ✅ 使用 /design-shotgun 视觉探索
• ✅ 品味记忆学习你的偏好
• ✅ /design-html 输出框架适配的代码

系列导航：

• ← 上一篇: 教程 4：计划审查
• → 下一篇: 教程 6A：浏览器基础
• 返回: 系列索引