Smartisan inspired ui

Smartisan-Inspired UI

Create an independent, clean-room interpretation of the visual language. Preserve clarity and platform-native behavior; do not clone proprietary screens or assets.

Choose a mode

1. Design — Read design-language.md, components-and-interaction.md, and design-tokens.json. Produce a page specification, token mapping, component states, interaction notes, and accessibility checks.
2. Review — Read review-and-accessibility.md plus the relevant design references. Lead with the largest visible mismatches, then give concrete fixes.
3. Image assets — Read image-generation.md. Generate or prompt only raster-suitable assets such as medallions, state illustrations, textures, wallpapers, and concept previews.

Read clean-room.md whenever the request mentions firmware, extracted files, official icons, fonts, screenshots, source code, trademarks, or exact cloning. Use worked-example.md as the single complete output example.

Core workflow

1. Identify the product, audience, target surfaces, content density, and required states.
2. Separate functional UI from raster assets. Build functional UI in code-native controls; use image generation only for raster-suitable assets.
3. Start from semantic tokens. Keep the cold-mist palette and restrained mechanical tactility; adapt layout conventions to the target platform.
4. Specify default, hover where relevant, pressed, focus, selected/on, disabled, loading, error, and reduced-motion behavior.
5. Validate hierarchy, 44-unit targets, contrast, keyboard and screen-reader behavior, text scaling, and small-size asset legibility.
6. State clean-room boundaries when source ownership is uncertain. Never imply official affiliation.

Output contract

For design work, return these parts in order:

1. Direction — one paragraph describing hierarchy and mood.
2. Tokens — semantic token names and any justified overrides.
3. Structure — page regions and component roles.
4. States and motion — observable behavior, durations, and reduced-motion fallback.
5. Asset plan — code-native versus raster-generated items.
6. QA — accessibility, responsiveness, ownership, and style-drift checks.

For review work, return: verdict, prioritized findings, fixes, and a short acceptance checklist.

For image work, return: final structured prompt, invariants, avoid list, output sizes, transparency method, and validation steps. If the user explicitly asks to generate the image and an image tool is available, generate it; otherwise provide the production-ready prompt.