Style Studio

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive, single-screen character customization game titled “Style Studio.” Use a soft pastel fashion-studio presentation: the page background is a diagonal gradient from pale pink through lavender to mint, and the main content is a centered two-panel studio layout with translucent white cards, rounded corners, subtle white borders, blur, and a soft purple shadow. On desktop, place a large preview stage on the left and a narrower control panel on the right; on narrow mobile screens, stack the preview above the controls. Keep the entire experience visible without page scrolling.

The left preview card should have decorative oversized translucent circles: a pink circle partially off the upper-right corner and a lavender circle partially off the lower-left corner. At the top, show the small uppercase eyebrow “STYLE STUDIO,” the headline “Design your character ✦” on two lines, and a scissors emoji at the right. Below, render a large centered 2D cartoon avatar on an HTML canvas. The avatar is a front-facing girl-like character with a circular off-white halo behind her head, warm peach skin, small rounded ears, dark purple-brown hair, two dark eyes, pink blush circles on both cheeks, and a small curved smile. Her body is a rounded periwinkle-blue shirt with a darker blue inset panel, a peach neck, a white pointed collar, and a small yellow circular button/detail. Add a faint oval ground shadow under the character. Give the avatar a very subtle continuous vertical bob animation.

The main interactive mechanic is hairstyle selection. Start with “Straight” selected. Provide exactly three selectable hairstyle buttons: Straight with the subtitle “Sleek and shiny,” Wavy with “Soft and playful,” and Curly with “Bouncy and bold.” Each option has a colored rounded square swatch and symbol (〰, ≈, ◎). Clicking/tapping an option immediately changes the avatar’s hair and marks that option active with a pink border, pale pink background, and soft pink shadow. The straight style should show a smooth dark hairstyle framing the head with a rounded top and a curved fringe; the wavy style should use visibly undulating locks around the head and wavy fringe; the curly style should use many rounded dark curls around the head and rounded curls across the fringe. Keep the face, body, colors, and framing consistent while only changing the hairstyle. Include the helper text under the canvas: “Pick a hairstyle to change the look.”

The right control card should contain the heading “Choose a hairstyle,” the explanatory text “Every style gives your character a different mood,” the three choices, and a lavender note reading “Tip: try all three styles, then save your favorite look.” At the bottom include a full-width dark purple button labeled “Save this look.” Clicking it sets a saved state and displays the live confirmation text “Saved! Your [selected hairstyle] look is ready ✨” beneath the button. Changing hairstyle clears the confirmation until the user saves again. Use pointer/touch-friendly controls, clear hover/pressed feedback, and a bold rounded sans-serif/system font style. On mobile, turn the choices into three compact equal-width columns, hide the option subtitles and tip note, and retain the save button. Use no scoring, enemies, timer, or additional game features.