DietrichGebert/ponytailPlugins
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
138k
1 add
Chrome extension for DESIGN.md and SKILL.md extraction
This extension extracts typography, colors, spacing, radius, shadows, and motion from the active page, then formats the result as TypeUI-style design markdown. It also generates agent-ready skill markdown, with a popup for refresh, explain, and download actions.
2,809 stars•303 forks•JavaScript•Updated 3mo ago
Who it's for
Builders who want to convert a live website into design guidance for agent-led website work.
What it delivers
You can capture a site’s design system once and reuse it as markdown instead of re-reading the page by hand.
What it does
Auto-extract page styles
Reads style signals from the active tab, including typography, colors, spacing, radius, shadows, and motion.
Generate design markdown
Creates `DESIGN.md` output from the extracted page signals using the TypeUI format.
Generate skill markdown
Creates `SKILL.md` output that agents can use as design guidance.
Refresh the current page
Re-runs extraction when the page state changes.
Download generated files
Saves the output as `DESIGN.md` or `SKILL.md`.
Explain the result
Shows how the file was generated and links back to the TypeUI reference.
How to get it
- 1Run tests locally
node tests/run-tests.mjs
README
TypeUI DESIGN.md Extractor (Chrome Extension)
This Chrome extension extract styles and information from any given site and generates a DESIGN.md or SKILL.md file that you can use with tools such as Google Stitch, Claude Code, Codex, and others to build websites with a given design system blueprint. The file is based on the open-source TypeUI DESIGN.md format.
Getting started
Load the extension in Chrome:
- Open
chrome://extensions - Enable Developer mode
- Click Load unpacked
- Select this project folder
Curated design skills
Check out curated design systems at typeui.sh/design-skills.
Available actions
| Action | Description |
|---|---|
| Auto-extract | Reads styles from the active tab (typography, colors, spacing, radius, shadows, motion). |
Generate DESIGN.md | Produces design-system documentation markdown from extracted signals. |
Generate SKILL.md | Produces agent-ready skill markdown from extracted signals. |
| Refresh | Re-runs extraction for the current page state. |
| Download | Saves generated output as DESIGN.md or SKILL.md. |
Explain (?) | Shows how the file was generated, with TypeUI reference. |
Generated file structure
The generated markdown follows this structure:
| Section | What it does |
|---|---|
Mission | Defines the design-system objective for the extracted site. |
Brand | Captures product/brand context, URL, audience, and product surface. |
Style Foundations | Lists inferred visual tokens and foundations. |
Accessibility | Applies WCAG 2.2 AA requirements and interaction constraints. |
Writing Tone | Sets guidance tone for implementation-ready output. |
Rules: Do | Lists required implementation practices. |
Rules: Don't | Lists anti-patterns and prohibited behavior. |
Guideline Authoring Workflow | Defines ordered guideline authoring steps. |
Required Output Structure | Enforces consistent output sections. |
Component Rule Expectations | Defines required interaction/state details. |
Quality Gates | Adds testable quality and consistency checks. |
Local development
Run tests locally:
node tests/run-tests.mjs
License
This project is open-source under the MIT License.
Sponsors
A huge thank you to the companies supporting our open-source work.
|
Skybridge |
Want to see your logo here? Become a sponsor.
Files in the repo
Repository payload•11 top-level entries
- assets
- lib
- popup
- scripts
- tests
- content-script.js
- DESIGN.md
- LICENSE
- manifest.json
- README.md
- service-worker.js
Discussion (0)
Ask about usage, or say what you built with itSign in to join the discussion.
No comments yet. Be the first to say what this is good for.
More plugins
Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.
82k
code-yeongyu/
oh-my-openagent
code-yeongyu/oh-my-openagentPlugins
OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering.
69k
thedotmack/claude-memPlugins
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
94k
dmmulroy/anti-slopPlugins
Opinionated Oxlint rules for rejecting low-evidence TypeScript and JavaScript patterns
4.3k
Yeachan-Heo/oh-my-claudecodePlugins
Teams-first Multi-agent orchestration for Claude Code
39k