Agent Skills › bitjaru/styleseed › ss-reference

ss-reference

GitHub

将截图、URL或Figma等设计参考编译为项目本地的StyleSeed设计语法。通过证据分析、冲突解决和验证流程，生成包含令牌、置信度和反模式的结构化规则，确保设计语言的一致性与可复用性。

engine/.claude/skills/ss-reference/SKILL.md bitjaru/styleseed

Trigger Scenarios

用户提供设计参考（截图、链接、文件）但系统尚未建模时需要将现有UI或外部设计转化为本地StyleSeed语法时

Install

npx skills add bitjaru/styleseed --skill ss-reference -g -y

More Options

Non-standard path

npx skills add https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-reference -g -y

Use without installing

npx skills use bitjaru/styleseed@ss-reference

指定 Agent (Claude Code)

npx skills add bitjaru/styleseed --skill ss-reference -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-reference",
    "description": "Compile screenshots, URLs, Figma exports, or an existing UI into a project-local StyleSeed output grammar with evidence, tokens, confidence, anti-patterns, and a validation screen. Use when the user supplies a design reference that StyleSeed does not already model.",
    "allowed-tools": "Read, Write, Edit, Grep, Glob, Bash, WebFetch",
    "argument-hint": "[reference paths or URLs] [--name slug]"
}

Compile references into a design grammar

Do not merely imitate the supplied screen. Read PRODUCT-PRINCIPLES.md, RULESETS.md, ADAPTERS.md, and REFERENCE-COMPILER.md, then execute the compiler pipeline in full.

Workflow

Ingest every supplied reference and assign evidence IDs (R1, R2, ...). If a URL can be rendered, capture it. If an image cannot be seen, stop claiming visual analysis for it.
Separate references by surface adapter and job. Do not merge a marketing homepage with an app dashboard unless the user explicitly wants both languages connected.
Observe and measure the twelve axes. Every rule cites evidence IDs and a confidence level.
Resolve contradictions instead of averaging them. Explain any material choice briefly.
Choose the nearest built-in fallback grammar and adapter, then compile the project artifacts required by REFERENCE-COMPILER.md under .styleseed/rulesets/<slug>/.
Update STYLESEED.md to select reference:<slug> while preserving bounded brand choices.
Validate transfer: apply the grammar to one representative screen not present in the source set, run /ss-score, then /ss-verify if renderable. Fix and repeat to the gate floor.
Report what was learned, what remains low-confidence, where the artifacts live, and the validation result.

Rules

Visible evidence before adjectives. “Calm” is not a rule; the spacing, type, color, hierarchy, and motion decisions that create calm are rules.
Never copy protected assets, brand marks, or prose.
One reference produces a provisional grammar. Say so and keep confidence low where warranted.
The generated grammar is project-local. Do not edit RULESETS.md or publish it as built-in.
Core invariants and accessibility remain non-negotiable.