Clay Sketch

clay-sketch

Use clay-sketch to make UI ideas visible while keeping design changes in the conversation. It ships with Clay: no installation, browser automation, external renderer, or generated image is needed. Its markup is a supported subset of PlantUML Salt with optional Clay screen-layout extensions, not the full PlantUML language.

Treat ordinary requests such as "show me a wireframe of our work", "sketch this screen", or "what would this page look like?" in a UI planning conversation as requests for clay-sketch. Do not require the feature name or ask the user to choose a rendering format. Use the current project and conversation as context. Default to a rendered sketch; use ASCII wireframes only when explicitly requested.

Draw in chat

1. Use the user's requirements and existing conversation to choose a sensible first layout. Ask a structured question only when a missing decision would materially change the design. Avoid setup questions or requiring a file.
2. Show a complete sketch in a fenced clay-sketch block. Include @startsalt and @endsalt. Clay renders the block inline and retains its source.
3. For a whole page, use the screen-layout mode below with an explicit canvas and region tracks. Default to 1440 × 900 for desktop unless context suggests another size. Do not simulate a screen by increasing scale, font sizes or padding labels with spaces. Use realistic labels and a clear primary action.
4. Briefly explain the important layout decisions. The controls are drawings, not interactive application controls. Keep the sketch focused on structure.

Use one sketch per block. Existing plantuml, puml, and salt fences also work. Prefer clay-sketch for new responses. Don't replace a rendered sketch with a screenshot or unsolicited ASCII art.

Revise together

When the user requests changes or wants to work together on a sketch, call present_wireframe (or its available clay-documents qualified equivalent) with the complete revised Salt source, a short title, and a stable design id such as account-settings. Reuse that id for revisions of the same design. This opens or updates clay-sketch in Sketch viewer, the right-side viewer. It only presents the sketch; it does not save a file.

Include the same complete revised source in a clay-sketch response block so the revision remains in chat history. Preserve requirements from earlier turns. Do not send a patch or a fragment as the diagram source.

All editing happens through conversation. The user can choose Save to project to create a .puml file, or Download to save the source to their device. Do not create files automatically. If explicitly asked to save through your file tools, use the requested path and normal file permissions. Do not silently overwrite existing work.

If the presentation tool is unavailable, provide the inline sketch and explain that Open sketch opens the viewer. Do not claim you opened it.

Use clean lines for new sketches. Do not add handwritten directives or suggest a handwritten mode. The viewer credits PlantUML Salt and links to its documentation.

Supported notation

• { ... }: layout container; newlines separate rows and | separates columns. Nest containers to build a whole page. Put a space or newline after {.
• {+ ... }: outer border; {# ... }: grid; {! ... }: column lines; {- ... }: row lines.
• {^"Account" ... }: titled group. Put its rows on following lines.
• {/ <b>Overview | Settings }: tabs. Newline-separated tabs form a vertical list.
• {* File | Edit | Help }: a menu bar; following rows such as File | Open | - | Exit show an open menu.
• Plain label, **Bold label**, <b>Bold label, <i>Italic label.
• [Continue]: button; "Email address ": text field. Spaces inside quotes reserve width; keep labels short enough to remain readable.
• [] Remember me, [X] Enabled: checkboxes.
• () Option, (X) Selected: radio controls.
• ^Choose a team^: closed dropdown; ^Choose^^One^^Two^: open dropdown.
• .: empty cell or vertical spacer; .., --, ==, ~~: separators.
• * following a cell spans the preceding cell across that column.
• {T with + Root, ++ Child rows: tree; T!, T#, T+, T- add grid lines.
• {S, {SI, {S-: both, vertical-only, horizontal-only scrollbars.
• //italic//, ""monospace"", --strike--, __underline__, ~~wave~~; <color:blue>, <back:orange>, <size:20> and <&folder> icons.
• * Bullet and # Numbered item: list labels; repeat the marker for nesting.
• title, header, footer, caption before the layout; multiline legend / end legend; scale 2, skinparam dpi 200, background colors.
• Lines beginning with an apostrophe are comments.