Guide · Agent skill
How to use the Ideate Design Concepts agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Ideate is an agent skill that turns a Product Design brief into image-based design alternatives, remixes, or new design directions. This guide explains what an agent skill is, how to install the ideate skill, how to ask for it in plain language, and what to check before you use it. By the end you will know how to run a concept session and pick one option before any front-end code is written.
Ideate Design ConceptsXiaomiMiMo/MiMo-Code · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the ideate ZIP from this page and unzip it so the skill folder contains SKILL.md and agents/openai.yaml.
- 2Place it where the agent can find it. Copy the folder to ~/.claude/skills/ for all projects, or to .claude/skills/ inside one project. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Confirm the requirements. Make sure a built-in Image Gen tool is available and that any screenshots, files, or Figma frames you reference are accessible.
- 4Describe the design brief. Ask in plain language for variants, visual exploration, or remixes, naming the screen or feature, the user, and the goal.
- 5Provide references. Attach screenshots, Figma frames, tokens, or component references so the concepts align with your existing design.
- 6Pick one of the three options. Review the three generated images and reply with the number of the option you want, or give feedback for a revised set.
What is an agent skill and what does ideate make the agent do?
An agent skill is a folder containing a SKILL.md file that gives an AI agent a set of instructions for one kind of task. When the skill is installed and your request matches its description, the agent follows that workflow instead of improvising.
The ideate skill is for design exploration. Its description says it generates image-based alternatives, remixes, or new design directions from a Product Design brief, for requests about design variants, visual exploration, remixes, or image-generated approaches.
- It pauses to confirm the design brief before generating anything.
- It gathers existing context such as screenshots, Figma frames, tokens, and component references.
- It generates three separate, visually distinct design concept images using a built-in image generation tool.
- It waits for you to pick one before building anything.
Install the ideate skill from the ZIP or the Claude apps
Download the ideate ZIP from this page and unzip it. To make the skill available to all your projects, place the unzipped skill folder in ~/.claude/skills/. To make it available only inside one project, place it in that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Check what the skill needs before you run it
The skill depends on a built-in Image Gen tool being available to the agent. It also needs access to any files, screenshots, or Figma frames you reference. Local shell access is optional; it is only used for the user-context preflight script.
The package runs scripts and uses the network, so review the files before installing if that matters to you. The package contains agents/openai.yaml and SKILL.md.
- Required: a built-in Image Gen tool available to the agent
- Required if used: access to referenced files, screenshots, or Figma frames
- Optional: local shell access for the user-context preflight script
- Runs scripts: yes. Uses network: yes.
How do you trigger the ideate skill with a natural request?
You do not need a special command. Describe the design work you want in ordinary language, and mention the screen, feature, or component and the goal. Attach or name any references you have.
The skill tells the agent to stop and ask if a named file or reference cannot be seen, so give it a real path, upload, or running local app.
- Give me three design variants for our checkout screen, using the screenshots in this folder.
- Explore visual directions for a settings page for a mobile banking app.
- Make some remixes of this Figma frame for the onboarding flow.
- Show me image-generated approaches for a pricing panel that match our existing tokens.
What happens during a concept session?
The agent first confirms the target, the intended user, the product surface, and the goal, and preserves any hard constraints you gave. It then inspects the references it needs rather than guessing from filenames.
It chooses a canvas size that fits the work. For example, mobile app screens use 390 x 844, tablet app screens use 834 x 1194, and desktop apps, dashboards, admin tools, or SaaS use 1440 x 1024. Landing pages are 1440 wide and scrollable.
It then generates three independent images. Each direction gets a descriptive name, and numbers are assigned only after the results appear in the thread, so refer to options by the number shown there.
- For a specific component or existing surface, the variants change structure, interaction, hierarchy, and emphasis before brand style.
- For a broad product idea, the skill explores three meaningfully different product directions.
- If you want changes, give feedback and the agent generates revised options.
- After you select an option, the agent builds from it, using that image as the visual target for image-to-code.
Get better results from ideate
Attach the real material you have. Screenshots, Figma frames, design tokens, Storybook captures, and component references let the generated images match your design language. The skill attaches only images it actually received, and says so if an attachment failed.
Be explicit about constraints such as brand colours, required fields, or a must-keep action, since the skill preserves hard constraints in every image.
- Name the exact screen and the one primary action you want shown.
- Upload a reference image rather than describing it in words.
- Tell the agent which parts of the product should stay the same if you want an existing direction kept.
- Choose the option by its number as displayed in the thread.
What people use it for
- Exploring layout directions for a new screen before a designer commits to one.
- Creating mockup options for a developer to choose from before writing front-end code.
- Producing variants of an existing screen that stay within the team's design system and tokens.
- Generating remixes of a Figma frame to test different hierarchy or emphasis.
- Comparing three distinct product directions for a broad feature idea.
Frequently asked questions
Is the ideate skill free to use?
The source states the skill is released under the MIT licence. It does not list prices, so check the licence and any costs of the Claude apps or the image generation tool you use.
What do I need to run the ideate skill?
You need a built-in Image Gen tool available to the agent. Access to any referenced files, screenshots, or Figma frames is needed if you use them, and local shell access is optional for the user-context preflight script.
Where do I install the ideate skill?
Unzip the downloaded ZIP into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Can ideate produce pixel-exact final designs?
No. The output is generated images, not editable design files, so it suits exploration rather than final production design.
Does the ideate skill send my designs anywhere?
Attached references may be sent to the image generation tool. Do not use the skill with sensitive or confidential designs unless you are comfortable with that service receiving them.
Why does the agent stop and ask me questions?
The workflow requires a clear design brief before generating images, and it stops if a named file or reference cannot be accessed. It also waits for you to pick an option before any build work begins.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use ideate if you are a product designer exploring layout or visual directions, or a developer who wants mockup options before writing front-end code, especially when you want variants grounded in your screenshots or design system. Pick something else if you need pixel-exact, editable final designs, if you want the agent to skip the selection step, or if your designs are too sensitive to upload to an image generation service.
Download the skill