Liuguang Banlan UI

流光斑斓 UI 工坊

Overview

Use one skill with two explicit modes, not a generic material library. Preserve a stable information workspace while treating the spectral field as a controlled environmental layer. Keep the implementation parameterized so every output can report total color intensity, per-color intensity, OKLCH values, peak opacity, spatial scale, phase, and measured coverage.

Read style-contract.md before choosing a mode or changing palette semantics. Read verification.md before claiming visual or screenshot validation.

When to Use

• Use when a user names 流光溢彩白 or 五彩斑斓黑, asks for one unified skill covering both, or needs a reusable parameterized starter.
• Use when the final report must include total color intensity, each color's intensity, OKLCH values, and screenshot measurements.
• Do not use for a generic theme-token library or an unparameterized visual mockup.

Workflow

1. Classify the request

• Map “流光溢彩白” to opal and “五彩斑斓黑” to obsidian.
• If both are requested, keep one shared implementation and two explicit theme manifests.
• Inspect the existing project, framework, route, build system, and uncommitted work before copying starter assets.
• Use the smallest appropriate change surface; do not replace an existing design system without authorization.

2. Gate visual verification

• Confirm that the executing model can directly inspect images before taking a screenshot-based visual claim.
• If native image inspection is unavailable, continue with code and deterministic pixel checks but mark the result visual-unverified; never infer visual quality from DOM or CSS alone.
• Record modelVision, screenshotCapture, deterministicPixelMetrics, and visualVerificationMode in the final report.

3. Establish the scene and structure

• Choose a neutral, information-dense workbench domain such as field research, inventory, monitoring, or operations.
• Use a continuous three-pane or similarly coherent workspace: navigation, queue/list, detail, metadata, and one signature observation band.
• Keep color in the field, map markers, and state accents. Keep the logo, avatar, rules, text, controls, boundaries, and semantic hierarchy neutral; do not paint them with palette gradients.
• Prefer restrained surfaces and weak fills. Avoid turning every region into a floating card.

4. Implement the parameter contract

Maintain a serializable manifest with these top-level fields:

{
  schemaVersion, mode, label, preset, seed,
  overallColorIntensity,
  base: { oklch },
  colors: [{
    id, label, oklch, srgbFallback,
    intensity, peakOpacity,
    fieldScale, phase,
    measuredCoverage, effectiveShare
  }],
  field: { scale, octaves, warpStrength, motionSpeed, staticTime, ditherStrength, luminanceCap },
  output: { colorSpace, reducedMotion }
}

• Keep every intensity in [0, 1]; make overallColorIntensity the global budget and colors[].intensity the per-color budget. The renderer multiplies intensity by peakOpacity, so treat peakOpacity as the calibrated strength at full intensity.
• Order colors by hue. The renderer draws six hue stops around a loop and mixes each color with its array neighbors; near-complementary neighbors mix toward gray.
• luminanceCap applies only in obsidian. ditherStrength is the dither amplitude in output codes; 1 removes quantization bias.
• Use OKLCH as the authoring space and provide an sRGB fallback for non-OKLCH contexts.
• Keep the seed, static frame, phases, and field scales deterministic; do not use random per render.
• Expose sliders for the global intensity and every configured color. Make reset, JSON export, and copy actions available.

5. Build the spectral field

• Use a procedural fBm/domain-warp field or an equivalent continuous field; keep it behind the interface with pointer-events: none.
• Use broad flowing hue regions or ribbons, not obvious radial blobs, spotlight circles, or hard rainbow bands.
• Upload the complete palette and per-color field scales to the renderer. Apply the dark-mode luminance cap after palette mixing.
• Encode output with the sRGB transfer function, dither in output codes, and quantize in the shader. A power-curve encode or a weak linear-light dither biases the output, most visibly in low-intensity fields and near black.
• Provide a CSS fallback with comparable visual intent when WebGL is unavailable, such as one soft hue-ordered sweep calibrated against the WebGL field; do not use fixed radial spots.
• Pause or freeze motion when the document is hidden or prefers-reduced-motion is active, and keep field time continuous so pausing and resuming do not jump.
• Repaint after every resize. Resizing clears the canvas, and a paused field has no next frame to redraw it.
• Keep the renderer local and dependency-light; do not require remote fonts, images, or APIs for the starter.

6. Preserve interaction and accessibility

• Keep semantic headings, labels, focus-visible states, keyboard escape behavior, and readable contrast.
• Test navigation, record/list selection, tab selection, parameter panel open/close, slider input, reset, export, and copy fallback.
• Make the workbench responsive at a narrow mobile viewport; collapse navigation and metadata without losing the primary record flow.