Sections/How it works/Tonal

Tonal How it works section

Opening…

Tonal

How it works · Health & Fitness

Build from this section

Your brand, following the layout of Tonal.

Keep this section’s layout and make it yours. Your AI tool creates the result from this reference.

Brand nameWhat should change?Create as

Send these instructions to your AI tool to create the design. They include the selected reference and your choices. You can also attach the screenshot directly.

Developer starter code

The AI prompt asks your tool to inspect this exact capture and build it with real assets. HTML and React are starter code; unreviewed layouts are labelled as wireframes.

Continue in your AI tool

Claude ChatGPT Gemini v0 Lovable Bolt Cursor

Long prompts are copied to your clipboard first — paste them in when the tool opens.

Connect an AI tool via MCP

claude mcp add --transport http uidiscovery https://uidiscovery.com/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"

Design briefs over MCP need an API key on a paid plan — create one on your account settings.

Then ask your connected agent to inspect the selected reference and create your chosen output:

Recreate the layout of this selected UI Discovery section: Tonal. Exact reference ID: tonal-p01-07 Reference: https://uidiscovery.com/sections/tonal-p01-07 Brand: Use an original sample brand My requirements: Preserve the selected composition and create suitable original copy and imagery. Inspect this exact capture first, using UI Discovery get_reference if connected. Preserve its composition, proportions, alignment, whitespace, typography hierarchy and image placement. Do not substitute a generic section template. If the capture cannot be inspected, report the blocker before recreating it. Create only this section. Replace the source logo, copy and artwork with my branding and original imagery. Generate or source appropriate images; keep them replaceable and match the reference's crop, lighting and visual weight. Do not deliver empty image placeholders as finished work. Create a working React and Tailwind section in the existing project, with local assets and a rendered preview. Compare the rendered result with the selected capture and correct visible layout differences. Check legibility and loaded assets. Keep this reference and my choices for follow-up edits. Cite the reference and distinguish completed output from remaining work.

Tonal kit · Pro API docs

The AI prompt asks your tool to inspect this exact capture and build it with real assets. HTML and React are starter code; unreviewed layouts are labelled as wireframes.

Download