SeaArt
Discover.
Create.

Productized design instructions

Written after the working product was built, then organized into goal, visual language, layout, interaction, motion, accessibility, use cases, and limits.

Build a responsive creator-community homepage for an original AI creative product, using your own brand, copy, and licensed assets.

Product goal: help a creator choose a creation mode, discover useful models, explore community work, and return to creation without losing their place.
Composition: anchor the desktop page with a persistent left navigation rail. Place a compact header above the main content. Begin with three creation entry points, then horizontal recommendation cards, a competition or event area, and a visual community feed. Keep a creation action available during browsing.
Visual language: use near-black page and navigation surfaces, a small number of slightly lighter panels, restrained borders, clear white headings, and quieter gray metadata. Let images carry most of the color. Reserve the brightest accent for selection and creation actions.
Typography and density: use a readable interface sans with a complete Chinese character fallback. Separate section headings, card titles, and metadata through size, weight, and spacing. Keep navigation labels stable and text on imagery legible.
Media: preserve the intended crop and aspect ratio for each card family. Use portrait cards for model recommendations, landscape cards for events, and portrait imagery in the community feed. Serve assets locally, give images meaningful alternatives, and defer below-fold loading.
Interaction: implement navigation selection, horizontal card browsing, feed categories, search, and a persistent creation entry. Give each visible action a real destination or clear local feedback. Demonstration flows must explain their frontend scope before asking for input; do not collect account credentials or pretend to generate content.
Responsive behavior: adapt the navigation rail and card density as space narrows. Keep key actions reachable, allow only deliberate row scrolling, and avoid horizontal page overflow. Test desktop, tablet, and narrow mobile layouts against the chosen reference state.
Accessibility and motion: preserve heading order, keyboard operation, visible focus, meaningful control labels, and reduced-motion behavior. Do not use autoplaying movement to hide loading or inactive controls.
Use cases: visual creation tools, model discovery, creative communities, and image-led libraries with frequent browsing.
Delivery: isolate the specimen from the collection shell; document source state, asset provenance, working interactions, and actual verification results. Keep visual fidelity, backend capability, and deployment status separate.
Avoid: bright decoration on every panel, identical card proportions for every content type, unreadable text over artwork, navigation that scrolls away unexpectedly, fake generation results, copied product claims presented as verified facts, and claims of pixel equality without measurements.