Mirror Sections from External Sites

You've seen it before: a scroll animation on a competitor's site, a hero section with a floating card effect, a feature grid that just feels right. You know what you want your page to look like, but when you try to describe it in words, the result never quite matches.

The problem is not your prompt. The problem is that Flint has no idea what you're looking at.

Flint can work directly from external references. You can paste a URL, share a screenshot, or paste HTML or CSS code straight into the chat. Once Flint sees what you're referencing, it can rebuild that experience using your brand's styles and design system.

This guide walks through each approach, from simplest to most precise.

The easiest way to reference an external design is to paste the URL directly into chat.

Example prompts:

• •"Make our hero section look like the one on [url]"
• •"Copy the layout of the features section from [url]"

Flint will visit the page, analyze its layout, visual hierarchy, and interactions, then rebuild a version of that section using your existing brand styles.

Good for:

• •Layouts and structure
• •Section patterns (hero, pricing, feature grids)
• •General visual style and spacing

Keep in mind: Flint rebuilds the section using your design system. It won't copy their exact colors, fonts, or content. It translates the layout and experience into your brand.

If the site is behind a login, uses dynamic content, or you just want to reference a specific moment in an animation, a screenshot works just as well.

Capture what you want to replicate and paste it into chat alongside your instructions.

Example prompts:

• •"Make our pricing cards look like this [screenshot]"
• •"I want this kind of layout for our features section [screenshot]"
• •"Update the mobile version to match this [screenshot]"

Tips for good screenshots:

• •Text should be sharp and readable
• •Capture the full section, not just a sliver
• •For animations or hover states, capture the state you want to replicate (e.g., after hover, mid-animation)

For mobile layouts: Paste a screenshot of the mobile view and tell Flint: "Here's how this section should look on mobile. Update the responsive layout to match."

If you have access to the source code from a competitor's site, a template, or a design resource, paste it directly into chat. Flint understands HTML and Tailwind CSS and can translate the structure into your site's design system.

Example prompts:

• •"Here's the HTML for the section I want to recreate: [paste code]. Build something like this using our brand."
• •"This is the CSS animation I want to add to our hero: [paste keyframes]. Apply it to the headline."

For CSS keyframes specifically:

"Apply this animation to the hero section:
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}"

If the code uses custom class names (like .btn-primary or text-brand-blue), tell Flint what they map to: "text-brand-blue is #1a73e8". This helps it apply the correct values from your design system.

Note: Flint does not support WebGL or advanced libraries like Three.js out of the box. Enterprise customers can reach out to support@tryflint.com to discuss special integrations.

For complex interactions like multi-step animations, scroll-triggered effects, or hover states that are hard to capture in a screenshot, Flint can open a live browser session and observe the page directly.

To use this, describe what you want and include the URL:

"Visit [url] and look at how the hero animation works. Recreate that effect in our hero section."

Flint will open the page, interact with it, and use what it observes to build the equivalent experience for your site.

Credit cost: This feature uses a cloud browser and consumes more credits than a standard request. Use it when a URL paste or screenshot is not giving you enough fidelity, not as a first step. For most layout or style references, Options 1 or 2 will be faster and more credit-efficient.

After the initial pass, you can improve each section individually.

Target a specific section:

Paste a cropped screenshot of just the part that needs work:

"The card hover effect doesn't match. Here's what I mean [screenshot]. Fix just that part."

Give exact values:

If you know what you want, say it directly:

• •"Make the headline 48px and center-aligned"
• •"Add a subtle shadow on hover, about 8px blur"
• •"The gap between cards should be larger, closer to what I showed you"

Iterate quickly:

Do not try to get everything perfect in one pass. Reference the external site for structure, then use direct instructions to dial in spacing, sizing, and interactions. Small, focused changes are easier to review and faster to get right.

Be specific about what to keep from the reference

Tell Flint which parts matter most:

• •"Copy the animation but use our brand colors"
• •"Match the card layout exactly; ignore their typography"
• •"I want the scroll behavior, not the visual style"

Use screenshots for animation states

If you want a specific hover or animation frame, capture a screenshot of that exact moment. A screenshot of the "hovered" state tells Flint more than describing it in words.

Use your design system

Flint applies your existing brand tokens by default when rebuilding from a reference. Only override this if you explicitly want values from the external site: "Use the exact card background color from the screenshot, not our brand color."

Save browser tool credits for complex interactions

The live browser feature is powerful but uses more credits. Use it for scroll behaviors, animated sequences, or anything a screenshot cannot capture accurately.