Back to Details

ss-build

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Build with the composed StyleSeed method

使用StyleSeed组合方法构建界面

The build method is the product. Score and screenshots are auxiliary evidence, not the source of design judgment.
构建方法本身就是核心产物。评分和截图只是辅助证据，并非设计判断的依据。

Step 1 — Establish the rule set before code

步骤1 —— 编写代码前先建立规则集

If 
STYLESEED.md
does not exist, run 
/ss-setup
and write it before UI code. If the user supplied a visual reference that the selected built-in grammar does not capture, run 
/ss-reference
first. Never reduce an unfamiliar reference to a palette swap.
Then invoke 
/ss-resolve
(Claude Code) or 
$ss-resolve
(Codex), or run its bundled 
scripts/resolve-context.mjs --project-root . --from-lock STYLESEED.md --agent <agent>
. Read 
.styleseed/effective-rules.md
and preserve 
.styleseed/manifest.json
as the provenance record. Do not load 
llms-full.txt
after resolution succeeds.
如果
STYLESEED.md
不存在，请运行
/ss-setup
并在编写UI代码前创建该文件。如果用户提供的视觉参考无法被所选的内置语法覆盖，请先运行
/ss-reference
。切勿将陌生的参考内容简化为调色板替换。
随后调用
/ss-resolve
（Claude Code）或
$ss-resolve
（Codex），或者运行其捆绑的脚本
scripts/resolve-context.mjs --project-root . --from-lock STYLESEED.md --agent <agent>
。阅读
.styleseed/effective-rules.md
并保留
.styleseed/manifest.json
作为来源记录。解析成功后请勿加载
llms-full.txt
。

Step 2 — Compose, do not improvise

步骤2 —— 组合构建，而非即兴创作

The compiled bundle already composes the authority order: core invariants → selected grammar → surface adapter → domain/page → brand recipe → optional profile → bounded lock → craft baseline. Use the manifest selection and source hashes to detect drift. Open a full source document only when the bundle points to a genuine ambiguity; do not reassemble the handbook ad hoc.
Before code, state the effective rule set in one line, for example:
text
operations-console × SaaS × dashboard × enterprise-workbench × swiss × locked brand tokens
Resolve conflicts by authority. A profile or lock cannot waive task fitness, coherence, or accessibility.
已编译的包已经按照优先级顺序组合了规则：核心不变量 → 所选语法 → 表面适配器 → 领域/页面 → 品牌方案 → 可选配置文件 → 受限锁定 → 工艺基准。使用清单选择和源哈希值来检测偏差。仅当包指向真正的歧义时才打开完整源文档；切勿临时重新整理手册内容。
编写代码前，用一句话说明有效规则集，例如：
text
operations-console × SaaS × dashboard × enterprise-workbench × swiss × locked brand tokens
按照优先级解决冲突。配置文件或锁定不能违背任务适用性、一致性或可访问性要求。

Step 3 — Build with design judgment

步骤3 —— 结合设计判断进行构建

  • Make the grammar's user job and primary decision visible in the first viewport.
  • Establish one focal point; avoid equal-weight template grids.
  • Use the grammar's composition, density, type, color, surface, imagery/data, action, state, responsive, and motion contracts.
  • Use the recipe's containment, geometry, control, collection, and navigation morphology. Set 
    data-styleseed-recipe="<id>"
    on the artifact root when using bundled pattern components.
  • Use product-specific content and evidence. Never copy the StyleSeed demo or a reference screen.
  • Implement loading, empty, error, focus, reduced-motion, and responsive behavior where relevant.
  • 在第一个视口中清晰展示语法对应的用户任务和主要决策点。
  • 确立一个焦点；避免使用权重均等的模板网格。
  • 使用语法中的布局、密度、字体、颜色、表面、图像/数据、操作、状态、响应式和动效约定。
  • 使用方案中的容器、几何形状、控件、集合和导航形态。使用捆绑的模式组件时，在工件根节点上设置
    data-styleseed-recipe="<id>"
    。
  • 使用产品特定的内容和证据。切勿复制StyleSeed演示或参考界面。
  • 在相关场景下实现加载、空状态、错误、焦点、减少动效和响应式行为。

Step 4 — Code gate loop

步骤4 —— 代码检查循环

Run 
/ss-score
on the actual implementation. The score must name the effective rule set and check both core invariants and grammar-specific tells. Fix the highest-gain failures and re-score, up to roughly three passes, until ≥80. If it cannot pass, report the real blocker.
对实际实现运行
/ss-score
。评分必须明确有效规则集，并检查核心不变量和语法特定标识。修复优先级最高的问题并重新评分，最多进行约三次迭代，直到评分≥80。如果无法通过，请报告实际障碍。

Step 5 — Pixel gate loop

步骤5 —— 像素检查循环

For every renderable artifact, invoke 
/ss-verify
: use the adapter renderer, inspect every required viewport/frame/page and relevant state, fix perceptual failures, and re-render. If no renderer is available, say the visual gate was skipped; never imply it passed.
对于每个可渲染工件，调用
/ss-verify
：使用适配器渲染器，检查所有要求的视口/框架/页面和相关状态，修复视觉感知问题并重新渲染。如果没有可用的渲染器，请说明视觉检查已跳过；切勿暗示已通过。

Step 6 — Present with proof

步骤6 —— 附带证据进行展示

Report:
  • effective rule set and why it fits;
  • final code score;
  • visual verification status and viewport;
  • material fixes made by the gates;
  • STYLESEED.md
    and any compiled grammar path.
报告内容包括：
  • 有效规则集及其适配理由；
  • 最终代码评分；
  • 视觉验证状态和视口信息；
  • 检查环节中修复的实质性问题；
  • STYLESEED.md
    以及任何已编译语法的路径。

Rules

规则

  • Grammar before code; code gate after build; pixel gate last.
  • Output grammar is functional. Brand recipe is morphological. Aesthetic profile is optional. Neither substitutes for the grammar or permits a brand clone.
  • The primary action must remain identifiable; additional color is permitted only where the grammar gives it stable semantic or categorical meaning.
  • Re-read the lock and grammar on every UI change.
  • 先确定语法，再编写代码；构建后进行代码检查，最后进行像素检查。
  • 输出语法是功能性的。品牌方案是形态层面的。美学配置文件是可选的。两者都不能替代语法，也不允许克隆品牌。
  • 主要操作必须保持可识别性；仅当语法赋予额外颜色稳定的语义或分类含义时，才允许使用额外颜色。
  • 每次修改UI时，重新阅读锁定规则和语法。