website-design-cloner
De la autor
Analyzes and reverse-engineers website designs directly from a target URL, extracting layout structures, design tokens (colors, typography, spacing), component hierarchies, visual assets, and responsive behaviors to enable full 1:1 duplication into modern code (Tailwind CSS v4, React/Next.js, HTML/CSS). / Mempelajari dan merekayasa balik desain situs web langsung dari URL target, mengekstrak struktur layout, design token (warna, tipografi, spacing), hierarki komponen, aset visual, dan perilaku responsif untuk duplikasi 1:1 penuh ke kode modern.
Instalare
npx skills add roedyrustam/vibes-plug --skill website-design-cloner -a claude-code
Se instalează în .claude/skills/website-design-cloner/ · Fiecare comandă descarcă skill-ul direct de pe GitHub cu utilitarul open source skills.
Identic octet cu octet cu commit-ul scanat, cu licența depozitului și un fișier SOURCE.txt.
Vrei ca agentul să-ți propună skill-uri în timp ce scrii? Vezi cum folosești skill-urile din IDE.
Verificări de siguranță pe SKILL.md
Niciun avertisment.
De ce 83
aiqbench calculează scorul de încredere din semnale publice. Nu este un audit de securitate, așa că citește un skill înainte să-l instalezi.
Skill-uri similare
Cele mai apropiate de acesta prin ce fac și când sunt folosite.
- clone-websitecoco-research/cocoClone any website into a pixel-perfect single-file HTML prototype. Extracts design tokens, assets, CSS computed styles, interaction patterns, and content via Playwright. Outputs a self-contained HTML file with real data injection. Use when the user wants to clone, replicate, reverse-engineer, or create a pixel-perfect copy of any website or web app. Provide one or more target URLs as arguments.Testare★ 787
- web-clonenexu-io/open-design网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。Inginerie★ 103.9K
- firecrawl-website-design-clonefirecrawl/skillsExtract an existing website's visual system into DESIGN.md, or collect its existing logo, colors, fonts and homepage messaging for a document. Use for reference-based UI implementation, documenting design patterns, or matching a presentation to a company's website. Excludes inventing a new brand or brand positioning.Design★ 137
- replica-designJakeschincariol/replica-skillRebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets instead of the target's logos, icons, illustrations or licensed fonts. Includes a WCAG contrast checker. Use when the user says "match the design", "rebuild the design system", "get the colours and fonts", "make it look like X", "design tokens for my clone", or after /replica-architect.Design★ 5.4K
- web-design-analyzeranbeime/skill网页与数字界面设计师和网页开发工程师在需要逆向分析网页截图时，使用本技能一键提取配色、排版及组件特征，自动生成结构化 Design System 数据与 AI Coding Prompt，让设计还原与前端开发更高效。Design★ 8.6K
- web-designhashgraph-online/awesome-codex-pluginsUse for web interfaces, landing pages, product sites, dashboards, React, Next.js, Astro, Tailwind, frontend audits, responsive design, browser interaction, web motion, or requests for a distinctive non-generic website. Select the web surface and implementation track, load a small reference bundle, preserve usability and accessibility, and validate the rendered result. Skip when the target is exclusively native Apple, Android, or Windows.Design★ 1.4K
Note și recenzii
—
nicio recenzie
Ai încercat acest skill? Notează-l ca să-i ajuți pe alții. Autentifică-te
Discuție
Intră în discuție. Autentifică-te