{"repo":"mitang-ai/frontend-distill","free":true,"listed":false,"github":"https://github.com/mitang-ai/frontend-distill","clone":"git clone https://github.com/mitang-ai/frontend-distill.git","description":"Distill websites into reusable AI-readable frontend systems: visual design, layout structure, and responsive behavior.","language":"JavaScript","stars":13,"topics":["ai","ai-agents","automation","claude-code","design-system","design-tokens","frontend","layout","responsive-design","skill"],"license":"MIT","category":"ui-components","readme_excerpt":"Frontend Distill 从真实网站整理出可复用的前端设计资料 前端蒸馏.skill 提取视觉样式，也整理布局、区块节奏和响应式信息。 输出可继续使用的 DESIGN.md、LAYOUT.md 和结构化 tokens。 其他语言 / Other Languages: English · 日本語 · 한국어 · Español Frontend Distill 是一个开源的前端蒸馏.skill + 工具链，用来从真实网站提取视觉、布局和响应式信息，并整理成便于复用的文档与 tokens。 它不是简单导出一份 CSS 明细，也不是只做一份风格展示文档。 仓库提供提取脚本、标准化工具和 skill，用来把零散的页面证据整理成一套可继续使用的前端资料。 本 README 的组织方式参考了花叔常见的开源写法，但标题、节奏、项目表达与结构已经按 Frontend Distill 重新编排。 --- 它想解决什么问题 awesome-design-md 已经证明了 DESIGN.md 很适合把视觉风格交给 AI。 但真实项目里，问题往往不在“颜色像不像”，而在： - 页面骨架不稳 - 区块节奏不对 - 桌面端拥挤 - 手机端堆叠失衡 - CTA、导航、内容区的结构关系靠模型自由发挥 换句话说，很多资料能告诉 AI “界面应该长什么样”，却没有足够明确地告诉它 “页面应该怎么组织”。 Frontend Distill 就是为了解决这个缺口。 项目定位 这个项目不是单纯的提取器，而是三层组合： - 精准提示词驱动的 skill - 负责确定性采集与整理的工具 - 面向 AI 复用的结构化产物 它的目标不是让模型自己猜，而是尽可能把重复劳动交给脚本，把高价值判断留给模型。 最终产物 Frontend Distill 目前围绕四类核心产物工作： - DESIGN.md - LAYOUT.md - design-tokens.json - layout-tokens.json 这四者分工不同： - Markdown 负责给人和 AI 提供高层说明 - JSON 负责给工具和 agent 提供低歧义、低 token 的结构化输入 为什么它更省 tokens 如果只靠长提示词让 AI 看网页、读样式、自己总结，通常会有三个问题： - 流程容易漂 - 随机性高 - token 消耗大 这个项目的思路正好相反： - 提示词只做编排和约束 - 脚本负责提取、聚类、去重、裁剪 - AI 最后只读取整理后的结果 所以它更接近一种“前端系统蒸馏流水线”，而不是一次性的 vibe prompt。 安装 先 clone 仓库： 安装依赖： 其中 playwright 用于自动访问目标网站， npx playwright install chromium 用于安装实际浏览器运行时。 作为 CLI 使用时，也可以直接运行： 把 skill 安装到本地 skills 目录： 安装后会在 skill 目录里额外生成一个 RUNTIME.md ，里面记录当前项目的实际工具路径，供 agent 在已安装 skill 模式下直接调用。 如果你的 agent 支持直接从仓库路径加载 skill，也可以直接使用： - skill/frontend-distill 使用流程 1. 让 agent 或工具直接访问目标网站 URL。 2. 运行自动提取命令，生成截图、raw extraction、bundle 和 tokens。 3. 把输出结果交给 frontend-distill skill 消费。 ","default_branch":null,"files":null,"tree":[],"storefront":"/r/mitang-ai","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/mitang-ai/frontend-distill/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}