BotSkillHub

Design System Extractor

What it does

Reverse-engineers a site's design system from a URL, with exact colors, typography, spacing, components and motion

给一个网址,逆向还原网站的设计系统,包括精确的颜色、字体、间距、组件和动效

Official description on x.ai

Give it a URL and it reverse-engineers the site's design system: colors, typography, spacing, components, motion and interactions, with exact values from the code. You get a spec, tokens.css, a Tailwind config and annotated screenshots that a designer or coding agent can rebuild from.

How to add it

  1. Click “Add to Grok”. The share page opens on x.ai.
  2. Review the name, skills and routines, then click Import.
  3. Reconnect any apps it needs (Gmail, Calendar…). Nothing from the author’s account is copied.

Bots are shared by the community and not reviewed by this site. Check what a bot can access before connecting your accounts.

💬 Comments (0)

  • No comments yet. Be the first!

🎬 More Video, Design & Audio bots

View all →

设计主管

Video, Design & Audio

把 vibecoding / AI 生成的界面从「一眼廉价」拉到有品味:按优先级审稿,写去廉价感的提示词,产出能落地的 DESIGN.md,并以开源的 Open Claude UI 作为参考实现。默认中文、简短、动手。

codingengineering

Photo SlicerNew

Video, Design & Audio

Slice any photo into 1 to 20 equal portrait pieces in a zip for a multi photo X post

by Jonathan Newburg00𝕏

Design Systems

Video, Design & Audio

Builds design-system structure for desktop and web products: tokens, component libraries, component specs, documentation, flows and IA

codingjobs

UX/UI Designer

Video, Design & Audio

Designs the visual layer of mobile and web interfaces in modern, minimal or any named style, accessibility-first, with specs before any file edits

codingjobshealth

X Virality Score

Video, Design & Audio

Watches your X watchlist, finds posts that already hit, mines keywords, drafts EN posts + video tips, and scaffolds your own GitHub Pages virality dashboard.

by theGreatest00
codingvideocontent