Import Pages From Your Website

When you first set up Flint, it imports one page from your existing site. To build out the rest of your pages, you can use screenshots to recreate them in Flint.

This guide walks through the process: capture a screenshot of the page you want to recreate, let Flint generate a rough version using your imported brand styles, then refine section-by-section.

Multi-time brand sync on Custom plans: For customers on Custom plans, we offer multi-time brand sync. This means your Flint site can be re-synced with your main website multiple times, ensuring your brand styles, colors, and design tokens stay up to date as your main site evolves. Contact your account manager or reach out to sales@tryflint.com to learn more about Custom plans.

Take a screenshot of the page you want to replicate.

Requirements:

• •Use sufficient resolution so Flint can read all text clearly
• •Capture the full page or the primary sections you want to recreate
• •Include any key visuals, layouts, or design patterns

Tip: Browser extensions like "Full Page Screen Capture" or built-in developer tools can capture entire pages in one image.

Paste your screenshot into the Flint chat along with context about what you need.

Example prompt: "Create a new page based on this screenshot. This is our competitor's pricing page. Recreate the layout and structure using our brand."

Optional: If you have brand design tokens (colors, typography scales, spacing values), upload them alongside your screenshot. This helps Flint apply precise styling from the start.

Have HTML or Tailwind code? Flint understands HTML and Tailwind CSS. If you have access to the source code, you can paste it directly. If the HTML uses custom CSS classes or non-standard values, include their definitions (e.g., "text-brand-blue is #1a73e8").

What happens:

• •Flint analyzes the screenshot layout, sections, and content structure
• •Creates new sections matching the visual hierarchy
• •Applies your existing brand colors, fonts, and design tokens
• •Generates placeholder content based on visible text

This creates a starting point that you can refine in the next step.

After the initial pass, improve each section individually.

A. Screenshot a specific section

If a section was not fully captured or needs adjustment, paste a cropped screenshot of just that section:

"Update the pricing cards section to match this layout more closely."

This works well for complex layouts like comparison tables, card grids, or multi-column features.

B. Give direct instructions

For smaller tweaks or changes that need exact values, describe what you want:

• •"Make the hero headline larger and center-aligned"
• •"Add a fourth column to the feature comparison table"
• •"Change the CTA button color to match our primary brand color"
• •"Set the button border-radius to 8px and use font-weight 600"
• •"Use 16px for body text and 48px for the main headline"

C. Refine mobile views

To match a specific mobile layout, paste a screenshot of the mobile view:

"Here's how this section should look on mobile. Update the responsive layout to match."

Alternatively, ask Flint to handle it automatically:

"Make this section mobile responsive."

Flint will apply best practices for mobile layouts, including stacking columns, adjusting font sizes, and optimizing touch targets.

If the page you are replicating includes forms (contact forms, lead capture, newsletter signups), you will need to wire them up to submit data correctly.

See the Lead Capture documentation for instructions on connecting forms to your CRM, email marketing tools, or other destinations.

To add animations to your replicated page, you can either describe the desired effect or provide keyframes if you have them.

Describe the animation:

• •"Add a fade-in animation to the hero section when the page loads"
• •"Make the feature cards slide up as they enter the viewport"
• •"Add a subtle hover scale effect to the pricing cards"

Provide keyframes:

If you have specific CSS keyframes, paste them directly:

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

Note: Flint does not natively support WebGL or advanced libraries like Three.js. Enterprise customers can reach out to support@tryflint.com to discuss importing specific elements and special integrations.

Screenshot quality matters

• •Aim for a middle ground: text should be clearly visible and sharp
• •Avoid blurry or heavily compressed images
• •Overly high-resolution images can be harder to process, so standard screen captures are ideal

Be specific about priorities

• •Tell Flint which elements matter most
• •"Focus on matching the card layout exactly; the colors should use our brand"

Iterate quickly

• •Do not try to get everything perfect in one pass
• •Make incremental changes and preview often

Use your design system

• •Flint applies your existing brand tokens by default
• •Specify "use exact colors from screenshot" only if needed