A spec says what will be built. For a change people will see, a picture says it faster. Mockups are the screens a spec describes, designed by CodeLynq as static pages next to the spec, so the team can look at them before approving.
Mockups are a separate step from the spec: designing them never changes the spec's text, and a spec without mockups is approved as before.
Design mockups
- Open the task and go to its spec. The spec needs content first: write it, or let CodeLynq propose it (see Technical spec review and approval).
- Under Mockups, click Design mockups.
- Designing takes a minute or two. You can leave the page; you get a notification when the screens are ready.
CodeLynq designs one to three screens: only the screens the change adds or changes, filled with realistic example content, in the language of the task. It works from the task, the spec and the project's design notes - not from your code.
Review and revise
- Switch between screens with the tabs, and between Desktop and Mobile width. Full screen shows a screen larger.
- Under Feedback on these screens, write what should change and click Revise with feedback. CodeLynq designs a new version from the previous one.
- Design again starts over from the spec.
- Every version is kept; pick an earlier one from the version list.
Approve with the spec
Approving the spec approves the mockup version shown at that moment. That version is marked Approved with the spec, and the development run gets it as a visual reference: the agent builds the screens to match their layout, content and states, with your project's own components and styles.
A version designed after approval does not change what was approved. To build against it, create a new version of the spec and approve that.
Design them automatically
In the project's Settings → Context & conventions, under Mockups:
- Design mockups automatically for UI tasks designs them after each spec proposal for a task that changes what users see. Tasks that only change back-end, data or infrastructure are skipped.
- Design notes tells CodeLynq what your product looks like: brand colours, fonts, the component library you use, the tone. Without them, the mockups use a neutral style.
Designing mockups uses model credit, like a spec proposal. On the mobile app, open a spec and tap View mockups.
Safe to open
Mockups are shown as static pages: they cannot run scripts, load anything from the internet or open links. They are pictures of the screens, not working code.