Using prompts
From a visual direction to a working implementation
Start with a small experiment. You can always take it further.
Start with the complete prompt
Open an asset and select Copy Prompt. Keep the visual direction, implementation notes and motion requirements together on your first attempt. Live-effect prompts include the actual dependency and settings used by the preview.
Add your context
Tell your coding tool which framework you use, what your page should achieve, your brand colours and your real content. Attach your own images or models when the direction needs them.
Adapt this to my existing Next.js app. Keep the layout, use our olive palette and make the main button link to /contact.Work in small steps
Start with structure and the main visual. Then refine typography, spacing, interactions and responsive layouts. Request one focused change at a time and keep a working version before substantial edits.
Understand the preview
A video reference is paired with an independently written design brief, not its original source code. Results vary with your AI tool and supplied media. Live-effect prompts use the same existing component and configuration as the preview, which makes their rendering more reproducible.