UI mockup concept: how to do it with AI
Last checked 2026-10-15
IntermediateBot with human review 🧩 Product & design
Generate visual concepts or a quick prototype.
1. Bot automation level
Bot with human review The bot does the work, but facts, numbers or code should be checked.
2. Before you hand it to the bot
- Gather inputs: files, data samples, links and any templates.
- Access: make sure you can use the chosen bot/plan (see limits below).
- Context: tell the bot audience, purpose, constraints and examples of good output.
- Privacy check: remove personal, confidential or regulated data unless your plan/workspace is approved for it.
- Success criteria: write down what 'done' looks like (length, format, tests passing, fields filled).
3. Copy-paste prompts
Main prompt
Build a clickable HTML prototype of a settings page.
Beginner-friendly
Build a clickable HTML prototype of a settings page. I'm new to this: explain each step in plain words and ask me for anything you need before starting.
Check-your-work
Build a clickable HTML prototype of a settings page. When you finish, list any assumptions you made, anything you're unsure about, and what I should double-check before using the result.
Free tiers that can handle this (verified): ChatGPT (incl. Work & Codex), Google Gemini. Others: check plan.
4. Step-by-step
- Open a bot from the list below (use a Project/Canvas/Artifact if available to keep context).
- Upload or paste your inputs and the prompt below.
- Ask the bot to state assumptions and show its work (sources, formulas or code).
- Review the first output; give specific corrections in a follow-up.
- Verify key facts, numbers or behaviour against your source data.
- Export or copy the final version and note what you'd reuse next time.
5. Which bots and plans can do it
| Tool | What's different here | Plan limits | Source |
|---|---|---|---|
| Claude (incl. Claude Code) | — | Claude Code and Research need Pro or higher; computer use is Pro/Max only (research preview). | code.claude.com/docs/en/desktop |
| ChatGPT (incl. Work & Codex) | — | Free tier has limited deep research, Codex and Work; scheduled tasks need Go or higher (per chatgpt.com/pricing). | help.openai.com/en/articles/20001275-chatgpt-work-and-codex |
| Google Gemini | — | Free tier includes Deep Research, Canvas, Gems; video generation needs AI Plus or higher. | gemini.google/overview/deep-research/ |
| Cursor | — | Pricing page unverified; cloud agents require a connected source-control repo. | cursor.com/docs/agent/overview |
Free or paid?
- Claude (incl. Claude Code): Free plan: yes. chat, web search, files & code execution, Artifacts, connectors. Claude Code and Research need Pro. Paid: the lowest price we could verify on the official pricing page is $20/month (other plans may exist). For this task, check the plan.
- ChatGPT (incl. Work & Codex): Free plan: yes. unlimited text chats; limited uploads, images, voice, deep research and Codex. Paid: price not verified, so check the official site. Its free tier can handle this task.
- Google Gemini: Free plan: yes. Flash-Lite model, image generation, Deep Research, Live, Canvas, Gems. Video needs AI Plus or higher. Paid: the lowest price we could verify on the official pricing page is $99.99/month (other plans may exist). Its free tier can handle this task.
- Cursor: Free: not verified, so check the official site. Paid: price not verified, so check the official site. For this task, check the plan.
6. Risks and what to double-check
- Read the output carefully; AI can be confidently wrong.
- AI can hallucinate facts — verify anything that matters.
- Don't share secrets or other people's personal data.