More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsDesign from a Live Site
Turn a live website into a design system, reusable components, and page layouts, ready for your next redesign, prototype, or migration
$19
Design from a Live Site
Example session with this skill installed
Turn our https://example-design-system.com site into a reusable foundation for a redesign. Extract its tokens, document components and responsive layouts, and resolve inconsistencies. Build a system page and compare the rebuilt components with the live originals.
- Read your context and instructions
- Compiled the design from a
- Generated the design tokens stylesheet
A live product turned into a design system, component specs, and a verified component showcase.
What you get
| Deliverable | What it contains |
|---|---|
| Design tokens | Measured and corrected versions, with light and dark themes |
| Component specs | Primary button, badge, input, and card—with anatomy, dimensions, and observed states |
| Responsive layout specs | Containers, margins, grids, and breakpoint behavior |
| Rebuilt components | A system page showing live components beside their token-based rebuilds |
| Decision log | Every correction linked to a finding and checked against the token diff |
The system, made consistent
- One violet: unify
#6d5efcand#6c5ffbundercolor.brand. - A shared radius: bring the button’s 11 px corners onto the 10 px scale.
- Readable text: correct muted text and badge colors, with contrast measurements recorded.
- A real pill: replace the badge’s
100%radius with9999px. - Named surfaces: replace the card’s hand-written gray background with
color.surface.
The measured version preserves what the site uses today. The corrected version records each deliberate change.
Components and layout
| Area | Captured behavior |
|---|---|
| Primary button | Default and hover styles, height, padding, typography, and radius |
| Badge | Size, text color, background, and pill shape |
| Input | Empty state, placeholder color, border, height, and radius |
| Card | Surface, spacing, badge, heading, and supporting text |
| Page layout | 1080 px main container, three-column grid with 16 px gaps |
| Mobile layout | One-column grid, smaller heading, and reduced page padding below 720 px |
States that were not observed are marked as unverified.
Check the rebuild
system.html puts the live components beside the rebuilt versions. Each comparison explains the differences through the decision log: the unified violet, corrected radius, improved contrast, or named surface.
The handoff includes DTCG tokens, components.md, layout.md, decisions.md, the token diff, and the component comparison page.
Next step: use the tokens and specs to build the redesign, then run the same fidelity check against its components.
system.html
CSS · design tokens
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Go from a live product to a foundation you can build on. This skill pack captures its visual language, maps component states and page layouts, and turns those measurements into tokens, component specs, and rebuilt UI. Resolve inconsistencies along the way, then compare the rebuild with the original so every difference is deliberate and explained.
What it does
- Extract design tokens by reading both declared CSS custom properties and the actual values rendered on-screen, capturing radii, spacing, and type scales.
- Audit token systems to identify near-duplicate colors, WCAG contrast failures, and brand color leaks with computed Delta E measurements.
- Spec live components by inventorying every variant and measuring all interactive states, including hover, focus-visible, and pressed.
- Perform fidelity checks by rendering rebuilt components side-by-side with live screenshots and logging every property difference in JSON.
How it works
- Extract: Run
scripts/extract.json live URLs to capture raw tokens and rendered usage across different themes and breakpoints. - Audit: Use
scripts/color-math.mjsto find inconsistencies and generate a corrected DTCG token set with a full decision log. - Inventory: Execute
scripts/components.jsto measure component anatomy and states, producing structured Markdown specs. - Compare: Build a
system.htmlpage to compare rebuilds against live screenshots, usingscripts/compare-measure.mjsto flag mistakes.
Frameworks & tools
This skill uses the W3C Design Token Community Group (DTCG) format and the dsgraph CLI for system validation and diffing. It relies on standard browser DevTools and Node.js for color mathematics and measurement comparisons.
Why this beats prompting it yourself
Generic prompts often result in "eyeballed" values or hallucinations of component states. This skill uses actual browser measurements and mathematical color difference formulas, ensuring your design system is backed by data rather than subjective visual estimation.
Use cases
- Migrating a legacy website to a modern DTCG-based design system.
- Auditing a design-to-code handoff for accessibility and token consistency.
- Verifying that a React or Vue rebuild matches a legacy product pixel-for-pixel.
- Creating a comprehensive component library spec from a live application.
Known limitations
Does not carry over logos, illustrations, or font files. Interaction measurements are limited to states reachable via pointer or keyboard. Sign-in protected pages require user-provided access.
Does not export assets like logos or font files. Limited to states reachable via pointer/keyboard. Requires local environment for Node.js scripts and dsgraph CLI.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 16 days ago
- Software
Node.js@dsgraph/cli
Permissions
File Scopes
Network access is needed to reach the target website and download @dsgraph/cli via npx. Local sites can be processed offline once the CLI is installed.