LAB
Prompt detailNO. 59[ CREATIVE PRODUCTION LAB ]
Home/Index/Neo-brutalist social landing page

Neo-brutalist social landing page

Present a social product in acid lime, violet and pink with bold outlines and hard shadows, delivering a full landing page with honest actions.

Recipe typeUI design
Output formatSingle-page HTML/CSS/JS
DeliverablesHero / features / FAQ / actions
Version1.0
01 / Description

Present a social product in acid lime, violet and pink with bold outlines and hard shadows, delivering a full landing page with honest actions. A compact direction to help the next screen feel deliberate, specific, and easy to remix.

02 / Prompt
Create a complete neo-brutalist social-product landing page as frontend code. This introduces a product and its actions; it does not implement a social backend. Use a tool that generates HTML/CSS/JS.

INPUT
Product: [name, purpose, audience, current actual availability]
Features: [3–6 actual features and explanations; explicitly identify unreleased ones]
Interface/assets: [available screenshots/icons/images and rights; allow labeled concept illustrations if no screenshot exists]
Primary action: [actual download, registration, waitlist or contact URL and label]
FAQ/facts: [real questions/answers, limitations, optional actual pricing/privacy URLs]
Brand/delivery: [prohibited colors/tone, copy language, standalone index.html by default or specified stack]

MISSING INFORMATION
Ask at most three blocking questions. Mark noncritical gaps [To supply] or remove sections. Never invent reviews, user counts, growth, media endorsements, screenshot posts or personal information. Without a registration/download address, use an explained disabled action or supplied contact instead of claiming registration. Label concept products and unreleased functionality in visible copy.

MAKE
1. Verify facts/assets and build accessible navigation, hero/value proposition, interface illustration, feature grid, real FAQ, primary action and footer. Let supplied content determine section count. Prioritize purpose and usable actions over sticker clutter.
2. Pair flat acid lime #ccff00, violet #7000ff and hot pink #ff0099 with ink/cream. Use consistent 4–8px black borders and roughly 6px zero-blur hard shadows on navigation/cards/buttons. Oversized heavy sans headings contrast with readable body text. Tilt a few cards 1–3 degrees and a decorative strip; keep body text, forms and focus indicators upright. Short lowercase English is optional; do not force that convention into Chinese.
3. The hero can split actual product copy/actions from a licensed phone screenshot or explicitly labeled concept preview. Vary feature-cell sizes while keeping DOM and visual reading order aligned. Use keyboard-operable native FAQ disclosure. Avoid soft shadows, clay textures and broad gradients.
4. Press buttons into their hard shadows. Apply hover only on pointer devices. Auto-scrolling strips can pause and become static for reduced motion; bouncing/wobbling is optional and must not obstruct reading or move actions away from pointers. Preserve real URLs. Without a backend, never show waitlist/send success, actual likes or logged-in state.
5. Check 390px/1440px: single-column mobile, contained tilted decorations, wrapping Chinese, suitable touch targets and visible focus. Measure actual text/background contrast rather than assuming saturated colors are readable. State uses text/shape as well as color, and concept previews have alternative descriptions. Check absent screenshots, no action URL, few FAQs and only two features.

DELIVER
A. Structure, actual/concept content inventory and gaps.
B. One complete index.html block with CSS/necessary JS and editable copy/colors/layout; provide all necessary files for a specified framework. No upstream Skill or special plugin installation required.
C. Action/result/dependency/unimplemented table and explicitly performed or pending checks.
Bold style is not completed backend functionality and does not guarantee signups/conversion. Disclose when the page was not run.

Site adaptation of Shirley Lou / Superdesign, Gen-Z Social App (prompt text CC0-1.0). Retains neo-brutalist full-page composition/hard shadows and adds Chinese, factual, accessibility and honest-action boundaries; no upstream preview or code reused: https://github.com/superdesigndev/superdesign-prompts/blob/6c60906945208df5aa2187f19f8ddfe9b2948aa0/prompts/gen-z-social-app/README.md .
03 / Negative prompt
style keywords only, invented reviews/counts, copied personal social data, fake signup success, decoration covering copy, rotated mobile overflow, flashing/wobble blocking actions, incomplete page code
04 / Generation settings
Recipe typeNeo-brutalist UI
Output formatSingle-page HTML/CSS/JS
DeliverablesHero / features / FAQ / actions
Version1.0