ui-mockuplisted

# UI mockup Runs the bundled nanoodle workflow `workflows/ui-mockup.noodle-graph.json` against the NanoGPT API: the feature description (`Feature`) and a product style guide (`Style guide`) are joined into a brief, an LLM turns the brief into one disciplined image prompt for a screenshot-style mockup (explicit layout regions, exact palette, short realistic labels, no lorem-ipsum walls), and an image model renders it (`Mockup`). Requires Node.js >= 20 and the `nanoodle` npm package (`npx nanoodle` fetches it). Typical agent use: about to build or propose a screen, render the napkin sketch first, drop the file path in the conversation, and ask "like this?" before writing JSX. ## API key The run needs a NanoGPT API key. Use whichever is available: - `NANOGPT_API_KEY` already set in the environment — prefer this; no extra flags. - A `.env` file containing `NANOGPT_API_KEY=...` — pass `--env-file <path>` only when the key is not already in the environment. (With this CLI, `--env-file` overrides ambient `NANOGPT_API_KEY`.) Never print the key. ## Run From this skill's directory (or prefix paths if running from elsewhere). Replace the `Feature` value with the screen being mocked: ```sh npx nanoodle run workflows/ui-mockup.noodle-graph.json \ --input "Feature=settings page: profile card, notification toggles grouped by channel, danger zone at the bottom" \ --out ./mockup-out ``` Match the target product by overriding the style guide (a baked-in clean-SaaS default ru