Practical guides
Step-by-step workflows, reusable briefs, and agent guardrails
Design High-Craft UI with 3-Direction Exploration & Sub-Agent Review
Break out of default centered cards and blue-purple gradients: compare 3 distinct hero directions side by side, enrich with generated visuals or frame sequences, critique screenshots with a fresh sub-agent, and strip redundant chrome.
Design the hero and landing page: 1) before coding the full page, propose 3 distinct visual directions varying palette, serif/sans typography, and asymmetric layout, and render all three heroes in style-explorer.html; 2) ban blue-purple gradients, emoji icons, nested card wrappers, and filler subtitles; 3) once I pick a direction and the full page is rendered, spawn a context-free sub-agent to critique desktop and mobile screenshots on a 10-point rubric until it reaches 9/10.
Do not ask for 'random unique design'—models still converge on the same layout. Have the Agent propose 3 concrete visual metaphors varying palette, serif/sans typography, and asymmetric composition, then render all three heroes side by side in style-explorer.html.
- Each direction must differ in surface brightness, type family (serif/sans/mono), and layout structure
- For existing apps, preserve design tokens and compare 3 UX patterns (modal, drawer, dedicated page) side by side
- Pick the winning direction from style-explorer.html before expanding the full page
What to keepOpening style-explorer.html shows three heroes with clearly different palettes, type voices, and focal layouts.
Raw CSS boxes and generic SVG icons rarely create strong visual tension. Instruct the Agent to generate cohesive transparent illustrations, subtle shaders, or chroma-keyed green-screen frame sequences scrubbed by pointer position or scroll progress.
What to keepHero and key sections feature a cohesive visual subject, and motion degrades cleanly under prefers-reduced-motion.
The coding agent carries historical bias and patches around its own choices. Pass real 1440px and 390px screenshots to a fresh sub-agent with zero prior context, requiring concrete layout/CSS fixes on a 10-point studio rubric until it reaches 9/10.
- Use a context-free sub-agent to grade real screenshots with actionable selector/CSS fixes
- Delete filler subtitles and passive status counters that do not affect user actions
- Simplify into a content-first grid and strip glowing borders and nested container chrome
What to keepReview output lists exact selectors, type scales, and spacing adjustments rather than vague 'make it pop' advice.
Models love adding explanatory subcopy under every heading, drawing dividers everywhere, or exposing UUIDs and passive '3 selected' counters. Delete any helper text, glow effect, or wrapper container where the layout and data already speak for themselves.
What to keepThe interface has no redundant helper subtitles, exposed internal IDs, or triple-nested card borders.