Markdown edition

# Turn a mobile app spec into a checked Claude Design prototype

> Use an approved app spec to build every required Claude Design screen and interaction, check the prototype on a mobile device, then verify the reviewed export or share.

By BIG CHANGE Editorial

Published: 2026-10-21T13:13:42.881Z
Updated: 2026-10-21T13:13:42.881Z
Canonical: https://bigchange.ai/blog/claude-design-mobile-app-spec-interactive-prototype-guide

![Conceptual charcoal illustration of one person holding an unbranded smartphone and touching an orange control in a generic mobile layout.](https://bigchange.ai/api/media/file/claude-design-mobile-device-walkthrough-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

Claude Design can make an interactive prototype from a written mobile app specification. The useful result is a connected set of screens that the product owner can inspect against the approved requirements and that a reviewer can actually open and use. This guide takes a product designer or product lead from the approved spec to that review. It describes documented controls and checks for you to perform; BIG CHANGE has not run this workflow in a Claude account or tested a generated app on a device.

## The big change

- **What changed:** Claude Design is now available as a Design artifact in Claude conversations and the Artifacts tab. You can give it a specification, refine its canvas through chat, comments or direct edits, and export or share the result.
- **Why it matters:** A product team can connect the screens and paths in its approved spec to a prototype before implementation, then record which interactions work in a real mobile walkthrough.
- **What to watch:** The generated design needs a requirement-by-requirement review. A responsive canvas or desktop-sized phone view does not establish that onboarding, controls, dark mode or keyboard entry work on a permitted mobile browser or device.

## Prepare the specification and review record

Start with an owner-approved, dated revision of the actual app specification. It should identify its intended users and goal, every required screen and state, the actions and transitions between them, onboarding steps, dark and light appearances, navigation, content rules, and acceptance criteria. Have the owner resolve missing product decisions. Supply permitted assets and realistic content approved for this review, including any representative records needed to show populated, empty and error states. Keep sensitive production records out unless the organization has explicitly authorized their use.

Before uploading anything, confirm the intended Claude account and organization may process the spec, assets and content. Claude Design is available on Free, Pro, Max, Team and Enterprise plans, but Artifacts also requires the account or organization's cloud code execution and file creation capability. The current route is a Design artifact in a chat or the Artifacts tab. An existing, approved design system may be attached or selected if the account supports it; [building a reusable system is a separate task](https://bigchange.ai/blog/claude-design-reviewed-brand-system-guide). Design systems have their own plan and organization controls, so a missing system should not be silently replaced with invented brand rules.

Make a private requirement map before generating. Give each requirement an ID and record its expected screen, state, action, destination and acceptance result. Include each onboarding transition, both theme states, back navigation, form submission and response states, and any empty or error states the spec requires. Note the target mobile dimensions, the actual permitted phone and browser, and the reviewer. Leave columns for the observed result, defect, corrected version and reviewer decision. This is your record, not a Claude feature.

## Build all the specified screens and paths

1. **Start a Design artifact.** In a Claude conversation, describe the design or choose **Output > Design**. Alternatively, open **Artifacts** and select the **Design** template. Anthropic also documents a Claude Code route, but it is unnecessary for this browser-prototype review. Confirm you are in the intended account before attaching the authorized spec and references.
2. **Ask for the complete connected prototype.** State the app goal, audience and target mobile dimensions. Point to the approved spec revision and the requirement map. Ask Claude to include every listed screen and state, connect each required action to its intended destination, build the full onboarding flow, and represent both light and dark appearances. Tell it to use only the approved assets and realistic representative content, and to flag gaps in the spec instead of making product decisions. A useful request is: “Use the attached approved spec and requirement map to create one connected mobile prototype. Cover every required screen, state and transition, including onboarding and both themes. Use only the attached approved content and assets. List any requirement you cannot represent for owner review.” Inspect that list; do not treat the request itself as proof of coverage.
3. **Compare the canvas with the map.** Claude Design presents artboards and layers on a canvas. Open each generated screen and compare its content, navigation destinations and visible states with the spec. Mark a requirement passed only when you can identify its saved screen or interaction. Record omissions and unsupported choices. A polished opening screen does not account for the remaining flow.
4. **Repair specific gaps.** Use chat for a missing screen, path or other structural change. Use an inline comment for a specific control or section, or edit layout details directly on the canvas. Request a working transition where a button merely looks clickable. Add or correct the specified onboarding progression, back behavior, form and result states, error handling, and theme changes. Recheck the affected requirement after each change. Anthropic notes that inline comments can sometimes disappear before Claude reads them; if a comment is not acted on, put the exact request in chat and verify the result. Do not infer that a suggested accessibility improvement passed a real check.
5. **Keep a reviewable checkpoint.** Save a dated private export at a material review point and record its filename, file hash, spec revision, requirement-map revision and unresolved items. Anthropic says Claude Design does not yet have built-in version history. Its suggestion to save the current project before trying a different direction can help preserve an iteration, but your dated export and record identify the version reviewed here. Keep the exported file and hash private until the owner chooses an audience.

## Walk the prototype on an actual mobile browser or device

6. **Open the interactive artifact on the permitted device.** Use the available preview or an exported standalone HTML copy if it opens and runs in the approved mobile browser. On Claude for iOS or Android, Anthropic documents viewing a Design artifact full screen in the Artifacts tab and editing it. Confirm that the route you choose exposes the required interactions on the actual device. If the account or device cannot open an interactive version, record the barrier and hold completion. A desktop viewport check cannot replace this walkthrough.
7. **Run every required path from start to result.** Begin with the first onboarding screen and take each specified action through its expected destination. Repeat the primary tasks, back navigation, theme switch and any form, empty or error path in the spec. Use the approved representative content so the displayed text and data look like the intended review, without presenting made-up customer records as real. For each action, record device and browser, artifact identity or export hash, start screen, input, observed screen or state, and pass or fail. Mark a control that only looks interactive as a failure. Do not claim native gesture or system behavior from a browser prototype.
8. **Inspect every screen at the target sizes.** Review light and dark states for text legibility, clipped or overflowing content, reachable controls and touch targets. Check keyboard appearance and entry where the spec uses input, plus any platform-specific gesture the product intends. Use the actual device walkthrough to judge the interaction paths, and use target-size canvas or viewport checks to catch layout differences. Record what could not be exercised. This review does not certify accessibility or native iOS or Android behavior.
9. **Correct and rerun.** Return each failed screen or path to Claude Design with the precise observed problem and expected behavior from the spec. Inspect the correction on the canvas, then repeat its affected path on the same permitted device. If a product decision remains unresolved, return it to the spec owner. Reconcile the whole requirement map after the final correction: every required item should have an observed pass or an explicit open issue. Do not call the prototype complete while a required mobile interaction remains untested or failed.

## Export or share the exact reviewed version

10. **Save the final review copy.** From the project view, **Export** offers **standalone HTML** and **.zip**, among other formats. Choose a format that preserves the interactions you have actually checked, save the dated file, compute a file hash with your organization's normal tool, and record it beside the final device results. Reopen the exported copy in the intended environment and repeat the essential paths. Export availability does not guarantee that every generated interaction survives in the file; the reopened copy is the check.
11. **Read back reviewer access.** Designs start private. If sharing is approved, use **Share** to set the intended people and access level, then have the named reviewer sign in and open the link. The sharing options vary by plan and organization policy. Current Artifacts guidance says shared artifacts generally require a Claude account; a specific email invitation requires the matching account. On Team and Enterprise, organization controls may restrict outside access. Check the actual **Who has access** setting and what the reviewer can open, and record the artifact identity, audience, reviewer, date and decision. Change sharing settings on web or desktop, since the mobile app cannot do that. If the review copy is an export, deliver it through an owner-approved private channel and have the reviewer reopen that exact file. Do not call an unreviewed screenshot a handoff.

The completion record should connect the approved spec revision to all saved screens and states, the actual mobile-device path results, the final export hash or shared artifact identity, and the reviewer’s access and decision. Any remaining failure stays visible. A separate handoff to Claude Code or a native app team requires its own implementation and testing; this prototype is the reviewed design artifact.

Claude Design draws from the same usage pool as other Claude work, including Claude Code. Larger projects and repeated iterations may consume more allowance; work stops at the account limit unless enabled usage credits apply. Check the current account before starting a substantial review. The standalone claude.ai/design route is scheduled to close on December 14, 2026, so use the current integrated route for new work. This guide makes no time, cost, native-code or production-readiness claim based on an unrun example.

For another design-product handoff, our [Genspark prototype and source ZIP guide](https://bigchange.ai/blog/genspark-design-prototype-source-zip) explains its separate copy-and-inspect task.

## Sources & further reading

- [Anthropic: Get started with Claude Design](https://support.claude.com/en/articles/14604416-get-started-with-claude-design) explains the integrated chat and Artifacts route, canvas iteration, mobile viewing, export formats, usage pool and version-history limit. Its examples are product guidance, not a test of this app.
- [Anthropic: What are artifacts and how do I use them?](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them) documents plan availability, template creation and the account capability needed for artifacts.
- [Anthropic: Share artifacts](https://support.claude.com/en/articles/9547008-share-artifacts) details private defaults, access levels, account requirements and organization sharing controls. The reviewer must verify the setting on the actual artifact.
- [Anthropic: Set up your design system in Claude Design](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design) covers the optional reusable design-system input and its separate eligibility; this prototype does not require creating one.

## Sources

- [Get started with Claude Design](https://support.claude.com/en/articles/14604416-get-started-with-claude-design) — Primary product guide for integrated Design access, chat/Artifacts labels, canvas artboards, iteration controls, mobile viewing, export choices, privacy, shared usage and lack of built-in version history. Its examples do not validate this reader's prototype.
- [What are artifacts and how do I use them?](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them) — Documents Design template availability across plans and the cloud code execution/file creation capability prerequisite; does not establish actual prototype behavior on a particular device.
- [Share artifacts](https://support.claude.com/en/articles/9547008-share-artifacts) — Explains private default, Share and Who has access controls, reviewer account needs, invitations and organization restrictions; the actual intended reviewer must read back access.
- [Set up your design system in Claude Design](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design) — Establishes optional design-system input and its separate paid-plan beta and organization controls; creating a system is outside this guide's task.
- [Build and check a reusable Claude Design system](https://bigchange.ai/blog/claude-design-reviewed-brand-system-guide) — Contextual related coverage #461 for an optional reusable brand system, not a dated continuation.
- [Copy a Genspark Design prototype and inspect its source ZIP](https://bigchange.ai/blog/genspark-design-prototype-source-zip) — Contextual related coverage #403 for a distinct copy and source-inspection workflow, not a dated continuation.