Design Wireframes & Code Files Are Now Part of the Capability Challenge

Two new document types are now available in Capability Challenge: Design Wireframe and Code File. Both are role-specific, and both have a built-in AI document assistant.

Design Wireframe (UX Designer & Product Manager)

When you pick the Wireframe document type, you get a split-panel editor with a Visual tab and a JSON tab. The Visual tab renders your wireframe as a lo-fi mockup — a gray-palette screen with a phone or browser frame depending on the device you select.

The JSON format is structured: a device type (mobile, tablet, or desktop), a title, and an array of elements. Elements include navbar, heading, text, button, input, image, card, list, tabbar, checkbox, toggle, search bar, tag row, avatar row, progress bar, and spacer. Each element has optional properties like variant, size, align, and children.

The AI document assistant knows all 18 element types. You can ask it to generate a wireframe from a description — "Design the onboarding flow for a mobile fintech app" — and it produces valid JSON that renders immediately in the Visual tab. You can then switch to JSON to edit individual elements, change the device, or tweak labels.

Code File (Software Engineer, Forward Deployed Engineer, Data Analyst)

The code editor is a dark-background monospace panel with a language selector at the top. Supported languages: Python, JavaScript, TypeScript, SQL, Java, Go, Rust, C++, R, Shell, and Other.

We built proper keyboard shortcuts so the editor doesn't fight you: - Tab inserts 2 spaces at the cursor, or indents all selected lines - Shift+Tab dedents the current line or selection - Enter auto-indents to match the current line's leading whitespace - Cmd/Ctrl+/ toggles line comments — using # for Python/R/Shell, -- for SQL, // for everything else

The AI assistant generates raw code (no markdown fences) and inserts it directly into the editor, preserving whatever language you've selected.

Why role-specific document types

Not every document type is relevant to every role. A Marketing Associate doesn't need a code editor. A Software Engineer doesn't need a wireframe builder. Making these role-specific keeps the type picker uncluttered and signals to the user that the tool is designed for their context, not a generic catch-all.

The five document types — Text, Diagram, Slides, Code, and Wireframe — cover the full range of deliverables that come up in real work across the seven role tracks we support.