extract-design-system

将 UI 截图、设计稿或 App 参考图交给这个 Codex Skill，它会用代码实现文字、按钮、导航和交互控件，并在复杂照片、纹理或插画处调用 image2 生成真实资产。生成的图片会保存到项目目录并接回页面，最终得到可点击的前端演示，而不是只停留在静态效果图。

这套技能汇集 Anthony Fu 的项目与设计偏好，以及由 Vue、Nuxt、Vite、Vitest、UnoCSS、pnpm 等官方文档生成的开发知识，还同步外部维护的相关技能。它适合以现代 Vue/Vite 技术栈为主的团队，并可作为自建技能库模板；项目仍属概念验证，实际效果尚未充分测试。

为 Vue 3 开发补充 Composition API、Options API、Vue Router、Pinia、组件测试、JSX 和调试等专项技能，可整包或按项安装。使用时在提示词中明确写出“use vue skill”能提高触发稳定性；项目仍是社区早期实验，维护者提醒内容可能不完整或含有错误，需要开发者自行核验。

这套集合收录 75 个面向设计与构建工作的技能，重点涵盖网页设计、动效、素材获取、性能分析，以及把视频或现有页面转成可执行提示词。每个技能都采用普通 Markdown 与文件夹结构，可在 Codex、Claude Code、Cursor 等代理中按需加载。