Grok 4.6 · prompting-guide
Turn “X: Matthew Berman's Creator Profile Card Prompt” into a bounded task entry with explicit inputs, runtime context, output format, and acceptance checks; confirm the source and model state before use.
Design and build a profile card in a {{FRAME_SIZE}} canvas. Include {{CARD_ELEMENTS}}, follow {{VISUAL_DIRECTION}}, and check overflow, legibility, contrast, and button states before delivery.Replace before running: {{FRAME_SIZE}}, {{CARD_ELEMENTS}}, {{VISUAL_DIRECTION}}
Deliver a working creator profile card in a fixed canvas, not a visual description alone.
Use a Grok 4.6 coding workspace with the target framework, placeholder assets, viewport size, interaction list, and a browser screenshot loop.
Build the card shell first, then the responsive layout, keyboard focus order, and interaction states. Render at the supplied viewport and inspect overflow, contrast, missing assets, and console errors.
Return runnable files and a screenshot. Accept only when every interaction works, the layout holds at the target viewport, and placeholders are clearly marked. If rendering fails, reduce the component to a static shell and isolate the failing asset or dependency.
This is an editorial adaptation of a public creator-card example; the source does not establish production accessibility or browser compatibility.
Within a fixed 500 x 500 pixel square frame, design and build a beautiful creator profile card for a social app. Include a portrait image, creator name, short bio, follower information, and a follow button. Use your own judgment for the visual design. Provide your own detailed information.Canvas constraint: Fixed at 500×500 pixels.
Product object: A creator profile card in a social app.
Required elements: Portrait, name, bio, follower information, and a follow button.
Open-ended elements: The model decides the visual design and specific content.
After implementation, verify the card at exactly 500 x 500 pixels. Check hierarchy, text legibility, image contrast, button affordance, and overflow. Return the runnable artifact and list any approximations.This case shows that a short prompt can leave the decision space open to the model; for production use, brand, accessibility, responsive behavior, and real-asset requirements would still need to be added.
X · Source date: 2026-08-13 · Edited: 2026-09-20
Read the original sourceGrok 4.6
Run this guide in the environment listed above. Downloading does not transfer the template or establish model availability for your account.