How to Use Claude Design in Claude Code Legal Workflow

How to use Claude Design in Claude Code for a legal workflow is the question that defines whether the tools deliver on their potential. Anthropic launched Claude Design on April 17, 2026, and the handoff from Claude Design to Claude Code is what turns a visual prototype into a deployed internal tool. The handoff is a single instruction inside the Claude interface — but the prompt sequence around it determines whether the deployed tool actually works for legal-ops use cases. I run Claude Code daily and have walked through this handoff for several internal-tool builds. This is the actual workflow: the prompts that work, the failure modes to avoid, and where IT involvement still matters. Pricing pulled from the Anthropic pricing page — both tools bundled at every paid Claude tier from Pro ($20/user/month) up.

The end-to-end workflow at a glance

From idea to deployed internal tool, the workflow has six phases:

- Phase 1, Spec. Write a one-paragraph description of the tool. What it does, who uses it, what data it touches, what it integrates with. 30 minutes. - Phase 2, Visual prototype in Claude Design. Generate the visual front-end. Iterate on layout, fields, brand. End state: a working visual prototype shareable as a temporary URL. 1-4 hours. - Phase 3, Stakeholder validation. Share the prototype URL with internal stakeholders. Get sign-off on visual direction before committing to build-out. 1-3 days elapsed time. - Phase 4, Handoff to Claude Code. Single instruction: "Build this as a deployed app, [stack and infrastructure choices]." Claude Code generates the application layer, auth, database, hosting, integrations. 1-3 days. - Phase 5, IT review and deployment. Your IT team reviews the integration code, validates security and access controls, and handles the production deployment. 1-2 days. - Phase 6, Ongoing iteration. Future feature requests and bug fixes happen in Claude Code, not Claude Design. The visual front-end is now part of the app code. 2-4 hours/month per active tool.

Total elapsed time for a representative internal tool: 1-2 weeks from concept to deployed production. Compared to traditional design-then-dev cycles (6-12 weeks for an equivalent tool), the compression is meaningful. The compression comes from removing the design-to-developer translation step (Claude Design produces code, not design files) and from Claude Code's ability to handle most of the boilerplate engineering work without billable engineering time. The Claude Design for legal operations 2026 anchor frames this as the central pattern.

The prompt sequence I actually use

Walking through the prompt sequence for a representative build, an NDA triage internal tool. Adapt the structure to your specific tool.

Phase 1 prompts (Claude Design, visual prototype):

*"Build me [tool description]. Three columns: [bucket 1], [bucket 2], [bucket 3]. Each card shows [fields]. Sticky top bar with [navigation/search elements]. Match the brand tokens I'll attach."*

Attach brand tokens or a screenshot of your firm's existing site. Iterate on visual fidelity, typically 3-5 rounds, 10-30 minutes total.

*"Add [secondary screen, e.g., detail view or edit modal]. When I click a card, open a side panel showing [details]. Three large action buttons: [bucket 1], [bucket 2], [bucket 3]. Free-text notes field. Save action triggers status update."*

*"Add [audit/log view]. Filterable by [filter dimensions]. Each entry shows [audit fields]. Export-to-CSV button."*

Validate the visual prototype with stakeholders. Get sign-off before proceeding.

Phase 2 prompt (handoff to Claude Code):

*"Build this as a deployed app. Use Next.js [or your firm's preferred stack: SvelteKit, Remix, etc.]. Database: Postgres on [Supabase / Neon / your firm's preferred host]. Add auth via [Okta / Azure AD / Google Workspace SSO, your firm's identity provider]. Implement role-based access for [roles, e.g., admin, reviewer, partner]. Wire the [external integration, e.g., Cowork legal plugin / DocuSign / iManage] to call the relevant API. Deploy to [Vercel / your firm's preferred host]."*

Claude Code generates the deployed app. Time: 1-3 days for a typical internal tool, depending on integration complexity.

Phase 3 prompts (iteration on Claude Code):

*"The [feature] doesn't behave as expected. When I do X, the result is Y, but I want Z. Fix it."*, debug-style prompt for issues.

