StyleKit Style Prompts

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

1. Refresh dataset when needed: bash scripts/​refresh-style-prompts.sh /​mnt/​d/​stylekit
2. 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>
3. 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
4. If needed, force multi-style blend ownership: python scripts/​generate_brief.py --query "<requirement>" --stack nextjs --mode brief+prompt --blend-mode on
5. For iterative work, set refine mode: python scripts/​generate_brief.py --query "<requirement>" --stack nextjs --mode brief+prompt --refine-mode polish
6. 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>"
7. 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"]}}'
8. 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
9. If quality gate fails, run audit + fix workflow.

Workflow 1.5: Novice Decision Assist (Recommended)

1. User only provides a high-level goal (example: "I want to build a blog").
2. Run handbook mode: python scripts/​run_pipeline.py --query "<requirement>" --stack nextjs --format json
3. Read manual_assistant.decision_assistant.recommended_style_options and explain 3-4 options with trade-offs.
4. Ask manual_assistant.decision_assistant.decision_questions to help user pick direction.
5. 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
6. Follow references/​cc-decision-conversation-template.md for a turn-by-turn assistant script.

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

1. Audit prompt text: python scripts/​qa_prompt.py --input prompt.md --style <slug>
2. If this is an iterative update, enforce mode alignment: python scripts/​qa_prompt.py --input prompt.md --style <slug> --require-refine-mode layout-fix
3. If screenshot/​Figma context is required, enforce reference guard: python scripts/​qa_prompt.py --input prompt.md --style <slug> --require-reference-type screenshot
4. 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
5. Read violations and autofix_suggestions.
6. Rewrite prompt and re-run audit until status is pass.

Workflow 3: Multi-style Blend with Conflict Resolution

1. Identify base style from search rank #1.
2. Select up to 2 supporting styles from top candidates.
3. Resolve ownership explicitly:
   • color owner
   • typography owner
   • spacing owner
   • motion/​interaction owner
4. 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.