## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/ai-sandboxes-by-buddy/f0e6e8b3-2b0a-4e1e-b3c7-06d5e5447056-1792130830-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-sandboxes-by-buddy/f0e6e8b3-2b0a-4e1e-b3c7-06d5e5447056-1792130620611-full.webp
- Component on Kage: https://kage.design/component/ai-sandboxes-by-buddy-feature-grid-3

## Before you start
Ask what workflow the user's product helps users complete and what the meaningful stages and outcomes are. Then build a product-specific instructional section.

Design a four-step workflow in a two-by-two grid. Introduce it with a two-column heading and explanatory paragraph, then give each step a numbered badge, short bold title, concise description, and optional monospace command or data chip. Use a faint technical grid behind the content, white cards or open layout, and 1px #D8DDE2 borders. Number badges can be faceted or hexagonal but should be original CSS/SVG shapes. Use 15–17px titles, 13–14px descriptions, and monospace chips around 12px with a soft gray fill. Add hover/focus states to commands and ensure the grid becomes one column on narrow screens.

Never: use the reference's product name, exact step names, exact commands, illustrations, or imagery.