stitch::extract-design-md
直接从前端源代码中提取完整的设计系统(DESIGN.md)——React、Vue、Svelte、Angular、纯 HTML/CSS 或任何 Web 框架。分析组件文件、样式表、Tailwind 配置、主题定义和设计令牌,生成内容丰富、与 Stitch 兼容的设计系统文档。当用户希望从现有代码库逆向还原设计系统、审计项目的视觉语言、从源文件提取设计令牌,或理解前端仓库中的样式模式时,使用本技能——即使用户只是说“这个应用长什么样?”或“从这段代码中提取设计”。
机器翻译查看英文原文
Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."
适用对象:设计与内容创作。自动收录 · 待核查。
原作者说明节选
从固定版本的 SKILL.md 提取,保留原文语言。以下内容属于作者说明,本站尚未验证安装、兼容或运行结果。
查看英文原文
原文涵盖的主题
- Extract Design System from Frontend Code
- Why This Exists
- When to Use
- Prerequisites
- Workflow
- Phase 1: Project Discovery
- 1. Detect the Framework and Stack
- 2. Map the Source Tree
Analyze frontend source code to extract a comprehensive design system document (DESIGN.md) that captures the project's visual language — colors, typography, spacing, component patterns, and layout principles — directly from the source files, without needing to build or render the application. The design-md skill works from rendered HTML. But often you have a codebase and want to understand its design system before you can even run the app — maybe dependencies are missing, the build is broken, or you just want a quick audit. This skill reads the source files themselves: stylesheets, component files, theme configs, and Tailwind setups. It's faster and works anywhere. User has a frontend codebase and wants to extract or document its design system User wants to migrate a project's visual identity into Stitch User asks to "audit the styling" or "understand the design language" of a repo User wants to create a DESIGN.md from existing source code The app can't be built/rendered but the source is available User wants to unify or reconcile inconsistent styles across a codebase Access to the frontend project's source directory No build or runtime dependencies needed — this skill reads source
这里只展示节选,请以完整原文和当前要求为准。
- 来源仓库
- google-labs-code/stitch-skills
- 源文件
- plugins/stitch-design/skills/extract-design-md/SKILL.md
- 固定版本
- 0337446dadde6f8c94210444e2aa9d546126480f
准备条件
- 本条仅收录原作者的技能元数据;请阅读完整说明,确认依赖、许可与使用条件。
第一件可以尝试的小事
先阅读原作者说明,再决定是否在自己的 AI 工具中使用。
对应 AI 工具说明
作者有说明不等于本站实机验证。没有证据时,不自动标为兼容、安全或免费。
来源与内容状态
本条为自动发现的元数据,尚未完成人工文档核查;适用性与运行结果待核查。
原作者:Google Stitch Skills · 原作者仓库元数据。文档核查:未核查。最近来源检查:2026-11-09T14:01:41.130Z。
分类由名称、说明与路径规则生成,分类不代表已核实适配。
许可与权利归属
Apache-2.0。第三方内容及版权归原作者,使用条件以原文为准。
许可原文 ↗本站没有因同步、复制或用户自报成功而将资源标为运行验证通过。
限制与注意事项
- 元数据收录不代表本站已经安装、适配、实测或进行安全审查。