💡 Claude design system from Eagle references
==tl;dr: Use design references saved in Eagle as input for Claude to generate a coherent design system, then have Claude design the website for a project.==
Given some of the design references and websites I saved in Eagle, basically create a design system with Claude — once my usage resets — and then let it design a website for my project.
Workflow
- Curate references in Eagle — save design inspiration (color systems, typography, layout patterns, UI components) from sites and tools into Eagle’s visual library.
- Feed references to Claude — share screenshots or descriptions of the saved references with Claude.
- Generate design system — have Claude produce a coherent design token set (colors, type scale, spacing, component patterns) consistent with the reference aesthetic.
- Design the website — use the generated system to have Claude produce the actual site layout, page designs, or component library for the target project.
Why
- Eagle makes visual reference gathering frictionless — drag-and-drop, auto-screenshotter, tag-based browsing.
- Claude can synthesize a coherent design system from disparate references far faster than doing it manually in Figma.
- Removes the blank-canvas problem: a reference-grounded design system gives Claude constraints to work within, producing better output than an open-ended prompt.
Open questions
- Which project is this for? (Left open at time of capture — see candidates below.)
- Does Claude’s artifact/image handling support direct Eagle export screenshots?
- What format should the design system output be? (CSS variables, Tailwind config, Figma tokens?)
Project candidates
- OpenClaw for PKM — has a website component that would benefit from a polished design.
- My AI native Obsidian Setup — public-facing page (alexanderweichart.de) could use a design refresh.
Related
- Ideas — holding area.
- Open-Source Model-Agnostic AI Platform — the kind of platform where this workflow would be a native feature.