Screenshot To Code
作者 onewave-aifc5b7851a6c7無授權條款325 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫6 天前更新
Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".
僅公開檔案列表。將技能安裝到工作區後即可檢視檔案內容。
| 路徑 | 大小 | 類型 |
|---|---|---|
| references/stack-setup.md | 3.1 KB | text/markdown |
| references/visual-check.md | 2 KB | text/markdown |
| SKILL.md | 5.8 KB | text/markdown |
來源與署名
來源：onewave-ai/claude-skills位於screenshot-to-code提交fc5b785
授權條款： 無授權條款
內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。
更多來自 onewave-ai/claude-skills 的技能
Workout Program Designer
onewave-ai
依力量、有氧或柔軟度目標產生個人化訓練計畫，涵蓋漸進負荷、休息日與減量週安排。
Stock Photo Finder
onewave-ai
同時搜尋多個免費圖庫網站，並依授權類型、方向與配色方案篩選結果。
Sports Betting Analyzer
onewave-ai
分析讓分、大小盤與單項投注等運動博彩市場，附免責聲明，僅供娛樂與教育用途。
Knowledge Base Builder
onewave-ai
將支援工單轉化為知識庫文章、FAQ、教學與自助分流指標。
Quiz Maker
onewave-ai
產生單選題、是非題、填空題與配對題測驗，自動生成誘答選項，並提供即時評分與解析。
Portfolio Analyzer
onewave-ai
審查投資組合的風險、分散程度與費用，並提供資產配置、稅損收割與再平衡建議。
更多Software Development技能
Playground
anthropics
建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。
M5 Onboard
anthropics
透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。
Cardputer Buddy
anthropics
指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。
Web Design Guidelines
vercel-labs
依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。
Vercel React Native Skills
vercel-labs
React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。
Vercel React Best Practices
vercel-labs
Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。