*"Add [new feature]. [Description of feature]."*, feature-addition prompt.

*"Update the [field/section] to [new behavior]. Make sure existing data still works."*, schema-change prompt.

Claude Code handles iteration cleanly when prompts reference specific behaviors and files. Vague prompts ("make it better") produce vague results. The NDA triage internal tool guide has more specific prompt examples for that use case.

Common failure modes and how to avoid them

Five failure modes I've seen consistently:

Failure 1, Skipping the visual prototype phase. Some legal-ops directors try to go straight from spec to Claude Code, skipping Claude Design. This works for very simple tools (a single-page utility) but fails for anything with significant UI. Without a visual prototype, stakeholder validation is impossible until the tool is fully built, by which point changing the visual direction is expensive. Always prototype in Claude Design first if the tool has any meaningful UI complexity.

Failure 2, Skipping stakeholder validation between Claude Design and Claude Code. The handoff to Claude Code commits to a build-out. If stakeholders haven't validated the visual prototype, you're building something that may not match their actual needs. Build the prototype, share the URL, get sign-off, then hand off. Don't skip.

Failure 3, Underspecifying the handoff prompt. A prompt like "Build this as a deployed app" without specifying stack, identity provider, integrations, or deployment target leaves Claude Code to guess. The output will be functional but probably won't match your firm's posture. Specify all the integration points, identity provider, and deployment target in the handoff prompt explicitly.

Failure 4, Skipping IT review of integration code. Claude Code generates working integration code, but the access scopes, API tokens, and security configurations need IT review before production. Skipping this step creates security exposure that compounds over time. Build the IT review into the workflow as a standard phase, not an exception.

Failure 5, Treating the deployed tool as done. Internal tools need ongoing maintenance — feature requests, bug fixes, integration updates, design refreshes. Plan for 2-4 hours per month of legal-ops or IT time per active tool. Tools without a maintenance plan decay; users abandon them; the firm reverts to the manual processes the tool was supposed to replace.

The Claude Design vs Claude Code decision guide covers the workflow boundary between the two tools in more detail.

Where IT involvement matters even with Claude Code

Claude Code handles a lot of engineering work autonomously. It writes the database schema, the auth scaffolding, the API integration code. For a legal-ops director without coding background, the workflow can feel almost code-free. But there are five places where your IT team's involvement materially matters:

- Identity provider configuration. Wiring auth to Okta, Azure AD, Google Workspace, or your firm's identity provider requires admin access to configure the SSO application, set redirect URIs, and grant API permissions. Claude Code generates the application code; your IT admin grants the access scopes. - Production environment setup. Hosting (Vercel, AWS, your firm's cloud), domain configuration (intake.[firm].com), SSL certificates, environment variable management. Claude Code can deploy to dev/staging environments easily; production deployment to firm-controlled infrastructure requires IT. - Integration with firm systems. Connecting to iManage, NetDocuments, Clio Manage, or your firm's existing practice-management platform requires API credentials and access scopes that only IT or admin users can provision. Claude Code generates the integration code; IT validates and provisions. - Security review. Especially for tools touching privileged or confidential data, IT's security review is essential. Look at access controls, data encryption, logging, audit trail handling. Catch issues before they become incidents. - Backup and disaster recovery. Production tools need backup strategies and disaster-recovery plans. Claude Code can generate the configuration; IT operationalizes the runbook.

The co-build pattern works well: legal-ops drives the spec, prototype, and feature direction; IT validates security and handles the production-environment work. Most firms find this collaboration more productive than either pure-IT or pure-legal-ops builds. The Claude Design for legal operations 2026 anchor covers the cultural shift this implies for the relationship between legal-ops and IT.

The Bottom Line: The verdict: the Claude Design to Claude Code handoff is the workflow that makes the tools actually deliver on their potential. Build the visual prototype in Claude Design, validate with stakeholders, hand off to Claude Code with explicit stack and integration specifications, route through IT for security and deployment review. Total elapsed time for a typical internal tool: 1-2 weeks from concept to production. Skip any phase and the tool either doesn't ship or ships broken.