StyleKit Style Prompts

Purpose

Generate better-looking frontend output by combining StyleKit style identity, actionable constraints, and quality checks.

When to Use

Activate this skill when the user:

Asks to generate a frontend design prompt or style prompt
Wants to select, compare, or blend StyleKit visual styles
Needs a design brief for a new page, dashboard, or landing page
Asks to audit or fix an existing frontend prompt's quality
Mentions StyleKit, style prompts, or design system prompt generation
Wants to convert a screenshot or Figma frame into a style-constrained prompt

Do NOT use this skill for general CSS questions, backend logic, or non-visual tasks.

Quick One-shot Command

Run handbook mode in one command (default):

python scripts/run_pipeline.py --query "<requirement>" --stack nextjs --format json

Run site-type routed composition (style + layout + motion + interaction):

python scripts/run_pipeline.py --query "<requirement>" --stack nextjs --site-type dashboard --recommendation-mode hybrid --content-depth skeleton --decision-speed fast --format json

Run prompt-generation mode with QA gate:

python scripts/run_pipeline.py --workflow codegen --query "<requirement>" --stack nextjs --format json

Force multi-style blend:

python scripts/run_pipeline.py --workflow codegen --query "<requirement>" --stack nextjs --blend-mode on --format json

Run targeted refinement (polish/debug/contrast/layout/component-fill):

python scripts/run_pipeline.py --workflow codegen --query "<requirement>" --stack nextjs --refine-mode debug --format json

Run with screenshot/Figma reference constraints:

python scripts/run_pipeline.py --workflow codegen --query "<requirement>" --stack nextjs --reference-type screenshot --reference-notes "<what to preserve/fix>" --format json

Run with structured reference payload:

python scripts/run_pipeline.py --workflow codegen --query "<requirement>" --stack nextjs --reference-type screenshot --reference-file refs/screen-analysis.json --format json

Run strict schema mode for reference payload:

python scripts/run_pipeline.py --workflow codegen --query "<requirement>" --stack nextjs --reference-type screenshot --reference-file refs/screen-analysis.json --strict-reference-schema --format json

Benchmark current quality:

python scripts/benchmark_pipeline.py --format json

Benchmark with snapshot output:

python scripts/benchmark_pipeline.py --format json --snapshot-out tmp/benchmark-latest.json

Run regression gate against baseline snapshot:

python scripts/benchmark_pipeline.py --format json --baseline-snapshot tmp/benchmark-baseline.json --fail-on-regression

Auto-update baseline on successful gate:

python scripts/benchmark_pipeline.py --format json --baseline-snapshot references/benchmark-baseline.json --baseline-update-mode on-pass --baseline-update-target references/benchmark-baseline.json

CI one-command gate:

bash scripts/ci_regression_gate.sh --baseline references/benchmark-baseline.json --snapshot-out tmp/benchmark-ci-latest.json

Run taxonomy guard with strict style-tag registry usage:

python scripts/validate_taxonomy.py --format json --max-unused-style-tags 0 --fail-on-warning

Run output-contract sync guard (docs example JSON vs tests schema):

python scripts/validate_output_contract_sync.py --format text --fail-on-warning

Dry-run taxonomy expansion (including optional new_style_tags in input JSON):

python scripts/merge_taxonomy_expansion.py --type animation --input tmp/gemini-output.json --dry-run

Workflow 1: Requirement -> Style Candidates -> Design Brief -> Prompt

Refresh dataset when needed: bash scripts/refresh-style-prompts.sh /mnt/d/stylekit
Retrieve top style candidates: python scripts/search_stylekit.py --query "<requirement>" --top 5 --site-type <auto|blog|saas|dashboard|docs|ecommerce|landing-page|portfolio|general>
Generate design brief and prompts: python scripts/generate_brief.py --query "<requirement>" --stack nextjs --site-type dashboard --recommendation-mode hybrid --content-depth skeleton --decision-speed fast --mode brief+prompt
If needed, force multi-style blend ownership: python scripts/generate_brief.py --query "<requirement>" --stack nextjs --mode brief+prompt --blend-mode on
For iterative work, set refine mode: python scripts/generate_brief.py --query "<requirement>" --stack nextjs --mode brief+prompt --refine-mode polish
For screenshot/Figma-driven generation, add reference context: python scripts/generate_brief.py --query "<requirement>" --stack nextjs --mode brief+prompt --reference-type figma --reference-notes "<frame scope>"
If reference analysis is available, pass structured payload: python scripts/generate_brief.py --query "<requirement>" --stack nextjs --mode brief+prompt --reference-type screenshot --reference-json '{"layout":{"issues":["sidebar overlaps content"]}}'
For high-confidence pipelines, enable strict schema mode: python scripts/generate_brief.py --query "<requirement>" --stack nextjs --mode brief+prompt --reference-file refs/screen-analysis.json --strict-reference-schema
If quality gate fails, run audit + fix workflow.

Workflow 1.5: Novice Decision Assist (Recommended)

User only provides a high-level goal (example: "I want to build a blog").
Run handbook mode: python scripts/run_pipeline.py --query "<requirement>" --stack nextjs --format json
Read manual_assistant.decision_assistant.recommended_style_options and explain 3-4 options with trade-offs.
Ask manual_assistant.decision_assistant.decision_questions to help user pick direction.
After user selects one option, run codegen mode with forced style: python scripts/run_pipeline.py --workflow codegen --query "<requirement>" --stack nextjs --style <slug> --site-type <type> --content-depth skeleton --blend-mode off --format json
Follow references/cc-decision-conversation-template.md for a turn-by-turn assistant script.

