Screen-by-screen layout
Desktop and mobile, screen by screen
Each screen's zones, numbered, with the desktop and mobile arrangement side by side. Open the live screen to try it, and narrow the window to see the mobile version.
01 Music
Build the sound in eight connected rack modules, ending with Talk to the Producer.
- 1Top bar. Brand, workspace tabs, project name and save state, undo, redo, Save, Export, settings.
- 2App rail. Create, Rig, Output, Library and More. In the menu sheet on mobile.
- 3Timeline. Transport with sketch audio, ruler, colour-coded section ribbon and track lanes.
- 4Inspector. Selected section, pending suggestions and checks, project info. A sheet below 1280px.
- 5Header and signal chain. Title, Collapse all, Show advanced, and a chain of module summaries that jumps to each module.
- 601 Genre & Groove. Families, preset cards with metadata and defaults offered with Apply, groove modes, World Flavour, influences. Hybrid under Advanced.
- 702 Structure & Motif. Six rack slots: source, behaviour, repetition, variation, movement, development. Identity line and tags below.
- 803 Character & Duration. Gurn / Girth knob with on and off. Minutes and seconds readout with keypad, steppers, presets and arrangement comparison.
- 904 Harmony & Timing. Connected Key, Tempo and Energy readouts, piano key picker, mode, BPM stepper with tap tempo, energy meter, progressions with real chord names.
- 1005 Bass Design. Patch tiles, sub, mid and top channel strips, wubs, dubstep modulators. Filter, drive, width, evolve rate, glide and sidechain under Sound design.
- 1106 Drums, 07 Instruments, 08 Producer. Kit and divisions, four percussion bands and a layer stack; the central Instrument Library; Talk to the Producer last.
Behaviour
- Modules sit in two columns once the workspace is 896px wide; Character & Duration and Harmony & Timing share a row.
- Every module has its own collapse, an Approve lock and, where relevant, an Advanced panel.
- On mobile the modules stack and their internal grids collapse to one or two columns.
02 Lyrics
Write and direct the voice, separate from the music configuration.
- 1Top bar. Brand, workspace tabs, project name and save state, undo, redo, Save, Export, settings.
- 2App rail. Create, Rig, Output, Library and More. In the menu sheet on mobile.
- 3Timeline. Transport with sketch audio, ruler, colour-coded section ribbon and track lanes.
- 4Inspector. Selected section, pending suggestions and checks, project info. A sheet below 1280px.
- 5Header. Singing, Rap or Mixed; Instrumental switch for music first; word, line and approval counts.
- 6Lyrics arrangement. Sections in arrangement order with vocal and lyric status. Jumps to each block.
- 7Lyric blocks. One block per section: line numbers, syllables and rhyme letters, approve lock, repeat another section, move lyrics, performance instructions.
- 8Vocal direction and coach. Tabs: identity, delivery and rhyme and flow; songwriting coach with rewrites that ask before changing approved words.
Behaviour
- The vocal direction and coach panel stays in view while you scroll the lyric blocks on wide screens.
- Approved blocks are read-only until unlocked; the coach shows Ask to apply instead of Apply.
- Removed sections leave their words under Unplaced lyrics rather than deleting them.
03 Arrangement
Construct the track from compact section cards instead of the old technique grid.
- 1Top bar. Brand, workspace tabs, project name and save state, undo, redo, Save, Export, settings.
- 2App rail. Create, Rig, Output, Library and More. In the menu sheet on mobile.
- 3Timeline. Transport with sketch audio, ruler, colour-coded section ribbon and track lanes.
- 4Inspector. Selected section, pending suggestions and checks, project info. A sheet below 1280px.
- 5Header. Section count, length against the target, structure initials, Expand all, Add section.
- 6Energy and tension. Two curves with draggable points, hover readout, legend and a table view.
- 7Section cards. Drag handle, name, type, bars and time, energy, layers, Check-in, more actions. Expands to the full section panel.
- 8Add section. Insert any section type after the selected one or at the end, up to 48 sections.
Behaviour
- Only the cards you open expand, so five or fifty sections stay readable.
- On mobile, Edit opens a bottom sheet with the full panel; swipe sideways to move between sections.
- Check-in only ever proposes changes to the section it was run on.
04 Generate
Prepare the Suno payload, catch contradictions and generate where a service is connected.
- 1Top bar. Brand, workspace tabs, project name and save state, undo, redo, Save, Export, settings.
- 2App rail. Create, Rig, Output, Library and More. In the menu sheet on mobile.
- 3Timeline. Transport with sketch audio, ruler, colour-coded section ribbon and track lanes.
- 4Inspector. Selected section, pending suggestions and checks, project info. A sheet below 1280px.
- 5Header. Copy all, text and JSON downloads, readiness and service status.
- 6Checks. Blocking issues, warnings and notes, each with a link to the setting that fixes it.
- 7Payload fields. Style with edit and reset, exclusions, the tagged lyrics payload and generation instructions, each with a character count and Copy.
- 8Summaries. Music, Lyrics and Arrangement at a glance with Edit links.
- 9Generate. Full track or section preview, cost when the service provides it, Review and generate.
Behaviour
- The confirmation dialog repeats the payload summary, any blocking checks and the cost before anything is sent.
- With no service connected, the dialog offers Copy payload instead of Send.
- Section previews and extensions are only offered when the service reports support.
05 Refine
Review, compare, extend, repair and export without losing approved work.
- 1Top bar. Brand, workspace tabs, project name and save state, undo, redo, Save, Export, settings.
- 2App rail. Create, Rig, Output, Library and More. In the menu sheet on mobile.
- 3Timeline. Transport with sketch audio, ruler, colour-coded section ribbon and track lanes.
- 4Inspector. Selected section, pending suggestions and checks, project info. A sheet below 1280px.
- 5Header. Save the current settings as a named version.
- 6Versions. Saved and generated versions with source, date, length, waveform and audio status.
- 7Player. Waveform with approximate section markers, play and seek, import and replace audio.
- 8Tools. Compare setting by setting with A and B listening, Extend, Repair with a preserve list, Adjust, Export.
Behaviour
- Repairs always preserve approved lyrics, modules and sections; they are listed in the request.
- Restoring a version's settings is one undo step.
- Imported audio never leaves the browser in the prototype.
Create
Start a project from a preset, a target duration and a vocal choice.
- 1Top bar. Brand, workspace tabs, project name and save state, undo, redo, Save, Export, settings.
- 2App rail. Create, Rig, Output, Library and More. In the menu sheet on mobile.
- 3Header. Title and short guidance.
- 4Setup. Name, family and preset, target duration, vocals.
- 5Starting arrangement. Sections that will be created, tempo, key and length, Create project.
Behaviour
- Creating saves straight to the Library and opens Music.
- Choosing Instrumental for now leaves vocals off until you are ready to write.
Library
Open saved projects and browse the preset library.
- 1Top bar. Brand, workspace tabs, project name and save state, undo, redo, Save, Export, settings.
- 2App rail. Create, Rig, Output, Library and More. In the menu sheet on mobile.
- 3Header. Title and the demo project shortcut.
- 4Saved projects. Cards with name, summary and last update; Open, Duplicate and Delete with confirmation.
- 5Preset library. Families and presets with metadata; Use in current project.
Behaviour
- Opening a project loads it and takes you to Music.
- Choosing a preset only selects it; its defaults are offered in Music.