Importing Assets: Screenshots, Docs, and Codebases
The fastest way to get Claude Design producing on-brand work is to show it what you already have. Import reference material at prompt time and every output is visually grounded in your product, not in generic AI aesthetic defaults.
Here's the web capture tool in action, one of the less obvious import paths. It grabs live elements directly from any website, so prototypes feel like the real product instead of a sketch of it.
What you can import
- Screenshots & images
- PNG, JPG, GIF, WebP. Your current product, competitor products, inspiration references.
- Documents
- DOCX, PPTX, XLSX. Great for turning a written spec or an old deck into an updated visual.
- Code repositories
- Point Claude at a GitHub repo or local codebase. Claude reads your component architecture and CSS to inform the output.
- Design system files
- Figma files and design tokens. Claude extracts colors, typography, spacing, and reusable components automatically.
- Web capture
- A built-in tool that grabs elements directly from any live website. Pull real buttons, headers, or sections from your deployed product.
When to use which
New project from scratch
Start with 1-2 reference screenshots of products you admire + a color palette. Claude picks up tone without copying.
Iterating on an existing product
Upload current product screenshots first. Claude matches your existing style by default, so new work looks like the same product.
Building on your codebase
Link the repo. Claude generates designs that use your actual components, much closer to what you'd hand to a developer.
Redesigning from a spec
Upload the PRD as DOCX or PDF. Claude reads the requirements and produces designs that honor the constraints.
If your product is live, use it to pull in your actual header, nav, and footer. Prototypes feel like the real thing instead of a sketch of it.
2-3 focused references beat 15 loosely related ones. One source gets you started; multiple give Claude more to work with, but there is a point of diminishing returns.
You can import context
- Know the supported file types
- Know which source to use when
- Can use the web capture tool for live-product references
Module 2 is about iteration, turning the first draft into something shippable.