Workflow 2: Existing Prompt -> Quality Audit -> Fix Suggestions

Audit prompt text: python scripts/qa_prompt.py --input prompt.md --style <slug>
If this is an iterative update, enforce mode alignment: python scripts/qa_prompt.py --input prompt.md --style <slug> --require-refine-mode layout-fix
If screenshot/Figma context is required, enforce reference guard: python scripts/qa_prompt.py --input prompt.md --style <slug> --require-reference-type screenshot
If structured reference payload exists, require extracted-signal block: python scripts/qa_prompt.py --input prompt.md --style <slug> --require-reference-type screenshot --require-reference-signals
Read violations and autofix_suggestions.
Rewrite prompt and re-run audit until status is pass.

Workflow 3: Multi-style Blend with Conflict Resolution

Identify base style from search rank #1.
Select up to 2 supporting styles from top candidates.
Resolve ownership explicitly:
- color owner
- typography owner
- spacing owner
- motion/interaction owner
Output one merged prompt with priority order.

Output Contract

Always follow references/output-contract.md.

Primary output object fields:

design_brief
hard_prompt
soft_prompt
ai_rules
style_choice
site_profile
tag_bundle
composition_plan
decision_flow
content_plan
upgrade_candidates
quality_gate (for audits)
design_brief.refine_mode
design_brief.input_context.reference_type

Working Rules

Never invent style slugs.
Use only references/style-prompts.json as style source of truth.
Keep aiRules concrete and testable.
Remove contradictory rules before output (single source-of-truth per constraint).
Prefer imperative constraints over decorative language.
Start with explicit design intent (purpose, audience, tone, memorable hook).
Enforce anti-generic constraints to avoid interchangeable AI-looking output.
Include pre-delivery validation tests (swap/squint/signature/token).
Include an anti-pattern blacklist (absolute layout misuse, nested scroll, missing focus states, etc.).
Preserve user language (Chinese in -> Chinese out; English in -> English out).
If intent is ambiguous, return top 5 candidates with reasons before final prompt.

Error Handling

If quality_gate.status is "fail", read violations and autofix_suggestions, apply fixes, then re-run the QA audit. Repeat up to 3 rounds.
If the pipeline exits with a non-zero code, check stderr for ModuleNotFoundError (missing Python dependency or wrong cwd) or FileNotFoundError (missing reference data — run refresh-style-prompts.sh first).
If search_candidates returns 0 results, broaden the query or remove --site-type constraint.

Parameter Interactions

--blend-mode on + --style <slug>: forces blend OFF (explicit style selection overrides blend).
--refine-mode requires --workflow codegen; ignored in handbook mode.
--reference-type + --strict-reference-schema: strict mode validates the reference JSON payload against the expected schema and fails fast on mismatch.
--recommendation-mode hybrid uses both BM25 search and taxonomy routing; rules skips BM25 and relies solely on site-type routing rules.
--content-depth skeleton produces minimal structure; storyboard adds section copy; near-prod generates production-ready content blocks.
validate_taxonomy.py --max-unused-style-tags 0 --fail-on-warning enforces zero unused tags in style-tag-registry and treats warnings as failures.

Stack Adapters

Supported stack hints in generation:

html-tailwind
react
nextjs
vue
svelte
tailwind-v4

If stack is unknown, fallback to framework-agnostic Tailwind semantics.

Resource Files

references/style-prompts.json: full style prompt catalog.
references/style-search-index.json: lightweight search document index.
references/output-contract.md: output schema and examples.
references/frontend-design-principles.md: distinctiveness and anti-generic design heuristics.
references/design-system-patterns.md: token hierarchy and component architecture.
references/accessibility-gate.md: WCAG + mobile touch baseline for prompt quality.
references/cc-decision-conversation-template.md: assistant dialogue template for novice user decision flow.
scripts/refresh-style-prompts.sh: rebuild style dataset from local repo.
scripts/search_stylekit.py: query -> ranked style candidates.
scripts/generate_brief.py: query -> design brief + prompts.
scripts/qa_prompt.py: prompt quality gate and autofix hints.
scripts/run_pipeline.py: one-shot search + brief generation + QA gate.
scripts/benchmark_pipeline.py: benchmark pass-rate, hard-check pass rate, bucket pass-rate (strict-domain/balanced/expressive), snapshot export, and baseline regression gate.
scripts/ci_regression_gate.sh: CI wrapper for benchmark regression gate (supports baseline bootstrap).
scripts/smoke_test.py: validate end-to-end script integrity.
scripts/validate_taxonomy.py: taxonomy consistency + style-tag-registry coverage guard (--fail-on-warning promotes warnings to failures).
scripts/validate_output_contract_sync.py: output-contract markdown JSON examples vs tests schema sync guard (uses the first JSON block in each required section as canonical; --fail-on-warning promotes warnings to failures).
scripts/merge_taxonomy_expansion.py: merge Gemini taxonomy expansion payloads (animation/interaction + optional new_style_tags).
scripts/propose_upgrade.py: generate manual-review upgrade candidates from pipeline output.
scripts/review_upgrade_candidate.py: validate upgrade candidate schema and gate requirements.
references/benchmark-baseline.json: default baseline snapshot for CI gate.
references/github-actions-regression-gate.yml: GitHub Actions template for regression automation.
references/taxonomy/style-tag-registry.json: controlled style tag dictionary used by routing validation.
references/taxonomy/*: site-type routing, controlled tags, alias mapping, and style-tag overrides.

stylekit-style-prompts