[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-zarazhangrui--frontend-slides":3,"tool-zarazhangrui--frontend-slides":64},[4,17,25,39,48,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,14,15],"开发框架","Agent","语言模型","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":10,"last_commit_at":23,"category_tags":24,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,15],{"id":26,"name":27,"github_repo":28,"description_zh":29,"stars":30,"difficulty_score":10,"last_commit_at":31,"category_tags":32,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[33,34,35,36,14,37,15,13,38],"图像","数据工具","视频","插件","其他","音频",{"id":40,"name":41,"github_repo":42,"description_zh":43,"stars":44,"difficulty_score":45,"last_commit_at":46,"category_tags":47,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,3,"2026-04-04T04:44:48",[14,33,13,15,37],{"id":49,"name":50,"github_repo":51,"description_zh":52,"stars":53,"difficulty_score":45,"last_commit_at":54,"category_tags":55,"status":16},519,"PaddleOCR","PaddlePaddle\u002FPaddleOCR","PaddleOCR 是一款基于百度飞桨框架开发的高性能开源光学字符识别工具包。它的核心能力是将图片、PDF 等文档中的文字提取出来，转换成计算机可读取的结构化数据，让机器真正“看懂”图文内容。\n\n面对海量纸质或电子文档，PaddleOCR 解决了人工录入效率低、数字化成本高的问题。尤其在人工智能领域，它扮演着连接图像与大型语言模型（LLM）的桥梁角色，能将视觉信息直接转化为文本输入，助力智能问答、文档分析等应用场景落地。\n\nPaddleOCR 适合开发者、算法研究人员以及有文档自动化需求的普通用户。其技术优势十分明显：不仅支持全球 100 多种语言的识别，还能在 Windows、Linux、macOS 等多个系统上运行，并灵活适配 CPU、GPU、NPU 等各类硬件。作为一个轻量级且社区活跃的开源项目，PaddleOCR 既能满足快速集成的需求，也能支撑前沿的视觉语言研究，是处理文字识别任务的理想选择。",74913,"2026-04-05T10:44:17",[15,33,13,37],{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":45,"last_commit_at":62,"category_tags":63,"status":16},2181,"OpenHands","OpenHands\u002FOpenHands","OpenHands 是一个专注于 AI 驱动开发的开源平台，旨在让智能体（Agent）像人类开发者一样理解、编写和调试代码。它解决了传统编程中重复性劳动多、环境配置复杂以及人机协作效率低等痛点，通过自动化流程显著提升开发速度。\n\n无论是希望提升编码效率的软件工程师、探索智能体技术的研究人员，还是需要快速原型验证的技术团队，都能从中受益。OpenHands 提供了灵活多样的使用方式：既可以通过命令行（CLI）或本地图形界面在个人电脑上轻松上手，体验类似 Devin 的流畅交互；也能利用其强大的 Python SDK 自定义智能体逻辑，甚至在云端大规模部署上千个智能体并行工作。\n\n其核心技术亮点在于模块化的软件智能体 SDK，这不仅构成了平台的引擎，还支持高度可组合的开发模式。此外，OpenHands 在 SWE-bench 基准测试中取得了 77.6% 的优异成绩，证明了其解决真实世界软件工程问题的能力。平台还具备完善的企业级功能，支持与 Slack、Jira 等工具集成，并提供细粒度的权限管理，适合从个人开发者到大型企业的各类用户场景。",70612,"2026-04-05T11:12:22",[15,14,13,36],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":80,"owner_email":79,"owner_twitter":75,"owner_website":81,"owner_url":82,"languages":83,"stars":96,"forks":97,"last_commit_at":98,"license":99,"difficulty_score":100,"env_os":101,"env_gpu":101,"env_ram":101,"env_deps":102,"category_tags":109,"github_topics":79,"view_count":110,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":111,"updated_at":112,"faqs":113,"releases":140},458,"zarazhangrui\u002Ffrontend-slides","frontend-slides","Create beautiful slides on the web using Claude's frontend skills","frontend-slides 是一个基于网页的幻灯片制作工具，通过Claude的前端开发能力，帮助用户快速创建包含动画效果的高质量HTML演示文稿。它支持从零开始设计，也能将PowerPoint文件转换为网页格式，特别适合需要兼顾视觉效果与技术实现的场景。\n\n这个工具解决了传统演示文稿制作的两大痛点：一是非技术人员难以通过代码控制样式，二是AI生成内容常出现千篇一律的视觉风格。通过\"可视化预选\"机制，用户无需描述设计偏好，只需从系统生成的多个视觉方案中选择即可完成定制。对于需要将PPT迁移至网页的用户，它能完整保留原始内容并自动适配响应式布局。\n\n主要面向需要制作专业演示文稿但缺乏前端开发经验的用户群体，包括创业者、研究人员、教育工作者等。开发者也能受益于其零依赖架构——所有内容打包为单个HTML文件，无需安装框架或构建工具。技术亮点包括：12种精心设计的视觉主题（涵盖暗色系、极简风、赛博朋克等风格），内置PPT解析器支持图片与批注提取，以及通过渐进式加载策略优化交互体验。生成的代码具备良好的可访问性和注释规范，方便后续二次开发。","# Frontend Slides\n\nA Claude Code skill for creating stunning, animation-rich HTML presentations — from scratch or by converting PowerPoint files.\n\n## What This Does\n\n**Frontend Slides** helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It uses a \"show, don't tell\" approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like.\n\nHere is a deck about the skill, made through the skill:\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fef57333e-f879-432a-afb9-180388982478\n\n### Key Features\n\n- **Zero Dependencies** — Single HTML files with inline CSS\u002FJS. No npm, no build tools, no frameworks.\n- **Visual Style Discovery** — Can't articulate design preferences? No problem. Pick from generated visual previews.\n- **PPT Conversion** — Convert existing PowerPoint files to web, preserving all images and content.\n- **Anti-AI-Slop** — Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white).\n- **Production Quality** — Accessible, responsive, well-commented code you can customize.\n\n## Installation\n\n### For Claude Code Users\n\nCopy the skill files to your Claude Code skills directory:\n\n```bash\n# Create the skill directory\nmkdir -p ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002Fscripts\n\n# Copy all files (or clone this repo directly)\ncp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002F\ncp scripts\u002Fextract-pptx.py ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002Fscripts\u002F\n```\n\nOr clone directly:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides.git ~\u002F.claude\u002Fskills\u002Ffrontend-slides\n```\n\nThen use it by typing `\u002Ffrontend-slides` in Claude Code.\n\n## Usage\n\n### Create a New Presentation\n\n```\n\u002Ffrontend-slides\n\n> \"I want to create a pitch deck for my AI startup\"\n```\n\nThe skill will:\n\n1. Ask about your content (slides, messages, images)\n2. Ask about the feeling you want (impressed? excited? calm?)\n3. Generate 3 visual style previews for you to compare\n4. Create the full presentation in your chosen style\n5. Open it in your browser\n\n### Convert a PowerPoint\n\n```\n\u002Ffrontend-slides\n\n> \"Convert my presentation.pptx to a web slideshow\"\n```\n\nThe skill will:\n\n1. Extract all text, images, and notes from your PPT\n2. Show you the extracted content for confirmation\n3. Let you pick a visual style\n4. Generate an HTML presentation with all your original assets\n\n## Included Styles\n\n### Dark Themes\n\n- **Bold Signal** — Confident, high-impact, vibrant card on dark\n- **Electric Studio** — Clean, professional, split-panel\n- **Creative Voltage** — Energetic, retro-modern, electric blue + neon\n- **Dark Botanical** — Elegant, sophisticated, warm accents\n\n### Light Themes\n\n- **Notebook Tabs** — Editorial, organized, paper with colorful tabs\n- **Pastel Geometry** — Friendly, approachable, vertical pills\n- **Split Pastel** — Playful, modern, two-color vertical split\n- **Vintage Editorial** — Witty, personality-driven, geometric shapes\n\n### Specialty\n\n- **Neon Cyber** — Futuristic, particle backgrounds, neon glow\n- **Terminal Green** — Developer-focused, hacker aesthetic\n- **Swiss Modern** — Minimal, Bauhaus-inspired, geometric\n- **Paper & Ink** — Literary, drop caps, pull quotes\n\n## Architecture\n\nThis skill uses **progressive disclosure** — the main `SKILL.md` is a concise map (~180 lines), with supporting files loaded on-demand only when needed:\n\n| File                      | Purpose                        | Loaded When               |\n| ------------------------- | ------------------------------ | ------------------------- |\n| `SKILL.md`                | Core workflow and rules        | Always (skill invocation) |\n| `STYLE_PRESETS.md`        | 12 curated visual presets      | Phase 2 (style selection) |\n| `viewport-base.css`       | Mandatory responsive CSS       | Phase 3 (generation)      |\n| `html-template.md`        | HTML structure and JS features | Phase 3 (generation)      |\n| `animation-patterns.md`   | CSS\u002FJS animation reference     | Phase 3 (generation)      |\n| `scripts\u002Fextract-pptx.py` | PPT content extraction         | Phase 4 (conversion)      |\n| `scripts\u002Fdeploy.sh`       | Deploy to Vercel               | Phase 6 (sharing)         |\n| `scripts\u002Fexport-pdf.sh`   | Export slides to PDF           | Phase 6 (sharing)         |\n\nThis design follows [OpenAI's harness engineering](https:\u002F\u002Fopenai.com\u002Findex\u002Fharness-engineering\u002F) principle: \"give the agent a map, not a 1,000-page instruction manual.\"\n\n## Philosophy\n\nThis skill was born from the belief that:\n\n1. **You don't need to be a designer to make beautiful things.** You just need to react to what you see.\n\n2. **Dependencies are debt.** A single HTML file will work in 10 years. A React project from 2019? Good luck.\n\n3. **Generic is forgettable.** Every presentation should feel custom-crafted, not template-generated.\n\n4. **Comments are kindness.** Code should explain itself to future-you (or anyone else who opens it).\n\n## Sharing Your Presentations\n\nAfter creating a presentation, the skill offers two ways to share it:\n\n### Deploy to a Live URL\n\nOne command deploys your slides to a permanent, shareable URL that works on any device — phones, tablets, laptops:\n\n```bash\nbash scripts\u002Fdeploy.sh .\u002Fmy-deck\u002F\n# or\nbash scripts\u002Fdeploy.sh .\u002Fpresentation.html\n```\n\nUses [Vercel](https:\u002F\u002Fvercel.com) (free tier). The skill walks you through signup and login if it's your first time.\n\n### Export to PDF\n\nConvert your slides to a PDF for email, Slack, Notion, or printing:\n\n```bash\nbash scripts\u002Fexport-pdf.sh .\u002Fmy-deck\u002Findex.html\nbash scripts\u002Fexport-pdf.sh .\u002Fpresentation.html .\u002Foutput.pdf\n```\n\nUses [Playwright](https:\u002F\u002Fplaywright.dev) to screenshot each slide at 1920×1080 and combine into a PDF. Installs automatically if needed. Animations are not preserved (it's a static snapshot).\n\n## Requirements\n\n- [Claude Code](https:\u002F\u002Fclaude.ai\u002Fclaude-code) CLI\n- For PPT conversion: Python with `python-pptx` library\n- For URL deployment: Node.js + Vercel account (free)\n- For PDF export: Node.js (Playwright installs automatically)\n\n## Credits\n\nCreated by [@zarazhangrui](https:\u002F\u002Fgithub.com\u002Fzarazhangrui) with Claude Code.\n\nInspired by the \"Vibe Coding\" philosophy — building beautiful things without being a traditional software engineer.\n\n## License\n\nMIT — Use it, modify it, share it.\n","# 前端幻灯片\n\n一个用于从头开始或转换 PowerPoint 文件来创建精美、动画丰富的 HTML 演示文稿的 Claude Code 技能。\n\n## 功能概述\n\n**Frontend Slides** 帮助非设计师在不懂 CSS 或 JavaScript 的情况下创建美观的网页演示文稿。它采用“展示而非告知”的方法：不是让你用文字描述审美偏好，而是生成视觉预览并让你挑选喜欢的样式。\n\n以下是通过该技能制作的演示文稿示例：\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fef57333e-f879-432a-afb9-180388982478\n\n### 核心功能\n\n- **零依赖** — 包含内联 CSS\u002FJS 的单 HTML 文件。无需 npm，无需构建工具，无需框架。\n- **视觉风格发现** — 无法清晰表达设计偏好？没问题。从生成的视觉预览中进行选择。\n- **PPT 转换** — 将现有的 PowerPoint 文件转换为网页版，保留所有图片和内容。\n- **反 AI 滥造（Anti-AI-Slop）** — 精选独特风格，避免通用的 AI 美学（告别白底紫渐变）。\n- **生产级质量** — 可访问性强、响应式设计、注释良好的代码，支持自定义。\n\n## 安装\n\n### 适用于 Claude Code 用户\n\n将技能文件复制到您的 Claude Code 技能目录：\n\n```bash\n# Create the skill directory\nmkdir -p ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002Fscripts\n\n# Copy all files (or clone this repo directly)\ncp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002F\ncp scripts\u002Fextract-pptx.py ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002Fscripts\u002F\n```\n\n或者直接克隆：\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides.git ~\u002F.claude\u002Fskills\u002Ffrontend-slides\n```\n\n然后在 Claude Code 中输入 `\u002Ffrontend-slides` 即可使用。\n\n## 使用方法\n\n### 创建新演示文稿\n\n```\n\u002Ffrontend-slides\n\n> \"I want to create a pitch deck for my AI startup\"\n```\n\n该技能将：\n\n1. 询问你的内容（幻灯片、消息、图片）\n2. 询问你想要的感觉（印象深刻？兴奋？平静？）\n3. 为你生成 3 个视觉风格预览以供比较\n4. 在你选择的风格下创建完整的演示文稿\n5. 在你的浏览器中打开它\n\n### 转换 PowerPoint\n\n```\n\u002Ffrontend-slides\n\n> \"Convert my presentation.pptx to a web slideshow\"\n```\n\n该技能将：\n\n1. 提取你 PPT 中的所有文本、图片和备注\n2. 向你展示提取的内容以确认\n3. 让你选择视觉风格\n4. 生成包含所有原始素材的 HTML 演示文稿\n\n## 内置风格\n\n### 深色主题\n\n- **Bold Signal** — 自信、高冲击力、深色背景上的鲜艳卡片\n- **Electric Studio** — 干净、专业、分栏面板\n- **Creative Voltage** — 充满活力、复古现代、电光蓝 + 霓虹色\n- **Dark Botanical** — 优雅、精致、暖色调点缀\n\n### 浅色主题\n\n- **Notebook Tabs** — 编辑风格、井井有条、带彩色标签的纸张\n- **Pastel Geometry** — 友好、亲切、垂直胶囊形状\n- **Split Pastel** — 俏皮、现代、双色垂直分割\n- **Vintage Editorial** — 风趣、个性驱动、几何形状\n\n### 特色风格\n\n- **Neon Cyber** — 未来感、粒子背景、霓虹发光\n- **Terminal Green** — 面向开发者、黑客美学\n- **Swiss Modern** — 极简、包豪斯风格、几何图形\n- **Paper & Ink** — 文学感、首字下沉、引用块\n\n## 架构\n\n该技能采用**渐进式披露**（progressive disclosure）策略 —— 主 `SKILL.md` 是一份简洁的地图（约 180 行），支持文件仅在需要时按需加载：\n\n| 文件                      | 用途                        | 加载时机               |\n| ------------------------- | --------------------------- | ---------------------- |\n| `SKILL.md`                | 核心工作流程与规则          | 始终（技能调用时）     |\n| `STYLE_PRESETS.md`        | 12 个精选视觉预设           | 第 2 阶段（风格选择）    |\n| `viewport-base.css`       | 必需的响应式 CSS            | 第 3 阶段（生成）        |\n| `html-template.md`        | HTML 结构与 JS 功能         | 第 3 阶段（生成）        |\n| `animation-patterns.md`   | CSS\u002FJS 动画参考             | 第 3 阶段（生成）        |\n| `scripts\u002Fextract-pptx.py` | PPT 内容提取                | 第 4 阶段（转换）        |\n| `scripts\u002Fdeploy.sh`       | 部署到 Vercel               | 第 6 阶段（分享）        |\n| `scripts\u002Fexport-pdf.sh`   | 导出幻灯片为 PDF            | 第 6 阶段（分享）        |\n\n此设计遵循 [OpenAI 的 Harness Engineering](https:\u002F\u002Fopenai.com\u002Findex\u002Fharness-engineering\u002F) 原则：“给代理一张地图，而不是一本 1000 页的操作手册。”\n\n## 理念\n\n该技能的诞生源于以下信念：\n\n1. **你不需要成为设计师也能制作美好的事物。** 你只需要对所见之物做出反应。\n\n2. **依赖即债务。** 单个 HTML 文件将在 10 年后依然有效。2019 年的 React 项目？祝你好运。\n\n3. **通用即平庸。** 每个演示文稿都应感觉是量身定制的，而非模板生成的。\n\n4. **注释是善意。** 代码应能向未来的自己（或任何打开它的人）解释自身。\n\n## 分享你的演示文稿\n\n创建演示文稿后，该技能提供两种分享方式：\n\n### 部署到在线链接\n\n一条命令即可将你的幻灯片部署到一个永久、可分享的链接，可在任何设备上工作 —— 手机、平板、笔记本电脑：\n\n```bash\nbash scripts\u002Fdeploy.sh .\u002Fmy-deck\u002F\n# or\nbash scripts\u002Fdeploy.sh .\u002Fpresentation.html\n```\n\n使用 [Vercel](https:\u002F\u002Fvercel.com)（免费层）。如果是第一次使用，该技能会引导你完成注册和登录。\n\n### 导出为 PDF\n\n将你的幻灯片转换为 PDF，用于邮件、Slack、Notion 或打印：\n\n```bash\nbash scripts\u002Fexport-pdf.sh .\u002Fmy-deck\u002Findex.html\nbash scripts\u002Fexport-pdf.sh .\u002Fpresentation.html .\u002Foutput.pdf\n```\n\n使用 [Playwright](https:\u002F\u002Fplaywright.dev) 以 1920×1080 分辨率截图每张幻灯片并组合成 PDF。如果需要会自动安装。动画不会被保留（这是静态快照）。\n\n## 要求\n\n- [Claude Code](https:\u002F\u002Fclaude.ai\u002Fclaude-code) CLI\n- 对于 PPT 转换：Python 及 `python-pptx` 库\n- 对于 URL 部署：Node.js + Vercel 账户（免费）\n- 对于 PDF 导出：Node.js（Playwright 会自动安装）\n\n## 致谢\n\n由 [@zarazhangrui](https:\u002F\u002Fgithub.com\u002Fzarazhangrui) 使用 Claude Code 创建。\n\n灵感来源于“氛围编码”（Vibe Coding）理念 —— 在不作为传统软件工程师的情况下构建美好事物。\n\n## 许可证\n\nMIT —— 使用它，修改它，分享它。","# frontend-slides 快速上手指南\n\n**frontend-slides** 是一个专为 Claude Code 设计的技能（Skill），无需 CSS 或 JavaScript 知识即可创建精美的 HTML 演示文稿。它支持从零创作或转换 PowerPoint 文件，并采用“视觉预览”方式帮助用户选择风格。\n\n## 1. 环境准备\n\n在开始之前，请确保您的开发环境满足以下要求：\n\n- **核心工具**：已安装 [Claude Code](https:\u002F\u002Fclaude.ai\u002Fclaude-code) CLI。\n- **PPT 转换支持**：需安装 Python 及 `python-pptx` 库。\n- **发布与导出支持**：需安装 Node.js（用于部署到 Vercel 和导出 PDF）。\n- **网络环境**：访问 GitHub 仓库可能需要稳定的网络连接。\n\n## 2. 安装步骤\n\n推荐使用 Git 克隆整个仓库到 Claude Code 的技能目录中，以便自动管理文件结构。\n\n```bash\n# 克隆仓库到技能目录\ngit clone https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides.git ~\u002F.claude\u002Fskills\u002Ffrontend-slides\n```\n\n安装完成后，该技能将自动生效。您无需手动复制单个文件。\n\n## 3. 基本使用\n\n打开终端进入 Claude Code 会话，输入命令 `\u002Ffrontend-slides` 即可调用该技能。\n\n### 创建新演示文稿\n\n直接描述您的需求，AI 会引导您完成内容梳理和风格选择。\n\n```text\n\u002Ffrontend-slides\n\n> \"我想为我的 AI 初创公司创建一个融资路演幻灯片\"\n```\n\n**流程说明：**\n1. 确认内容（幻灯片、消息、图片）。\n2. 确认期望氛围（震撼？兴奋？平静？）。\n3. 从生成的 3 个视觉预览中选择喜欢的风格。\n4. 生成完整的 HTML 演示文稿并在浏览器中打开。\n\n### 转换 PowerPoint 文件\n\n如果您已有 `.pptx` 文件，可以直接请求转换。\n\n```text\n\u002Ffrontend-slides\n\n> \"将我的 presentation.pptx 转换为网页幻灯片\"\n```\n\n**流程说明：**\n1. 提取所有文本、图片和备注。\n2. 确认提取的内容无误。\n3. 选择视觉风格。\n4. 生成包含原始素材的 HTML 演示文稿。\n\n### 分享与导出\n\n生成演示文稿后，您可以使用内置脚本进行分享：\n\n- **部署上线**：一键部署到 Vercel 获取永久链接。\n  ```bash\n  bash scripts\u002Fdeploy.sh .\u002Fmy-deck\u002F\n  ```\n- **导出 PDF**：将幻灯片转换为静态 PDF 文件。\n  ```bash\n  bash scripts\u002Fexport-pdf.sh .\u002Fpresentation.html .\u002Foutput.pdf\n  ```","某 AI 创业团队的技术合伙人急需向投资人展示产品路线图，但他不懂设计且时间紧迫，必须在明天会议前定稿。\n\n### 没有 frontend-slides 时\n- 手动调整 PPT 动画与排版耗费大量精力，常因细节对齐问题反复修改半天。\n- 现有模板风格过于通用，难以传达产品的科技感，容易给投资人留下廉价印象。\n- 演示文件依赖本地软件，跨设备分享时常出现字体缺失或兼容性问题。\n- 若尝试制作网页版，需花费数天学习 CSS 框架并处理复杂的构建流程。\n\n### 使用 frontend-slides 后\n- frontend-slides 一键生成包含内联样式的单 HTML 文件，无需安装任何环境即可打开。\n- 提供多种视觉预览供选择，无需懂代码即可通过点击锁定理想的设计风格。\n- 自动实现响应式布局，确保在手机、平板及大屏上均能完美呈现交互效果。\n- 内置反平庸化设计库，避免紫色渐变等廉价 AI 审美，显著提升演示的专业度。\n\nfrontend-slides 将原本需要数小时的设计工作压缩至分钟级，让内容创作者专注于核心表达而非样式调试。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fzarazhangrui_frontend-slides_e2307064.png","zarazhangrui","Zara Zhang","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fzarazhangrui_a3cfe107.jpg","AI tinkerer",null,"San Jose, California","http:\u002F\u002Fwww.zarazhang.com\u002F","https:\u002F\u002Fgithub.com\u002Fzarazhangrui",[84,88,92],{"name":85,"color":86,"percentage":87},"Shell","#89e051",75.7,{"name":89,"color":90,"percentage":91},"CSS","#663399",14.1,{"name":93,"color":94,"percentage":95},"Python","#3572A5",10.2,12914,970,"2026-04-05T11:12:27","MIT",1,"未说明",{"notes":103,"python":101,"dependencies":104},"核心功能需通过 Claude Code CLI 调用；PPT 转换需 Python 环境及 python-pptx 库；部署至在线链接需 Node.js 和 Vercel 账号；导出 PDF 需 Node.js 环境，Playwright 会自动安装；生成的幻灯片为单 HTML 文件，零依赖且兼容性好。",[105,106,107,108],"Claude Code CLI","python-pptx","Node.js","Playwright",[15,36],15,"2026-03-27T02:49:30.150509","2026-04-06T07:14:56.760672",[114,119,123,127,131,135],{"id":115,"question_zh":116,"answer_zh":117,"source_url":118},1784,"如何减少前端幻灯片技能的上下文膨胀？","该问题已在 v2.0.0 版本中解决。通过渐进式披露和按需加载支持文件，将 SKILL.md 从 1098 行缩减至 183 行，始终加载的上下文减少了约 89%，有效降低了 token 消耗。","https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides\u002Fissues\u002F21",{"id":120,"question_zh":121,"answer_zh":122,"source_url":118},1785,"CSS 代码重复问题是如何解决的？","原有的 CSS 重复已被消除，改为使用单一的规范文件 `viewport-base.css` 作为标准引用，避免了在不同文件中重复定义相同的视口适配样式。",{"id":124,"question_zh":125,"answer_zh":126,"source_url":118},1786,"嵌入式 HTML\u002FJS 模板代码现在存储在哪里？","原本嵌入的技能代码已提取到独立的参考文件中，包括 `html-template.md`、`animation-patterns.md` 以及脚本 `scripts\u002Fextract-pptx.py`，使主文档更简洁。",{"id":128,"question_zh":129,"answer_zh":130,"source_url":118},1787,"冗长的阶段描述部分被优化成什么格式了？","为了减少文本量，原本冗长的散文式描述已转换为表格形式，遵循“链接不重复”和“示例优于解释”的文档原则，提高了信息密度和可读性。",{"id":132,"question_zh":133,"answer_zh":134,"source_url":118},1788,"预设（Presets）的配置现在是否还包含完整 CSS 块？","不再包含完整的 CSS 块，仅保留必要的差异（deltas）信息。这避免了过度指定，进一步减少了上下文负载，同时保留了所有必要的质量输出信息。",{"id":136,"question_zh":137,"answer_zh":138,"source_url":139},1789,"添加图片后幻灯片内容超出页面范围怎么办？","如果遇到内容溢出导致滚动不稳定，需要重新向 Agent 发送指令，明确要求：“按需要将此幻灯片上的内容重新组织，以确保整个幻灯片可见”（Reorganize the contents on this slide as needed to ensure entire slide is visible）。","https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides\u002Fissues\u002F1",[141],{"id":142,"version":143,"summary_zh":144,"released_at":145},101274,"v2.0.0","## What's New\n\nThis release completely restructures the skill to reduce context bloat by ~89%, following best practices from [Claude Code's skill docs](https:\u002F\u002Fcode.claude.com\u002Fdocs\u002Fen\u002Fskills) and [OpenAI's harness engineering](https:\u002F\u002Fopenai.com\u002Findex\u002Fharness-engineering\u002F) approach.\n\n### The Problem\n\nThe previous version loaded **1,625 lines** of instructions into Claude's context on every invocation — including CSS code blocks, Python scripts, and HTML templates that were only needed during specific phases. This crowded out the actual presentation content and reduced output quality.\n\n### The Fix: Progressive Disclosure\n\n`SKILL.md` is now a **183-line map** (was 1,098). Supporting files are loaded on-demand only when Claude reaches the relevant phase:\n\n| File | Purpose | Loaded When |\n|------|---------|-------------|\n| `SKILL.md` | Core workflow and rules | Always |\n| `STYLE_PRESETS.md` | 12 curated visual presets | Phase 2 (style selection) |\n| `viewport-base.css` | Mandatory responsive CSS | Phase 3 (generation) |\n| `html-template.md` | HTML structure and JS features | Phase 3 (generation) |\n| `animation-patterns.md` | CSS\u002FJS animation reference | Phase 3 (generation) |\n| `scripts\u002Fextract-pptx.py` | PPT content extraction | Phase 4 (conversion) |\n\n### Other Changes\n\n- **Deduplicated viewport CSS** — was repeated across both files, now lives in one canonical `viewport-base.css`\n- **Embedded design aesthetics prompt** — anti-AI-slop instructions are now always in context\n- **PPT extraction is now an executable script** — `scripts\u002Fextract-pptx.py` can be run directly\n- **Removed ~566 lines of duplication** — total content is 1,059 lines (down from 1,625)\n- **Updated README** with new architecture explanation\n\n### Upgrading\n\n```bash\n# Re-clone to your skills directory\nrm -rf ~\u002F.claude\u002Fskills\u002Ffrontend-slides\ngit clone https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides.git ~\u002F.claude\u002Fskills\u002Ffrontend-slides\n```\n\nAll existing functionality is preserved — same 12 style presets, same 5-phase workflow, same PPT conversion support.","2026-03-04T06:54:37"]