Skip to the shop floor
Sign in Open your shop
Stylepack logo

Design tools

Stylepack

Extract a design system from any website for AI

0 votes. Log in so you can vote for Stylepack Follow what's new. Log in so you can follow Stylepack

A web tool that extracts a website's design system into agent-ready formats including DESIGN.md, BEHAVIOR.md, design tokens, Tailwind theme and screenshots.

About this launch

Screenshot of the Stylepack homepage
stylepack.ai, as visitors see it

Stylepack turns any public website into a design pack for AI coding agents. You paste a website URL and get a folder containing DESIGN.md (in Google's format), BEHAVIOR.md (covering interactions and responsive design), SKILL.md (for Claude Code and Cursor), design tokens in W3C format, CSS variables, a Tailwind v4 theme, and screenshots at four widths plus alternate themes.

Every value is measured from the live page, not guessed. The tool captures hover and focus states, tooltips, menus, motion, scrolling, tables, forms, text wrapping, dark mode and all breakpoints. The design pack serves as a reference for AI agents to build projects with a similar look and feel.

Stylepack works with Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable and Bolt. With Pro, AI agents can use Stylepack directly through an MCP server and REST API.

What it does

  • DESIGN.md in Google's format describing colors, type, spacing, radii, shadows and components
  • BEHAVIOR.md covering hover, focus, tooltips, menus, motion, scrolling, tables, forms and dark mode
  • Screenshots at four widths: 1440, 1024, 768 and 390 pixels
  • W3C design tokens (DTCG) format for Style Dictionary and Figma plugins
  • CSS custom properties with all design values
  • Tailwind v4 theme block
  • SKILL.md for Claude Code and Cursor
  • MCP server integration for AI agents to fetch packs automatically
  • REST API with keys for automated access
  • Private packs accessible only to the user

Pricing

Pricing model: Freemium

Free: 2 design packs a day without account, 5 per day with free account. Pro: $9 per month (or $90 per year) for 50 packs per month, any page of a site, private packs, MCP server and REST API.

Shopper questions

What is Stylepack?

Stylepack is a web tool that turns any public website into a design pack for AI coding agents, including DESIGN.md, BEHAVIOR.md, SKILL.md, design tokens, a Tailwind theme and screenshots in one zip file.

How do I copy a website's design into Cursor or Claude Code?

Paste the site's address into Stylepack and download the pack. Put the folder in your project, then ask the agent to read DESIGN.md and BEHAVIOR.md and look at the screenshots. Each pack page has exact steps and a prompt to copy.

What is DESIGN.md?

DESIGN.md is Google's open format for describing a visual identity to coding agents in one Markdown file, covering colors, type, spacing, radii, shadows and components. Stylepack writes one for any public website.

How do I extract design tokens from a website?

Paste the website address into Stylepack. The pack includes tokens.json in W3C design tokens format (DTCG), the same values as CSS custom properties in tokens.css, and a Tailwind v4 theme in tailwind.css.

What is Stylepack Pro?

Pro is $9 per month (or $90 per year) and gives you 50 packs per month, the ability to measure any page of a site rather than only its home page, private packs, and an MCP server and API so your AI agent can use Stylepack by itself.

More on this profile

Stylepack has a free listing. The owner can unlock the full profile with a paid launch for $5:

  • Founder story (locked)
  • Milestones (locked)
  • Demo video (locked)
  • Dofollow website link (locked)

Shoppers also viewed

Support