Agent Skills › bitjaru/styleseed › ss-build

ss-build

GitHub

基于 StyleSeed 注册表或遗留配置,通过解析规则集、组合设计语法并执行像素级验证来构建 UI 屏幕。

skills/ss-build/SKILL.md bitjaru/styleseed

Trigger Scenarios

需要构建或重建 UI 屏幕 使用 StyleSeed 方法生成前端界面

Install

npx skills add bitjaru/styleseed --skill ss-build -g -y
More Options

Use without installing

npx skills use bitjaru/styleseed@ss-build

指定 Agent (Claude Code)

npx skills add bitjaru/styleseed --skill ss-build -a claude-code -g -y

安装 repo 全部 skill

npx skills add bitjaru/styleseed --all -g -y

预览 repo 内 skill

npx skills add bitjaru/styleseed --list

SKILL.md

Frontmatter
{
    "name": "ss-build",
    "description": "Build a screen with StyleSeed's composed method, then run the code and pixel gates before presenting. Use when building or rebuilding a screen; sets up the project first if needed.",
    "allowed-tools": "Read, Write, Edit, Grep, Glob, Bash, WebFetch",
    "argument-hint": "[what to build]"
}

Build with the composed StyleSeed method

Registry-first artifact boundary

When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact-id>.md and .styleseed/manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective-rules.md only when no registry exists.

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

If either .styleseed/project.json or .styleseed/artifacts/index.json exists, require a complete, valid registry and resolve the requested artifact with the installed resolver's scripts/resolve-context.mjs --project-root . --artifact <artifact-id> --agent <agent>. Read .styleseed/bundles/<artifact-id>.md and preserve .styleseed/manifests/<artifact-id>.json as provenance. Do not create STYLESEED.md, restart setup, or use a legacy bundle because a registry is incomplete, invalid, or lacks a compiled output. Resolve missing scope with the user. For changes spanning multiple artifacts, resolve and check each affected artifact separately.

Only when neither registry file exists, use the legacy path: if STYLESEED.md is missing, run /ss-setup before UI code; otherwise preserve it. Invoke /ss-resolve (Claude Code) or $ss-resolve (Codex) with --from-lock STYLESEED.md --agent <agent>, read .styleseed/effective-rules.md, and preserve .styleseed/manifest.json.

If a supplied visual reference is not represented by the selected grammar, use /ss-reference within the selected project boundary. Never reduce an unfamiliar reference to a palette swap or replace approved project choices without human approval. Do not load llms-full.txt after resolution succeeds.

Step 2 — Compose, do not improvise

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:

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.

Step 3 — Build with design judgment

  • 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.

Step 4 — Code gate loop

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 for at most three correction passes, stopping earlier on ≥80. Prioritize broken flows and core failures before optional score gains. If it cannot pass, report the actual score and remaining failures; do not restart the pass budget by invoking a different skill.

Step 5 — Pixel gate loop

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.

Step 6 — Present with proof

Report:

  • effective rule set and why it fits;
  • final code score;
  • visual verification status and viewport;
  • material fixes made by the gates;
  • project/artifact configuration paths (or legacy STYLESEED.md) and any compiled grammar path.

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.

Version History

  • 4447574 Current 2026-09-22 05:56

    强化注册表优先的工件边界逻辑;优化技能描述长度以节省上下文预算;修复构建与视觉验证的工件作用域问题。

  • bfd06d8 2026-08-19 16:29

    新增 Registry-first artifact boundary 机制,优先解析项目级产物边界,不再回退至全局遗留 bundle。

  • c414969 2026-08-13 14:12

Same Skill Collection

engine/.claude/skills/ss-a11y/SKILL.md
engine/.claude/skills/ss-audit/SKILL.md
engine/.claude/skills/ss-build/SKILL.md
engine/.claude/skills/ss-component/SKILL.md
engine/.claude/skills/ss-copy/SKILL.md
engine/.claude/skills/ss-dial/SKILL.md
engine/.claude/skills/ss-feedback/SKILL.md
engine/.claude/skills/ss-flow/SKILL.md
engine/.claude/skills/ss-learn/SKILL.md
engine/.claude/skills/ss-lint/SKILL.md
engine/.claude/skills/ss-motion/SKILL.md
engine/.claude/skills/ss-page/SKILL.md
engine/.claude/skills/ss-pattern/SKILL.md
engine/.claude/skills/ss-reference/SKILL.md
engine/.claude/skills/ss-resolve/SKILL.md
engine/.claude/skills/ss-restyle/SKILL.md
engine/.claude/skills/ss-review/SKILL.md
engine/.claude/skills/ss-score/SKILL.md
engine/.claude/skills/ss-setup/SKILL.md
engine/.claude/skills/ss-studio/SKILL.md
engine/.claude/skills/ss-tokens/SKILL.md
engine/.claude/skills/ss-verify/SKILL.md
engine/.claude/skills/styleseed/SKILL.md
extensions/learning/skills/ss-learn/SKILL.md
skills/ss-a11y/SKILL.md
skills/ss-audit/SKILL.md
skills/ss-component/SKILL.md
skills/ss-copy/SKILL.md
skills/ss-dial/SKILL.md
skills/ss-feedback/SKILL.md
skills/ss-flow/SKILL.md
skills/ss-learn/SKILL.md
skills/ss-lint/SKILL.md
skills/ss-motion/SKILL.md
skills/ss-page/SKILL.md
skills/ss-pattern/SKILL.md
skills/ss-reference/SKILL.md
skills/ss-resolve/SKILL.md
skills/ss-restyle/SKILL.md
skills/ss-review/SKILL.md
skills/ss-score/SKILL.md
skills/ss-setup/SKILL.md
skills/ss-studio/SKILL.md
skills/ss-tokens/SKILL.md
skills/ss-verify/SKILL.md
skills/styleseed-design-review/SKILL.md
skills/styleseed/SKILL.md
engine/.claude/skills/ss-update/SKILL.md
skills/ss-update/SKILL.md

Metadata

Files
0
Version
4447574
Hash
024556af
Indexed
2026-08-13 14:12

Home - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-09-27 12:11
浙ICP备14020137号-1