GitHub radar
Get a technical drawing of any UI component in one request
A skill for Claude Code turns a UI component — code, screenshot, link, or demo — into a detailed drawing with paddings, radii, and layers. You get a ready spec sheet without manual markup.
It's a skill — instructions for an agent — that draws a precise diagram of a UI component: paddings, gaps, corner radii, layers, and screen placement.
When it helps
Useful if you design interfaces by talking to an agent and want to document or show the result to designers or other agents. Skip it if your component's geometry changes often.
Pros
- Builds the drawing from code, a screenshot, a link, or a demo
- Drops text and colors, so it survives redesigns
- Shareable with designers, reviewers, or other agents
- Comes bundled with a skill to animate the finished drawing
Cons
- You must redraw it whenever the component's geometry changes
- Result quality depends on the agent's measuring accuracy
How to set it up — step by step
- 1Open Claude Code in your project folder.
- 2Send the agent the text from the block below.
- 3Attach your component — a code file, demo link, screenshot, or Storybook story.
- 4Check the finished sheet: labeled layers, radii, paddings, and variables.
- 5Ask the agent to animate the drawing if you want a short clip.
Text for your agent
Copy this and send it to your agent — Claude Code, Codex, any of them:
Here is the repo: https://github.com/enesozturk/dimensional-drawing — install this skill for my agent (drop it into ~/.claude/skills/) and make a dimensional drawing of this component [paste your component's file, link, or screenshot], show me the finished sheet with labeled layers and radii.
▌ More finds