The Direct Answer
The fastest way to use real UI with Claude Code is to capture a focused component from a live page, paste the clean HTML and CSS into Claude Code, and ask for a specific adaptation.
That gives Claude Code the part developers usually struggle to describe: the actual hierarchy, spacing, typography, and states of a working interface. Instead of asking it to invent a navbar, card, form, or pricing section from a vague prompt, you give it a concrete reference and a clear job.
Why Real UI Helps Claude Code
Claude Code can reason about code, but it still needs useful context.
A prompt like "make this page look more polished" leaves too much room for guessing. A captured component shows what "polished" means in practice:
- Which elements belong together
- How dense the spacing should feel
- Where the primary action sits
- What typography scale is being used
- Which hover, focus, and responsive states matter
This is the difference between describing a shape in the dark and handing Claude Code the component itself.
The Workflow
- Find the UI pattern you want to learn from.
- Capture the smallest complete component with Element Armory.
- Paste the HTML and CSS into Claude Code.
- Add your project constraints: framework, CSS approach, accessibility needs, and design tokens.
- Ask Claude Code to adapt, not clone, the component.
- Review the output and test it in your app.
The important part is scope. A focused card is useful. A whole marketing page is noisy. Claude Code performs better when the captured reference is small enough to understand and complete enough to render correctly.
A Prompt That Works
Use a prompt like this:
I captured this component as HTML and CSS from a live website.
Use it as a visual and structural reference.
Rebuild it for our app with:
- React functional components
- TypeScript props
- our existing CSS module conventions
- semantic HTML
- keyboard-accessible interactive states
Do not copy brand names, tracking attributes, or source-specific class names.
Keep the layout, rhythm, and hierarchy, but make the implementation fit this codebase.
This works because it gives Claude Code the reference, the transformation, and the boundaries.
Where Element Armory Fits
Element Armory handles the slow part before Claude Code starts.
Manual DevTools copying usually gives you incomplete HTML, scattered styles, and a cleanup task. Element Armory captures the rendered element and its computed CSS so the input is already readable. Claude Code can spend its context on adapting the UI instead of repairing the capture.
That is the whole point: less time explaining the interface, more time shaping the result.
Good Use Cases
Use this workflow when you need:
- A better starting point for a component
- A visual reference for a layout Claude Code keeps missing
- A faster way to turn a real UI pattern into your own implementation
- A reference library for repeated frontend work
- A way to compare several patterns before choosing one
It is especially useful for common interface blocks: navbars, pricing cards, empty states, settings panels, dashboard cards, forms, modals, and onboarding steps.
Common Mistakes
Capturing too much. Send one component, not the whole page.
Skipping constraints. Tell Claude Code how your app is built before asking for output.
Copying instead of adapting. Treat captured UI as reference material, then rebuild with your own content and brand.
Ignoring accessibility. Ask Claude Code to preserve semantic structure, labels, focus states, and keyboard behavior.
Trusting the first output. Test the generated code in your app and iterate from there.
Next Steps
Start with one small component. Capture it, paste it into Claude Code, and ask for a focused rebuild that fits your project. Once that works, save the original reference and the adapted output so future UI work starts from something concrete.
If you also use Cursor, compare this workflow with using real UI with Cursor AI. For the capture side, read copy HTML without Inspect Element.