design-teardown SKILL.md skillA
design-teardown from yunyueli/design-teardowns is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add yunyueli/design-teardowns/design-teardown@git:20260712.702fbffPins git:20260712.702fbff in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- yunyueli/design-teardowns
- Path
skills/design-teardown/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260712.702fbff, committed Jul 12, 2026
- Size
- 7,850 bytes
- Repository stars
- 9
- License
- CC-BY-4.0
Reverse-engineer a real, existing website or app into a source-level design teardown: pull its actual design tokens (colors, fonts, easing, durations, radii) and assets from the live page, then rebuild it faithfully in the subject's own visual language. Use whenever someone names or links a specific real product and wants its true design taken apart — "extract the fonts/colors/easing from X", "reverse-engineer X's design system", "how did X build this landing page, I want to replicate the…
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Design Teardown · 顶级产品设计逆向拆解 把一个产品(网页落地页,或本地原生 app)拆到**可复刻的每一个数值**。产出既给人读(交互页 + 文档), 也给 AI、工程师复用(真实 token + 真实资产 + 机器可读 manifest)。 ## 这个 skill 为什么这样设计(先读) 一份合格的设计拆解,核心不是「看起来像」,而是**每个结论可回溯到真实来源**。所以两条铁律贯穿始终: 1. **真实抽取,不靠观感。** 色值、字体、缓动、时长、圆角一律从线上站点的**计算样式 + 样式表原文**抽, 字体、视频、图、源码一律**真的下下来**。凭肉眼印象写的数值一文不值,还会误导复刻。 2. **实锤 vs 推断,分清楚。** 抽取到的是「实锤」;营销层技术栈、动效意图等观察推断是「推断」。 每个数值标好来源,冲突处以抽取为准。这是拆解可信度的命根子。 第二个信念:**针对性,不套模板。** 拆 Linear 就用 Linear 的精密无衬线紫、拆 Moonshot 就用它的极黑日食、 拆 tutti 就用它的电影感——**拆解页本身用被拆对象的视觉语言呈现**,让人一眼知道在拆谁。套统一模板 = 失败。 ## 产出物(每站一个目录) ``` <site>/ ├── teardown.html 交互式拆解页(该站视觉语言 + 真实素材 + 至少一个签名效果可跑 demo) ├── 设计解构.md 定位、色彩、字体、动效、Hero 手法、签名母题、工艺、关键发现(标实锤/推断) ├── 复刻指南.md 可复制 :root token + 复现签名效果的代码 + 选型决策 + 工程坑 ├── 出处与方法.md 抽取链路、实锤清单、推断清单、局限 ├── 事实核查.md 逐条核对页面数值 vs 真实抽取,列漂移并改正 ├── 设计评审.md 以顶级设计视角评审精度与完成度,给可执行改进 ├── design-tokens.css 真实 token 的可复制 CSS ├── tokens.json 机器可读:probe(计算样式)+ tokens(挖掘) ├── real-assets/ 真字体、视频、音频、图、CSS 源码 + manifest.json ├── recording/scroll.webm 真实滚动录屏 ├── keyframes/*.jpg 逐屏关键帧 └── screenshots/ hero.jpg 首屏 + full.jpg 整页(真实渲染) ``` ## 工作流 …
Read the whole file at its exact version.
How to install
mdr add yunyueli/design-teardowns/design-teardown@sha256:056c36954347c7e3The line at the top of this page pins the label git:20260712.702fbff, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_ajoeg7lnnfrigrvw)
3 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Jul 12, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (7850 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
yunyueli/design-teardowns · 9 stars · license CC-BY-4.0 · pushed 2026-09-23 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_ajoeg7lnnfrigrvw GET https://markdownregistry.com/api/v1/resolve?ref=yunyueli/design-teardowns/design-teardown GET https://markdownregistry.com/api/v1/blob/056c36954347c7e3acd7597d67e469a695e1ed83f20f5805d59caf2a87a460d6
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.