designseeddocs

Generator

Best practices

2 min read

The URL extractor is a heuristic. It does well on sites with strong, consistent brand systems and worse on sites that mix templates or load a lot of third-party UI. These patterns improve the result.

Pick the right page

The extractor samples whatever's rendered at the URL you give it. For most brands, the homepage is the right pick — it carries the most concentrated brand expression. If the homepage is unusually sparse, try a product or feature page that's representative of the design system in use.

Avoid:

  • Login pages — typically minimal and don't reflect the production design.
  • Status pages — generic and template-heavy.
  • Marketing landers for a single campaign — overweight on temporary visual treatments.

Wait for hydration

Single-page apps render in two passes: server-shipped shell, then client hydration. Our extractor waits ~500 ms after domcontentloaded for hydration to settle, which is enough for most sites. If a brand is heavily client-rendered (e.g. delays its real fonts behind a font-loading API), the resulting DESIGN.md may capture the loading state instead of the final.

Workaround: re-run the job. The cache won't help (extractor doesn't cache) but the second run usually catches the post-hydration state.

Edit immediately, don't ship the raw output

The extractor produces a starting point, not a finished system. After the job completes, open the result in the editor and:

  1. Confirm the primary is actually the brand primary (heuristic sometimes picks an accent).
  2. Check both themes if the brand supports dark mode — the extractor only synthesises a dark theme when the page declares one.
  3. Trim spacing values that are clearly noise (e.g. 7px from a one-off card padding).
  4. Add a "Patterns" section at the bottom describing the buttons, cards, and layout grids the brand uses.

Higher confidence = safer install

Watch the confidence pill in the result panel. High = palette is rich, font is detected, radii vary; ship as-is or with minor edits. Medium = some signals weak; expect to refine 1–2 anchors. Low = sparse harvest; consider running against a different page or going from scratch.