ss-page

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Product Page Scaffolder

产品页面搭建工具

When NOT to use

不适用场景

For a single composed pattern within an existing page → use
```
/ss-pattern
```
For multi-page navigation structure → use
```
/ss-flow
```
first
For tweaking an existing page — edit the file directly

Create a new page: $0 Description: $ARGUMENTS

现有页面中的单个组合模式 → 使用
```
/ss-pattern
```
多页面导航结构 → 先使用
```
/ss-flow
```
调整现有页面 — 直接编辑文件

创建新页面：$0 描述：$ARGUMENTS

Instructions

操作步骤

Resolve and read the active design method:

.styleseed/effective-rules.md

and

.styleseed/manifest.json

If missing or stale, invoke
```
/ss-resolve
```
or
```
$ss-resolve
```
from
```
STYLESEED.md
```
```
components/patterns/page-shell.tsx
```
for page layout
```
components/patterns/top-bar.tsx
```
for header pattern
```
components/patterns/bottom-nav.tsx
```
for navigation

Page structure template:

tsx

import { PageShell, PageContent } from "@/components/patterns/page-shell"
import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
import { BottomNav } from "@/components/patterns/bottom-nav"

export default function PageName() {
  return (
    <PageShell recipe="enterprise-workbench">
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Compose the grammar's focal point and recipe-fit sections */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

Apply the selected adapter and recipe:
- Set
```
recipe="<manifest selection.recipe>"
```
  on
```
PageShell
```
  , or
```
data-styleseed-recipe="<id>"
```
  on a custom artifact root.
- Use the lock's viewports and the adapter's responsive contract. Do not assume 430px mobile.
- Use
```
ss-page-padding
```
  ,
```
ss-page-gutter
```
  ,
```
ss-pattern-stack
```
  ,
```
ss-pattern-surface
```
  ,
```
ss-pattern-inset
```
  ,
```
ss-pattern-control
```
  , and
```
ss-pattern-icon
```
  where bundled patterns fit.
- Select components by recipe: aligned panels/rows for workbenches, flat steps for public service, reading flow for editorial, focused canvas/tool groups for creative tools, and soft grouping only when the recipe calls for it.
- A page may contain cards, panels, rules, whitespace, rows, tables, or a canvas. Never force every content block into a card.
Use semantic tokens for all colors — never hardcode hex values.
Compose the page from existing components (ui/ and patterns/) wherever possible.
Safe area: include
```
env(safe-area-inset-*)
```
padding for modern devices.
Post-generation verification (MANDATORY): Run
```
/ss-score
```
then
```
/ss-verify
```
. Confirm:
- The first viewport exposes the grammar's user job and one focal point
- Containment, geometry, controls, collections, density, and navigation fit the recipe
- Only
```
--brand
```
  color used for accents (no other accent colors)
- No hardcoded hex values (all semantic tokens)
- Section types alternate (no two identical types in a row)
- Spacing uses one repeatable recipe-fit rhythm
- Touch targets ≥ 44px on all interactive elements If any violation is found, fix it before presenting the page to the user.

解析并读取当前的设计方法：

.styleseed/effective-rules.md

和

.styleseed/manifest.json

如果文件缺失或过时，请从
```
STYLESEED.md
```
中调用
```
/ss-resolve
```
或
```
$ss-resolve
```
```
components/patterns/page-shell.tsx
```
用于页面布局
```
components/patterns/top-bar.tsx
```
用于头部模式
```
components/patterns/bottom-nav.tsx
```
用于导航

页面结构模板：

tsx

import { PageShell, PageContent } from "@/components/patterns/page-shell"
import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
import { BottomNav } from "@/components/patterns/bottom-nav"

export default function PageName() {
  return (
    <PageShell recipe="enterprise-workbench">
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Compose the grammar's focal point and recipe-fit sections */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

应用选定的适配器和配方：
- 在
```
PageShell
```
  上设置
```
recipe="<manifest selection.recipe>"
```
  ，或在自定义工件根节点上设置
```
data-styleseed-recipe="<id>"
```
  。
- 使用锁定文件中的视口设置和适配器的响应式约定。请勿默认使用430px移动端尺寸。
- 在适用组合模式的地方使用
```
ss-page-padding
```
  、
```
ss-page-gutter
```
  、
```
ss-pattern-stack
```
  、
```
ss-pattern-surface
```
  、
```
ss-pattern-inset
```
  、
```
ss-pattern-control
```
  和
```
ss-pattern-icon
```
  。
- 根据配方选择组件：工作台使用对齐面板/行，公共服务使用扁平步骤，编辑类使用阅读流，创意工具使用聚焦画布/工具组，仅当配方要求时才使用软分组。
- 页面可包含卡片、面板、规则、留白、行、表格或画布。切勿强迫所有内容块都放入卡片中。
所有颜色均使用语义化令牌——切勿硬编码十六进制值。
尽可能使用现有组件（ui/ 和 patterns/）来构建页面。
安全区域：为现代设备添加
```
env(safe-area-inset-*)
```
内边距。
生成后验证（必填）： 运行
```
/ss-score
```
，然后运行
```
/ss-verify
```
。确认：
- 首个视口展示语法定义的用户任务和一个焦点区域
- 容器、几何布局、控件、集合、密度和导航符合配方要求
- 仅使用
```
--brand
```
  颜色作为强调色（无其他强调色）
- 无硬编码十六进制值（全部使用语义化令牌）
- 区块类型交替出现（无连续两个相同类型的区块）
- 间距使用统一的符合配方的节奏
- 所有交互元素的触摸目标≥44px 如果发现任何违规情况，请在向用户展示页面之前修复。