Extract
poetry-extract turns a public website into theme material: point it at a domain and it writes a DESIGN.md plus deterministic design tokens, ready for Poetry's AA-gated theme importer.
Install and run
The gem adds one rake task. Hand it a domain; it prints what it wrote and the exact import command to run next.
gem "poetry-extract"
bin/rails "poetry:design:extract[stripe.com]"
# wrote tmp/poetry/design_extract/stripe.com/{DESIGN.md, theme.tailwind.css, tokens.css}
# next: bin/rails "poetry:design:import[tmp/poetry/design_extract/stripe.com/DESIGN.md]"
The pipeline
- Fetch. The site's styleguide, brand colors, a screenshot, and the homepage as markdown, via context.dev. Without a key it degrades to a plain homepage fetch: less evidence, same pipeline.
- Compose. One Claude call writes the DESIGN.md, with the screenshot as vision input and the fetched styleguide as the primary token source.
- Derive. The two token stylesheets are computed deterministically from the fetched styleguide and brand: same inputs, same bytes, every run. No model output lands in them.
-
Handoff. Nothing touches your theme. The printed
poetry:design:importcommand runs Poetry's existing importer, which drops any swatch failing WCAG AA.
CONTEXT_DEV_API_KEY=... # fetch: styleguide, brand, screenshot, homepage
ANTHROPIC_API_KEY=... # compose: the one model call
POETRY_EXTRACT_MODEL=... # optional model override
What it emits
Three files land under
tmp/poetry/design_extract/<domain>/:
| File | Contents |
|---|---|
DESIGN.md |
YAML frontmatter tokens (colors, typography, rounded, spacing, components) over a Markdown body with the spec's sections in order, overview through do's and don'ts |
theme.tailwind.css |
a complete Tailwind v4 stylesheet: :root and
.dark token blocks, the inline theme mapping, and a
base layer |
tokens.css |
the same tokens as plain CSS custom properties on
:root and .dark |
The variables use Poetry's own token vocabulary: the color pairs from
--background through --sidebar-ring,
--chart-1 through --chart-5, the three font
stacks, --radius, shadows, letter spacing, and spacing.
The stylesheets drop straight into anything that already reads
poetry tokens.
/* stripe.com — design tokens (vanilla CSS) */
:root {
--background: #ffffff;
--primary: #635bff;
--muted-foreground: #6c6c6c;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--radius: 0.5rem;
/* ...the full Poetry token vocabulary... */
}
.dark {
/* the same variables, dark values */
}
From extract to theme
The importer is the single door into your theme. It reads the
DESIGN.md and writes design-overrides.css; any swatch
failing WCAG AA is dropped and reported with the nearest passing
value, never shipped.
bin/rails "poetry:design:import[tmp/poetry/design_extract/stripe.com/DESIGN.md]"
The same importer serves the design-tool paths described in editors, and the theming guide covers where the overrides sit in the token layer and how to review them.